Code export

Learn how to export your Webflow project's HTML, CSS, Assets, and Javascript.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
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

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

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 all elements function on my site if I host the code elewhere?

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.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form