{"article":{"id":33961386739347,"url":"https://webflow.zendesk.com/api/v2/help_center/en-us/articles/33961386739347.json","html_url":"https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code","author_id":1513309934161,"comments_disabled":true,"draft":false,"promoted":false,"position":1,"vote_sum":0,"vote_count":0,"section_id":34207185150099,"created_at":"2024-10-01T14:09:36Z","updated_at":"2025-10-31T14:05:07Z","name":"How do I export my Webflow site code?","title":"How do I export my Webflow site code?","source_locale":"en-us","locale":"en-us","outdated":false,"outdated_locales":[],"edited_at":"2025-10-31T14:05:07Z","user_segment_id":null,"permission_group_id":1500000334941,"content_tag_ids":[],"label_names":[],"body":"<h2 class=\"wf-doc-subtitle\" id=\"01J9KA73V44XDPQS0V0KSVGHN7\">Export your Webflow site’s HTML, CSS, JavaScript, and assets.</h2><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\" data-pm-slice=\"1 1 []\">On <a href=\"https://webflow.com/pricing#workspaces\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"link\">paid Workspace plans</a>, you can export your site’s HTML, CSS, JavaScript, and assets to back up your code, provide it to your client, or host it anywhere you like — no attribution required.</p><div class=\"wf-callout-note\">\n  <div class=\"wf-callout-text\">\n    <p>Note</p>\n    <p>\n      Code export is only available on Workspace plans — that is, Site plans do not include the ability to export your site’s code. \n    </p>\n  </div>\n</div><h2 id=\"01JDAH4DZQCZRSP2NQS7BFJZWJ\" data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"heading\" data-prosemirror-node-block=\"true\">How to export your code</h2><ol class=\"ak-ol\" data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"orderedList\" data-prosemirror-node-block=\"true\">\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Open your site in Webflow</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Go to <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Main menu</strong> &gt; <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Code export</strong><span data-background-custom-color=\"#d3f1a7\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"backgroundColor\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\"> </strong>(click the “<strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">W</strong>” logo in the upper-left corner to open the Main menu)</span>, or press <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Shift</strong> + <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">E</strong>\n</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Click <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Prepare ZIP</strong>\n</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Download the ZIP file</li>\n</ol><div class=\"wf-callout-important\"><div class=\"wf-callout-text\">\n<p>Important</p>\n<p>CMS, <a href=\"https://help.webflow.com/hc/en-us/articles/33961356432147\">User Accounts</a>, Ecommerce content (databases), code components and functionality, and localized pages, elements, and content aren’t included in exported code. On exported sites, Collection lists will show the empty state, and Collection pages won’t show any content that’s bound to Collection fields. Any <a href=\"https://help.webflow.com/hc/en-us/articles/33961298873235\">password protected pages</a> on your site will no longer be protected after code export. Additionally, site search and forms (including file upload and reCAPTCHA) will not work on exported sites in order to comply with GDPR. <a href=\"https://help.webflow.com/hc/en-us/articles/33961341546899\">Learn more about collecting form submissions on exported sites</a>.</p>\n</div></div><h2 id=\"01JDAH4DZWEC6S3CNH0MX52SW2\" data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"heading\" data-prosemirror-node-block=\"true\">How to export minified HTML</h2><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">Minifying your HTML can help improve page load times by removing white space, comments, and other code elements browsers don’t need to load the page. To export minified HTML:</p><ol>\n<li>Open your site in Webflow</li>\n<li>Go to <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Main menu</strong> &gt; <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Code export</strong><span data-background-custom-color=\"#d3f1a7\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"backgroundColor\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\"> </strong>(click the “<strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">W</strong>” logo in the upper-left corner to open the Main menu)</span>, or press <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Shift</strong> + <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">E</strong>\n</li>\n<li>Press <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Command</strong> + <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">O</strong> (on Mac) or <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Control</strong> + <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">O</strong> (on Windows)</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Check the <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Minify HTML</strong> checkbox that appears in the export window</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Click <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Prepare ZIP</strong>\n</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Download the ZIP file</li>\n</ol><h2 id=\"01JDAH4E00301274QVVG7KAE97\" data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"heading\" data-prosemirror-node-block=\"true\">What your exported files include</h2><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">The downloaded ZIP file contains all your site’s pages, styles, scripts, and images:</p><ul class=\"ak-ul\" data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"bulletList\" data-prosemirror-node-block=\"true\">\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">\n<strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">A CSS folder</strong> with all your site’s styles included in 3 <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">.css</strong> files:<ul class=\"ak-ul\" data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"bulletList\" data-prosemirror-node-block=\"true\">\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">\n<strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">a CSS file</strong> (e.g., <code><span class=\"code\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"code\">your-site-name.css</span></code>) that contains all of your site’s custom styles</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">\n<code><span class=\"code\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"code\">webflow.css</span></code> which contains common base styles for the Webflow layout system, as well as all the components like navbars, sliders, and tabs</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">\n<code><span class=\"code\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"code\">normalize.css</span></code> which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.</li>\n</ul>\n</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">\n<strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">A JS folder</strong> which contains all the JavaScript files for your site. Elements and features like forms, navbars, sliders, tabs, and interactions rely on these files. <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">If you delete these files, your page might</strong> <em data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"em\"><em><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">look</strong></em></em> <strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">correct, but it won’t work as expected.</strong>\n</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">\n<strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">An images folder</strong> with all the images uploaded in your site’s Assets panel</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">\n<code><span class=\"code\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"code\"><strong>.html</strong></span></code><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\"> files</strong> for all of your site’s pages (including empty Collection template pages)</li>\n</ul><div class=\"wf-callout-important\">\n  <div class=\"wf-callout-text\">\n    <p>Important</p>\n    <p>\n      CMS,\n      <a href=\"https://help.webflow.com/hc/en-us/articles/33961356432147\">User Accounts</a>,\n      Ecommerce content (databases) and functionality, and localized pages, elements, and content aren’t included in exported\n      code. On exported sites, Collection lists will show the empty state,\n      and Collection pages won’t show any content that’s bound to Collection\n      fields. Any\n      <a href=\"https://help.webflow.com/hc/en-us/articles/33961298873235\">password protected pages</a>\n      on your site will no longer be protected after code export. Additionally,\n      site search and forms (including file upload and reCAPTCHA) will not\n      work on exported sites in order to comply with GDPR.\n      <a href=\"https://help.webflow.com/hc/en-us/articles/33961341546899\">Learn more about collecting form submissions on exported sites</a>.\n    </p>\n  </div>\n</div><div class=\"wf-callout-note\">\n  <div class=\"wf-callout-text\">\n    <p>Good to know</p>\n    <p>\n      If you’d like to see a sample of the code Webflow exports, check out the source code of <a href=\"https://www.webflow.com\">our homepage</a> by right-clicking and choosing <b>View page source</b>. It’s all built in Webflow!\n    </p>\n  </div>\n</div><h2 id=\"01JDAH4E08AV6BZ8122JJBCT8K\" data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"heading\" data-prosemirror-node-block=\"true\">What your exported files don’t include</h2><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">The following features and content are not included in exported code and will not function as expected on exported websites: </p><ul class=\"ak-ul\" data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"bulletList\" data-prosemirror-node-block=\"true\">\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">CMS content and functionality (including Collection items and Collection lists)</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">User Accounts content and functionality (including users and access groups)</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Ecommerce content and functionality (including products and checkout)</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Site and/or page password protection</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Form submission processing</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Pre-existing form submissions (can be exported separately)</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">reCAPTCHA elements within forms</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Site search</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Localized content (i.e., only your site’s primary locale’s pages, elements, and content are included)</li>\n<li data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"listItem\" data-prosemirror-node-block=\"true\">Code components</li>\n</ul><div class=\"wf-callout-note\">\n  <div class=\"wf-callout-text\">\n    <p>Note</p>\n    <p>\n      You can <a href=\"https://help.webflow.com/hc/en-us/articles/33961290794771-Import-export-Collection-content\">export CMS Collections</a> (including localized Collection content), Ecommerce Collections, and <a href=\"https://help.webflow.com/hc/en-us/articles/33961356432147\">User Accounts</a> in CSV format to save a backup of your Collection items (including localized Collection items), user accounts, and products. \n    </p>\n  </div>\n</div><h2 id=\"01JDAH4E0DPJFVVYYM18C0ETYN\" data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"heading\" data-prosemirror-node-block=\"true\">FAQ and troubleshooting tips</h2><h3 id=\"01JDAH4E0DFKS27EEW0BYY4X4K\" data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"heading\" data-prosemirror-node-block=\"true\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Why is there a “w-” prefix in front of class names?</strong></h3><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">Webflow prefixes component-specific classes with “w-” to avoid conflicts with other code frameworks. </p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Can I choose to export only a part of my site’s code? </strong></p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">At the moment, you can’t choose what gets exported. Every exportable part of your site will be included in each and every export. </p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Can I edit the code after I export it? </strong></p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">You can edit the code after exporting. Keep in mind, however, that manual changes to exported files may break some Webflow components. </p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Can I remove the </strong><code><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">.html</strong></code><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\"> extensions from the URL of my exported pages? </strong></p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">If you want to remove the <code>.html</code> extensions from your exported pages, you can do so with an <a href=\"https://alexcican.com/post/how-to-remove-php-html-htm-extensions-with-htaccess/\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"link\"><code>.htaccess</code> file</a>. </p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Do I need to provide attribution to Webflow if I host my site externally? </strong></p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">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. </p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Does the exported code include my CMS, Memberships, and Ecommerce content?</strong></p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">CMS, <a href=\"https://help.webflow.com/hc/en-us/articles/33961356432147\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"link\">User Accounts</a>, and Ecommerce content (databases) aren’t included in exported code. Collection lists will show the empty state, and Collection pages won’t show any content that’s bound to Collection fields. </p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Does the exported code include my localized pages, elements, and content?</strong></p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">Localized pages, elements, and content aren’t included in exported code. Exported code only includes the primary locale.</p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Will password protected pages still be protected after I export my code? </strong></p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">No. Any <a href=\"https://help.webflow.com/hc/en-us/articles/33961298873235\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"link\">password protected pages</a> on your site won’t be protected after code export. Your site must be <a href=\"https://university.webflow.com/lesson/webflow-site-plans-wf\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"link\">hosted with Webflow</a> in order for password protection to work as expected.</p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Will all elements function on my site if I host the code elsewhere? </strong></p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">CMS, <a href=\"https://help.webflow.com/hc/en-us/articles/33961356432147\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"link\">User Accounts</a>, Ecommerce content (databases) and functionality, and localized pages, elements, and content aren’t included in exported code. These features require hosting to function as expected. On exported sites, Collection lists will show the empty state, and Collection pages won’t show any content that’s bound to Collection fields. Any <a href=\"https://help.webflow.com/hc/en-us/articles/33961298873235\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"link\">password protected pages</a> on your site will no longer be protected after code export. </p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">Additionally, site search and forms (including file upload and reCAPTCHA) will not work on exported sites in order to comply with GDPR. To collect form submissions, you’ll need to use a third-party tool or embed a third-party <a href=\"https://university.webflow.com/integrations-type/forms\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"link\">form integration</a>. <a href=\"https://help.webflow.com/hc/en-us/articles/33961341546899\" data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"link\">Learn more about collecting form submissions on exported sites</a>.</p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\"><strong data-prosemirror-content-type=\"mark\" data-prosemirror-mark-name=\"strong\">Why don’t my Lottie animations work locally when I export my site?</strong></p><p data-prosemirror-content-type=\"node\" data-prosemirror-node-name=\"paragraph\" data-prosemirror-node-block=\"true\">For security reasons, Lottie JSON files won’t load from your local file system, so Lottie animations won’t appear when you load your site locally — they need a web server to work as expected.</p>","user_segment_ids":[]}}