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.
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.