Copy elements with the HTML to Framer Chrome Extension
When you paste a section with multiple items, empty divs will be discarded leaving an ultra clean layer hierarchy, making it easy to further edit the page, add breakpoints, and publish your website.
What does this extension do?
The extension allows to easily copy paste web elements from your own websites, regardless of whether they were created with HTML & CSS or any other website builder. The goal is to help move personal or company sites to Framer easily.
How do I install it and run it?
You can install is from the Chrome Web Store, from this page. After installing it on Chrome, it will briefly show on the right side of the address bar. We recommend going in the extension menu and pinning it to have it always visible. If you’re using the Arc browser, you can find the menu by hovering on the top right corner of the window.
Which sites can I use it on?
You can use it on any site, but before you publish something, please make sure you have the right permissions. If you don’t have any, you can try the extension on this demo site.
What is the ideal workflow?
Install the extension, go to your site and hover on an item to copy.
Hold
Shift
to copy multiple elements, for even greater speed.To select a parent element of an item, hit
Esc
while hovering it.In Framer, use
⌘
V
to paste on Mac, orCtrl
V
on Windows.
What are the limitations?
The extension can only import static elements. It won’t import animations, effects, responsive breakpoints or any complex canvas elements like 3D items or other interactive elements.
How much does it cost?
The extension is completely free to use.
What browsers does it support?
At the moment, the extension supports Chrome, Arc and Edge.
Can I import entire websites?
Yes, you can. We recommend to import them little by little for best results, like one section at a time.
Can I copy other people sites?
First off, it’s good to remember that the nature of the web is such that, technically, almost anything can be copied or “stolen” if someone is determined enough. Technical barriers can often be bypassed (think right-click disabling to prevent image copying). However, real-world protection comes more from copyright law and the potential for reputational damage.
Having that said, our HTML import extension comes with limitations. For instance, it can only import a few elements at a time, and it’s focused on styles and layout, not advanced behaviours like animations and effects. So, the utility for stealing a website in a meaningful way is pretty limited.
If you’re still concerned, we've got you covered. You can opt out your site from working with the extension by going to Settings → General Settings and, in the first group, enable the checkbox next to Opt out of the HTML to Framer Chrome Extension. By saving and re-publishing your template, you’ll make sure the extension won't work on it.
What about Framer templates?
If you’re a template creator, rest assured that the extension can’t copy effects, layout, color tokens, breakpoints, responsive design, components, overrides or any CMS collection. If you’re still worried about your work being copy-pasted, head to Settings → General and opt out the ability to copy paste your site.
Can I protect my site from copy pasting?
Yes, you can opt out your site from working with the extension by going to Settings → General Settings and, in the first group, enable the checkbox next to Opt out of the HTML to Framer Chrome Extension. By saving and re-publishing your template, you’ll make sure the extension won't work on it.