Export to HTML
Export to HTML is a beta feature, which means we’re still working on improving it. The beta is open to all teams on the Pro and Enterprise plans. Note that the final availability of this feature might be different.
Join us in testing! Read the documentation, export your designs, and let us know how it went and what you think on our Discord. We can’t wait for your feedback!
Export to HTML allows you to download an HTML file to view your prototype outside of Framer. This allows you to open it directly in your browser, send it to a colleague, or put it on a web server.
The exported HTML is a snapshot of the project at the time of the export and will be unaffected by any updates you make in the project, or by any updates to Framer itself. You can always re-export with the latest version of your project.
Exported designs are always responsive. See Creating responsive designs to learn how to create and test responsive prototypes.
The exported HTML loads assets (including JavaScript with components and screens) from Framer servers, which means that viewing the exported prototype requires an Internet connection. We utilize a fast CDN and aggressive caching to make sure the prototype loads quickly. The assets are served from secure, random URLs. Exported prototypes are React apps rendered entirely by the browser, which means they're not accessible to search engines or other crawlers. We will continue improving this in future releases.
Preparing your project for export
If your project doesn’t use Legacy Code or Packages…You’re good to go! You can read the next section,“Exporting to HTML.”
If your project uses components with Google Fonts or Custom Fonts, and the fonts don’t appear correctly in the exported project…You’ll need to make any update to the component with the font that doesn’t work as it needs to be regenerated. If the component is nested inside another component, you’ll also need to make any update to the parent component(s), all the way to the outer-most component. This issue only affects components that haven’t been updated since June 30th, 2021.
If your project uses packages…Packages are not supported in exported prototypes, so you’ll need to replace them with components. Check out the Default Components, which includes, e.g., Lottie and YouTube, and UI Design Kits, which includes, e.g., Material UI Kit and iOS Kit.
If you have your own package that you need to make usable in an exported project, you can convert it into a Code Module. You might need to tweak your code a little—see Migrating from Legacy Code.
If your project uses legacy code components or overrides…Projects created before the release of Framer for Developers on July 8th, 2021 are using Legacy Code, which is not supported in exported prototypes. You know your project uses legacy code if you see a LEGACY badge while in the code editor.
To convert your project to the new code system, you’ll need to create a new project, and re-create and copy your code files over. You might need to tweak your code a little—see Migrating from Legacy Code.
Exporting to HTML
In order to export your project as HTML, right-click the Frame you want to start from and select “Export to HTML”. This export will give you a local HTML file.
If your project uses code that manipulates canvas elements—e.g., via Code Overrides, or Code Components with ComponentInstance property controls, you might want to know of certain differences between how canvas elements are rendered in the built-in preview (which is optimized for prototyping) and when exported (optimized for being production-ready). You can read about them in Code: Differences between Preview and Export.