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

About this feature
  • You'll need a Lite, Pro, or Team plan to export your code.
  • 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.
In this lesson
  • Exporting your code
  • 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:

  • .html files for all of your site's pages (including dynamic template pages without content)
  • A .css file with all of your site's styles
  • A folder with all of your site's images
  • Webflow.css which contains common base styles for the Webflow grid/layout system, as well as all the components like navbars, sliders, and tabs.
  • Webflow.js which 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 which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
  • Modernizr.js which determines whether the current browser has specific features natively implemented or not.
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.
Must know
  • Everything is included in each and every export. At the moment, you cannot choose what gets exported.
  • CMS content (the database) isn't exported.
  • Site search and forms 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 a 3rd party form or search element.

Download an sample exported code

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