If you need to, you can export your project's HTML, CSS, assets, and JavaScript from inside the Webflow Designer. 

You'll need a Lite, Pro, or Team plan to export your code. 

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. Take full advantage of the platform by hosting with Webflow

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. However, exports do not include any CMS content.

How to 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
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.

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

What your exported files contain

The downloaded ZIP file contains:

  • .html files for all of your site's pages (including dynamic template pages)
  • A .css file with all of your site's styles
  • A folder with all of your site's images
  • webflow.css and webflow.js files for component-specific code
  • normalize.css and modernizr.js for browser stability

Webflow.css contains common base styles for the Webflow grid/layout system, as well as all the components like navbars, sliders, and tabs.

Webflow.js 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.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Modernizr.js determines whether the current browser has specific features natively implemented or not.

Download example exported code

Download, test, and use a sample of Webflow's exported code before you upgrade your account.