Export Project as an HTML prototype

If you want to share your Framer prototypes more widely and make sure they don't expire, you can upload your project to Framer Web. If you’d rather keep your project offline, you can also run export your project as an HTML prototype.

When exporting in this way, Framer will create a folder containing your preview as a standalone website that you can access offline or host online.

Exporting as HTML Prototype

Follow these steps to export your project:

1. On the Framer canvas, select the Frame where you would like the preview to start.
2. In the menu, select File > Export as HTML (or press ⌘ + ⌥ + E).
3. Select a location to save the folder.

Framer will export your project and open the resulting folder. This folder contains a standalone prototype ready for sharing or to download to your mobile device.

To open up your Web Preview, open the index.html in any modern web browser.

Framer will export your project and open the resulting folder

Sharing a Web Preview

To share your Web Preview with others, the easiest approach is to upload your project to Framer Web and create and share a Prototype view.

However, if you’d like to share or host it yourself, you can either compress the folder to directly send it to others or you can upload the entire folder to a web server.

While the Web Preview can work on any host, such as a personal or company server, your easiest option is to use a recommended free service such as one of the below:

1. Vercel
2. Render
3. Firebase Hosting

Note: It is important that you make sure all files are hosted (thus including .cache, .modules and node_modules).

Hosting with Vercel

Ensure that you remove the aforementioned three files from the .gitignore file.

Hosting with Render

Render does not filter any of the files so no additional configuration is required.

Hosting with Firebase

When you host with Firebase, it will by default filter out the node_modules. Ensure that you remove the node_modules from the hosting configuration, so that the configuration doesn’t look as such:

{
“hosting”: {
“public”: “public”,
“ignore”: [
“firebase.json”,
“**/.*“,
“**/node_modules/**”
]
}
}But as the following:
{
“hosting”: {
“public”: “public”,
“ignore”: [
“firebase.json”,
“**/.*”
]
}
}