Data extraction

When using paid Workspace plans, you have the option to extract your website’s HTML, CSS, JavaScript, and resources directly from the Webflow Designer. This can be useful for creating backups of your code or providing it to clients upon request. You can also utilize the extracted code for hosting on any desired platform without the need for attribution. 

The following areas will be covered in this tutorial:

1. Method to extract your code
2. Procedure for extracting minified HTML
3. Contents of the extracted files
4. Exclusions from the extracted files
5. Frequently asked questions and tips for troubleshooting

Method to extract your code

1. Launch the Designer for your site
2. Select the Export option 
3. Click on Prepare ZIP 
4. Proceed to download the ZIP file

Note: Content from CMS, User Accounts, and Ecommerce (databases) as well as Logic flows are not included in the extracted code. Collection lists will display an empty state, and Collection pages will lack content attached to Collection fields. Password protection for pages will be nullified post code extraction. Moreover, site search functionality and forms (including file uploads and reCAPTCHA) will cease to operate on exported sites to adhere to GDPR regulations. Refer to additional guidelines for form submissions on exported sites.

Method to extract minified HTML

Optimizing your HTML by minification can enhance page loading speeds by eliminating unnecessary white spaces, comments, and other non-essential code elements that browsers do not require for rendering. To extract minified HTML:

1. Click on the Export button located at the top of the Designer
2. Press Control + O on your keyboard
3. Check the box for Minify HTML that appears in the export window
4. Click Prepare ZIP 
5. Save the ZIP file

Contents of the extracted files

The downloaded ZIP file will consist of all pages, styles, scripts, and images from your site:

1. A CSS directory with all styles from your site included in 3 .css files:

• A CSS file (e.g., your-site-name.css) containing all custom styles
• webflow.css which includes fundamental base styles for the Webflow layout system and various components like navbars, sliders, and tabs
• normalize.css that ensures browsers render elements consistently and in compliance with modern standards. It focuses specifically on styles requiring normalization.

2. A JS directory housing the Webflow.js file. This file contains essential JavaScript to enable interactive elements on your pages. Elements such as forms, navbars, sliders, tabs, and interactions depend on webflow.js. Deleting this file may cause your page toappearcorrectly but function improperly.
3. An images directory containing images uploaded in your site’s asset manager
4. .html files for all site pages (including Collection template pages without content)

Note: Content from CMS, User Accounts, and Ecommerce (databases) as well as Logic flows are not included in the extracted code. Collection lists will display an empty state, and Collection pages will lack content attached to Collection fields. Password protection for pages will be nullified post code extraction. Moreover, site search functionality and forms (including file uploads and reCAPTCHA) will cease to operate on exported sites to adhere to GDPR regulations. Refer to additional guidelines for form submissions on exported sites.

Insightful: For a glimpse of the code exported by Webflow, check the source code of our homepage by right-clicking and selecting View page source. Everything is crafted using Webflow!

Exclusions from the extracted files

The subsequent features and content are excluded from the extracted code and will not function as expected on exported websites: 

• CMS content and functionalities (including Collection items and lists)
• User Accounts content and functionalities (including users and access groups)
• Ecommerce content and functionalities (including products and checkout)
• Site or page password protection
• Form submission processing 
• Existing form submissions (can be exported separately)
• reCAPTCHA elements present in forms
• Site search
• Logic flows

Please note: CMS, User Accounts, and Ecommerce Collections can be exported separately in CSV format should you wish to retain backups of your Collection items, user accounts, and products. Find out more about CSV export.

FAQ and troubleshooting tips

What is the rationale behind the “w-” prefix in class names?

To avoid conflicts with other code frameworks, Webflow adds a “w-” prefix to component-specific classes. 

Can I selectively export sections of my site’s code?

Currently, there is no option to choose specific parts for export. Every exportable aspect of your site will be included in each extraction. 

Is it feasible to modify the code post-export?

After an export, you have the liberty to make alterations to the code. Nevertheless, manual adjustments to exported files may disrupt certain Webflow components. 

Can I eliminate the .html extensions from my exported pages’ URLs?

To remove the .html extensions from your exported pages, you can utilize an .htaccess file. 

Is it mandatory to credit Webflow if I host my site externally?

Post-export, no attributions or requirement for a Webflow plan is necessary for your exported site to function on an external server. 

Does the extracted code encompass my CMS, Memberships, and Ecommerce content?

CMS, User Accounts, and Ecommerce content (databases) are not a part of the extracted code. Collection lists will display the empty state, and Collection pages will lack content bound to Collection fields. 

Will password protected pages remain secure after code extraction?

No. Password protected pages on your site will lose their protection post code export. For password protection to function correctly, your site must be hosted on Webflow. Refer to details regarding project and page passwords. 

Will all site elements work if I host the code elsewhere?

CMS, User Accounts, Ecommerce content (databases) and functionalities, along with Logic flows, are not included in the extracted code. These features necessitate hosting for proper functionality. On exported sites, Collection lists will display an empty state, and Collection pages will lack content bound to Collection fields. Any password-protected pages on the site will lose their protection post code extraction. 

Furthermore, site search functionalities and forms (including file uploads and reCAPTCHA) will be non-functional on exported sites to adhere to GDPR. To collect form submissions, consider using a third-party tool or embedding a third-party form integration. Refer to guidelines for collecting form submissions on exported sites.

Why do my Lottie animations fail to function locally once I export my site?

For security protocols, Lottie JSON files do not load from local file systems; consequently, Lottie animations won’t display when the site is accessed locally. A web server is essential for the animations to function as intended.