Code export

Note: We’re transitioning to Workspaces, and this lesson has been updated to reflect that change. Visit the Workspaces blog post to read more about these updates and changes. 

If your account hasn’t yet switched over to Workspaces, please visit our legacy lesson on code export. You can also learn how to check if your account is on Workspaces.

On paid Workspace plans, you can export your site’s HTML, CSS, JavaScript, and assets from inside the Webflow Designer. You can do this to back up your code and provide it to your client if they request it. You can also use the exported code to host it anywhere you’d like – no attribution required. 

In this lesson, you’ll learn:

1. How to export your code
2. How to export minified HTML
3. What your exported files contain
4. FAQ and troubleshooting tips

How to export your code

1. Open your site in the Designer
2. Click the Export button 
3. Click Prepare ZIP 
4. Download the ZIP file

Important: CMS and Ecommerce content (databases) and Logic flows aren’t included in exported code. On exported sites, Collection lists will show the empty state, and Collection pages won’t show any content that’s bound to Collection fields. Any password protected pages on your site will no longer be protected after code export. Additionally, site search and forms (including file upload and reCAPTCHA) will not work on exported sites in order to comply with GDPR. Learn more about collecting form submissions on exported sites.

How to export minified HTML

Minifying your HTML can help improve page load times by removing white space, comments, and other code elements browsers don’t need to load the page. To export minified HTML:

1. Click the Export button at the top of the Designer
2. Press Control + O on your keyboard
3. Check the Minify HTML checkbox that appears in the export window
4. Click Prepare ZIP 
5. Download the ZIP file

What your exported files contain

The downloaded ZIP file contains all your site’s pages, styles, scripts, and images:

1. A CSS folder with all your site’s styles included in 3 .css files:

• a CSS file (e.g., your-site-name.css) that contains all of your site’s custom styles
• webflow.css which contains common base styles for the Webflow layout system, as well as all the components like navbars, sliders, and tabs
• normalize.css which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

2. A JS folder which contains the Webflow.js file. This file contains all the JavaScript necessary to make the interactive elements of your pages work properly. Things like forms, navbars, sliders, tabs, and interactions rely on webflow.js. If you delete this file, your page might look correct, but it won’t work as expected.
3. An images folder with all the images uploaded in your site’s asset manager
4. .html files for all of your site’s pages (including Collection template pages without content)

Important: CMS and Ecommerce content (databases) and Logic flows aren’t included in exported code. On exported sites, Collection lists will show the empty state, and Collection pages won’t show any content that’s bound to Collection fields. Any password protected pages on your site will no longer be protected after code export. Additionally, site search and forms (including file upload and reCAPTCHA) will not work on exported sites in order to comply with GDPR. Learn more about collecting form submissions on exported sites.

Good to know: If you’d like to see a sample of the code Webflow exports, check out the source code of our homepage by right-clicking and selecting View page source. It’s all built in Webflow!

FAQ and troubleshooting tips

Why is there a “w-” prefix in front of class names?

Webflow prefixes component-specific classes with “w-” to avoid conflicts with other code frameworks. 

Can I choose to export only a part of my site’s code? 

At the moment, you can’t choose what gets exported. Every exportable part of your site will be included in each and every export. 

Can I edit the code after I export it? 

You can edit the code after exporting. Keep in mind, however, that manual changes to exported files may break some Webflow components. 

Can I remove the .html extensions from the URL of my exported pages? 

If you want to remove the .html extensions from your exported pages, you can do so with an .htaccess file. 

Do I need to provide attribution to Webflow if I host my site externally? 

After exporting, you don’t need to provide attribution to Webflow or maintain a Webflow plan for your exported site to work on your own server. 

Does the exported code include my CMS and Ecommerce content?

CMS and Ecommerce content (databases) aren’t included in exported code. Collection lists will show the empty state, and Collection pages won’t show any content that’s bound to Collection fields. 

Will password protected pages still be protected after I export my code? 

No. Any password protected pages on your site won’t be protected after code export. Your site must be hosted with Webflow in order for password protection to work as expected. Learn more about project and page passwords. 

Will all elements function on my site if I host the code elsewhere? 

CMS and Ecommerce content (databases), as well as Logic flows, aren’t included in exported code. These features require hosting to function as expected. On exported sites, Collection lists will show the empty state, and Collection pages won’t show any content that’s bound to Collection fields. Any password protected pages on your site will no longer be protected after code export. 

Additionally, site search and forms (including file upload and reCAPTCHA) will not work on exported sites in order to comply with GDPR. To collect form submissions, you’ll need to use a third-party tool or embed a third-party form integration. Learn more about collecting form submissions on exported sites.