Copy as Markdown

If you've browsed GitBook or other popular documentation sites, you've likely seen the option to copy an entire page in Markdown format for LLMs and it's incredibly useful. That's why I recreated this Copy as Markdown button for Framer from scratch, with full customization options and flexible behavior.

It works as a markdown copy button, AI copy button, and copy content button that lets visitors quickly copy your page and use it in AI tools. Just add it to your documentation site or blog and give users a faster way to share content with LLMs.

Instructions

How to Use:

• Copy and paste the component into your Framer project file

• Customize the component using the right-hand property panel:

  • Copy text variants (Default, Copying, Copied states)

  • Button styling (font size, padding, radius, colors, borders)

  • Icon customization (change icon or use the default copy icon)

  • Copy settings (exclude frames, headers/footers, add page link)

• Preview your site and test the copy to markdown functionality

• Click the button to copy the page as Markdown

• Paste into ChatGPT, Claude, Gemini, or other AI tools

Pro Tip: Use the Exclude Frames field to prevent specific sections (like navigation or footer) from being included in the copied Markdown.

How It Works

The Copy as Markdown component (a smart markdown converter and copy page Framer utility) provides control through several property groups:

Properties Control

Text & States

• Copy Text: Customize button text for three states:Default (“Copy Page as MD”), Copying (“Copying…”), Copied (“Copied!”)

• Copying Text: Displayed during the copy operation

• Copied Text: Success confirmation text

Styling Controls

• Font Size: Adjust button text size

• Padding: Control spacing on all sides

• Radius: Set border radius

• BG Color: Default background color

• BG Copying Color: Background during copying state

• Border: Border style (solid / dashed / dotted)

• Copying Border: Border style during copying state

• Many More.

Icon Customization

• Change icons or use the default copy icon

• Adjust icon color and size independently

Copy Settings

• Exclude Frames: Comma-separated frame names to skip

• Exclude Header/Footer: Automatically remove <header> and <footer> content

• Add Page Link: Option to append the current page URL to the copied Markdown

Smart Features

• Converts HTML to clean Markdown (headings, lists, links, code blocks, tables)

• Acts as a built-in markdown converter for page content

• Detects canvas vs preview mode (disabled in canvas)

• Uses native clipboard API for reliable copy content behavior

Key Features

• Fully responsive across devices

• Native Framer component

• Complete visual customization

• Three button states (default, copying, copied)

• Advanced HTML to Markdown conversion

• Custom icon support

• Optional page link inclusion

• Loading state feedback

• LLM-ready Markdown output

• No coding required

• Clean, structured Markdown formatting

Works well as a copy to markdown tool, AI copy button, and reusable markdown copy button across documentation and blog pages.

Use Cases

Documentation Sites:

Let users copy entire docs pages to share with AI assistants for explanations, summaries, or code generation.

Blogs & Articles:

Enable readers to quickly share your content with ChatGPT for analysis, translation, or further research.

Product Pages:

Allow customers to copy product details and share with AI for comparisons, recommendations, or questions.

Educational Content:

Students can copy course materials to AI tools for study guides, flashcards, or practice questions.

Reports & Research:

Researchers can extract formatted content to feed into LLMs for analysis, summarization, or citation generation.

Knowledge Bases:

Help center articles become instantly shareable with support AI or chatbots for better assistance.

Portfolio Sites:

Designers and developers can let visitors copy project descriptions for AI-powered portfolio reviews.

News & Media:

Journalists and readers can share articles with AI for fact-checking, summaries, or related research.

Made with ❤️ by Soyeb

Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

If you have any questions, need a custom Framer component, want clarification, or run into any issues, you can always reach me out at heysoyebali@gmail.com. I'm here to help.