Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Support
  • Using Framer
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing
  • Support
  • Using Framer

Related Articles

  • User testing
  • Creating and using Private Links
  • Password Protected Prototypes
  • Handoff
  • Exporting Assets

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.

Helpful?Was this article helpful?

0

0

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement