%2520(1).jpeg)
Introduction
Webflow is a powerful tool for creating websites, but there comes a time when you might need to export your site's code. Whether it's for backup purposes, to hand over to a client, or to host it elsewhere, exporting your Webflow site's code is an important feature.
It's worth noting that using this feature requires a paid subscription plan.
In this article, we will explain how to export your Webflow site's code and why this might be necessary.
Why Export Your Webflow Site's Code?
First of all, it's important to understand that Webflow is not just a "no-code" tool. I personally see the tool more as a visual interface to help you write HTML, CSS, or JavaScript code more quickly.
With that said, there are several reasons why you might want to export your Webflow site's code:
1. Backup: Exporting your site's code allows you to keep a backup copy of your work. In case something goes wrong with Webflow or if you lose access to your account, you'll always have a copy of your site. This code can be used in a new Webflow project or operated independently from the tool.
2. External Hosting: While Webflow offers hosting options that centralize management, you might prefer to use your own host. Exporting your site's code allows you to host it wherever you choose, without any attribution required.
3. Client Transfer: If you create websites for clients, they may request a copy of the code. Exporting the code enables them to have a copy of their site and host it themselves if necessary, or simply "have it in their possession" as part of their development.
How to Export Your Webflow Site's Code?
Exporting your Webflow site's code is a straightforward process that involves just a few steps:
- Open your Webflow project.
- Go to the Designer.
- Click the "Export Code" button.
- Then click on "Prepare Zip."
- Wait for the preparation to complete.
- Download the ZIP file.
Your code is now exported! ✅
What Does the Export of Your Webflow Site's Code Include?
The export of your Webflow site includes:
- A CSS folder containing all the styles of your site in 3 .css files.
- A JS folder containing the Webflow.js file. This file contains all the JavaScript needed for the interactive elements of your pages to function properly.
- An images folder with all the images uploaded in the asset manager—library—of your site.
- .html files for all the pages of your site (including collection template pages, but without content).
What Does the Export Not Include?
It's important to note that some features specific to using Webflow's CMS are not included in the code export. This includes:
- CMS content
- Ecommerce content
- Form submissions
- Site search
- Logic flows
However, CMS and Ecommerce collections can be exported separately in CSV format if you wish to back up your collection items, user accounts, and products.
Conclusion
In conclusion, exporting your Webflow site's code is a process that is both simple and useful. It meets various needs, whether for backing up your work, transferring it to a client, or hosting it on another platform. It is an essential feature that offers you great flexibility.
However, it's important to recognize that certain Webflow features are not included in the export, so be sure to understand what is and isn’t included before proceeding.
