Back to all lessons
Lesson library

Code export

Export your Webflow project's HTML, CSS, Assets, and Javascript.

Note: We’re transitioning to Workspaces, and are in the process of updating our content. Visit the Workspaces blog post to read more about these updates and changes, or visit our updated lesson on code export. You can also learn how to check if your account is on Workspaces.
This video features an old UI. Updated version coming soon!

On paid account plans, you can export your project's HTML, CSS, assets, and JavaScript from inside the Webflow Designer. You can do this to backup your code and provide it to your client if they ask for it. You can use the exported code to host it anywhere you would like. No attribution required.

In this lesson
  1. Export your code
  2. Export minified HTML
  3. Learn what your exported files contain
  4. Common questions

Export your code

  1. Open your project in the Designer
  2. Click the Export button in the top right corner
  3. Click Prepare ZIP 
  4. Download the ZIP file

Export minified HTML

Minifying your HTML can help improve page load times by removing white space, comments, and other code elements browser's 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
The "export" button is highlighted at the top of the Webflow Designer.
"Minify HTML" is checked and highlighted in the Export code modal in the Webflow Designer.

Learn 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 project styles included in 3 .css files:
  • a CSS file 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.
  1. 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.
  2. An images folder with all the images uploaded in your project's asset manager
  3. .html files for all of your site's pages (including Collection template pages without content)
If you'd like to see a sample of the code Webflow exports, check out the source code (right-click → view page source) of our homepage — it's all built in Webflow!

Common questions

Why can't I open the exported file?

Due to a known limitation with Safari's URL support, you'll need to add the ".zip" filename extension to extract the exported folder's contents.

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

To avoid conflicts with other code frameworks, Webflow adds "w-" to the front of any component-specific classes.

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

At the moment, you cannot choose what gets exported. Every exportable part of your project will be included in each and every export.

Can I edit the code after I export it?

You can edit the code after it's exported. However, manual changes to exported files may break some Webflow components.

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

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

Do I need to provide attribution to webflow if I host 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 exported. Collection lists will show the empty state. Collection pages will also not show any content that's bound to Collection fields as well.

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

No. Any password protected pages in 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. Read more about project and page passwords.

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

Site search and forms (including file upload and reCAPTCHA) do not work on exported sites. If you intend to export your site, you'll need to either send form data away from Webflow or embed 3rd party widgets. Ecommerce elements won't function either.

Try Webflow — it's free