If you have a Webflow premium account (Lite, Pro, or Team plan), you can export your project's HTML, CSS, assets, and JavaScript from inside the Webflow Designer.

In this lesson
  1. Exporting your code
  2. What your exported files contain

Exporting 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
 
Must know
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.

Exporting 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
  2. Press Control + O on your keyboard
  3. Check the Minify HTML checkbox that appears in the export window
 

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 this file is removed, your page might look correct, but it won't work as expected.
  1. An images folder with all the images uploaded in your project's asset manager
  2. .html files for all of your site's pages (including Collection template pages without content)
Good to know
To avoid conflicts with other code frameworks, Webflow adds "w-" to the front of any component-specific classes.
You can edit the code after it's exported. However, manual changes to exported files may break some Webflow components.
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.
If you want to remove the .html extensions from your exported pages, you can do so with a .htaccess file.
Must know
At the moment, you cannot choose what gets exported. Every exportable part of your project will be included in each and every export.
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.
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.