{{text}}
Share
How and why to export your Webflow site code: A complete guide in 2025
Webflow site code export : whether you want to make a backup, transfer the code to a client or host it elsewhere, find out how to export the code from your Webflow site in 2024!
This article was written by the experts at our Synqro webflow agency.
Why export the code from your Webflow site?
Webflow is a powerful tool for creating websites, but it may be necessary to export your site code for several reasons:
- Safeguard : Exporting the code allows you to keep a backup copy of your work. In case of a problem with Webflow or loss of access to your account, you will always have a copy that can be used for a new project or independently of the tool.
- External accommodation : Although Webflow offers hosting options, you may prefer to use your own hosting provider. Exporting the code allows it to be hosted wherever you want, with no attribution required.
- Transfer to a customer : If you create websites for customers, they may ask for a copy of the code. Exporting allows them to host their site themselves or simply to own the development.
In addition to these practical reasons, it's important to know that exporting code also provides greater flexibility for customizing and editing your site's source code, which can be especially useful for developers.
How to export the code from your Webflow site?
Exporting the code from your Webflow site is simple and takes a few steps:
- Open your Webflow project.
- Go to the Designer.
- Click on the “Export Code” button.
- Then click on “Prepare Zip.”
- Wait until the preparation is complete.
- Download the zip file.
Webflow Export Code Example
Your code is now exported!
What does exporting the code from your Webflow site contain?
Exporting your Webflow site includes:
- A CSS folder with all the styles of your site (3 .css files).
- A JS folder with the Webflow.js file, containing all the required JavaScript.
- An image folder with all images uploaded to the asset manager.
- .html files for all pages on your site (including collection template pages, without content).
What does exporting not include?
Some features specific to Webflow are not included in the code export:
- The content of the CMS.
- Ecommerce content.
- Submission of forms.
- The search on the site.
- Flow logic.
CMS and Ecommerce collections can be exported separately in CSV format to save your collection items, user accounts, and products.
Advanced tips for optimizing exported code
Once the code has been exported, it is important to take additional steps to optimize your site before hosting it on another server. Here are some best practices:
1. Minification of CSS and JS files
The CSS and JS files generated by Webflow are already optimized, but you can further minify them to reduce their size and improve the performance of your site.
- Use a tool like UglifyJS or CSSnano to minify JavaScript and CSS files.
- Combine CSS files into a single file to reduce the number of HTTP requests.
2. Optimizing images
Although Webflow compresses images when they are imported, it is useful to check the exported images and optimize them further using tools like TinyPNG or ImageOptim.
3. Caching
Set cache headers in the file .htaccess or in your server settings to improve page load times. Here is an example:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
</IfModule>
4. SEO and meta tags
Make sure your tags Title, Meta description and Open Graph are set up correctly in each HTML file. You can also add a file robots.txt And a file sitemap.xml to improve the referencing of your site.
5. Form integration
Since form submissions don't work on an exported site, you'll need to integrate third-party forms like Formspree, Google Forms, or Netlify Forms.
Example of integration with Formspree:
<form action="https://formspree.io/f/{your_form_id}" method="POST">
<input type="email" name="email" placeholder="Votre email" required>
<button type="submit">Send</button>
</form>
6. Setting up HTTPS
If you host your site on an external server, be sure to activate an SSL/TLS certificate for your site to use HTTPS, which is crucial for security and SEO.
Webflow code export FAQ
Why should I export the code from my Webflow site?
Exporting your Webflow site code can be crucial for several reasons. First, it allows you to keep a backup copy of your work. In case of a problem with Webflow or loss of access to your account, you will always have a copy of your site. Second, if you prefer to use a host other than the one offered by Webflow, exporting the code allows you to host your site wherever you want. Finally, if you work for customers, they may require a copy of their site code to own and manage it themselves.
What does exporting the code from my Webflow site contain?
When you export your Webflow site code, the downloaded ZIP file contains several essential elements. You will find a CSS folder with all the styles of your site, a JS folder containing the Webflow.js file for JavaScript interactions, an image folder with all the images used, and.html files for each page of your site. However, some features specific to Webflow, such as CMS content, e-commerce, form submission, and site search, are not included in this export.
Is exporting Webflow code free?
No, exporting code from your Webflow site requires a paid pricing plan. Webflow offers various plans, and to access the code export feature, you need to subscribe to one of these plans. This usually includes professional and higher plans. Check the pricing options on the Webflow site to choose the plan that best fits your needs and to unlock the code export option.
How can I export CMS data from my Webflow site?
To export CMS data from your Webflow website, you need to follow a process separate from exporting the code. Webflow allows you to export CMS collections in CSV format. This includes collection items, user accounts, and products. Go to the CMS section of your Webflow project, select the collections you want to export, then choose the option to export to CSV. This feature is particularly useful for backing up or migrating content from your CMS.
What are the advantages of hosting my Webflow site on another server?
Hosting your Webflow site on another server can offer several advantages. You can have total control over your hosting environment, choose servers that are optimized for specific performances, and integrate technologies or services that are not supported by Webflow. Plus, it can be more economical in the long run, especially if you have multiple sites to host. Exporting Code gives you the flexibility to use third-party hosting services according to your specific needs.
How do I optimize my exported website for search engines?
Once you have exported your website code from Webflow, it is important to optimize it for search engines. Ensure that your HTML tags, such as title tags and meta descriptions, are set up correctly. Use tools like Google Analytics and Google Search Console to track the performance of your site. Also, make sure that your site is responsive, that is, that it is displayed correctly on all types of devices. By optimizing usability and using appropriate web beacons, you improve the visibility of your site on search engines.
How do I protect personal data on my exported site?
The protection of personal data is crucial when you export and host your website elsewhere. Make sure you comply with CNIL regulations and the RGPD on the internet browser by informing users about the collection and use of their data. Set up clear privacy policies and use cookies transparently. Ensure that the information relating to the data collected is secure and accessible only to trusted service providers and partners. Finally, integrate forms and newsletter management systems that comply with data protection regulations.
Conclusion: Webflow Site Export Code
TEAExporting code Of a site Webflow Is at the same time Unsophisticated And Strategic.
Whether for Save your work, Deliver a project to a customer, gold Host your site elsewhere, this feature gives you a Great freedom.
But Be Careful: Some Native Webflow features Aren't Not included in export.
In particular, these concerns:
- Tea Dynamic CMS (databases),
- The Advanced Interactions (complex animations),
- And the functions e-commerce.
Before Proceeding, Take the Time to Fully Understand What is exported... and What is not.
This will avoid surprises, and allow you to prepare a Smooth Transition To another platform if necessary.
In summary: exporting is a Powerful Asset, provided you have a clear vision of Technical limitations.
Synqro's latest achievement
