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.
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.
The Copy as Markdown component (a smart markdown converter and copy page Framer utility) provides control through several property groups:
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
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.
Change icons or use the default copy icon
Adjust icon color and size independently
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
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
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.
Let users copy entire docs pages to share with AI assistants for explanations, summaries, or code generation.
Enable readers to quickly share your content with ChatGPT for analysis, translation, or further research.
Allow customers to copy product details and share with AI for comparisons, recommendations, or questions.
Students can copy course materials to AI tools for study guides, flashcards, or practice questions.
Researchers can extract formatted content to feed into LLMs for analysis, summarization, or citation generation.
Help center articles become instantly shareable with support AI or chatbots for better assistance.
Designers and developers can let visitors copy project descriptions for AI-powered portfolio reviews.
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 creator.nitso@gmail.com. I’m here to help.
Soyeb
