# Export your Webflow site and host it on Vercel **Author:** Ben Sabic --- [Webflow](https://webflow.com/) lets you design and build websites visually, and on paid Workspace plans you can export your site's HTML, CSS, JavaScript, and assets as a `.zip` file. [Vercel Drop](https://vercel.com/drop) deploys that `.zip` by dragging it into your browser, with no Git, [Vercel CLI](https://vercel.com/docs/cli), or local setup. Together, they take your Webflow design from export to a live production URL on Vercel within minutes. In this guide, you'll export your Webflow site's code, deploy it to Vercel with Vercel Drop, understand which Webflow features carry over to an exported site, and set up automatic deployments if you keep iterating. ## Prerequisites - A Webflow site on a [paid Workspace plan](https://webflow.com/pricing#workspaces). Code export is a workspace plan feature, so site plans alone don't include it. - A [Vercel account](https://vercel.com/signup). The free hobby plan works. ## Steps ### 1\. Export your site code from Webflow To export your code: 1. Open your site in Webflow. 2. Click the **W** logo in the upper-left corner to open the **Main menu** and select **Code export**, or press **Shift + E**. 3. Click **Prepare ZIP**. 4. Download the `.zip` file once Webflow finishes packaging it. The export contains everything Vercel needs to serve your site, including `.html` files for each page, a CSS folder with your styles, a JS folder that powers elements like navbars, sliders, and interactions, and an images folder with your uploaded assets. To reduce file size, you can export minified HTML. In the export window, press **Command + O** (Mac) or **Control + O** (Windows), check **Minify HTML**, then click **Prepare ZIP**. ### 2\. Drop the file into Vercel Go to [vercel.com/drop](https://vercel.com/drop) and drag the `.zip` onto the page. You can also select a file to upload instead of dragging. There's no need to unzip the export first, because Vercel Drop accepts files, folders, and `.zip` archives. ### 3\. Name your project and deploy Choose the Vercel team to deploy to, enter a project name, and select **Deploy**. Vercel creates a new project, uploads your files, and publishes them straight to production. When the deployment finishes, you get a live URL for your site. Webflow exports include an `index.html` at the top of the folder, so your homepage loads at your site's root (`/`) automatically. If Vercel asks which page people should see first, pick your homepage from the **Root (/)** menu. ## What carries over from Webflow A Webflow code export includes your site's static pages, styles, scripts, and images, but [some Webflow features stay behind](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code) because they depend on Webflow's hosting: - **CMS content**: Collection lists show their empty state, and Collection pages won't display content bound to Collection fields. You can [export Collection content as CSV](https://help.webflow.com/hc/en-us/articles/33961290794771-Import-export-Collection-content). - **Forms**: Webflow's form submission processing, file uploads, and reCAPTCHA stop working after export. To collect submissions on your Vercel deployment, connect your forms to [Formspree](https://vercel.com/marketplace/formspree) via the Vercel Marketplace and add [Vercel BotID](https://vercel.com/docs/botid/form-submissions) to protect them from spam. - **Ecommerce and User Accounts**: Products, checkout, and user login functionality aren't included. - **Site search and password protection**: Search won't return results, and password-protected pages are no longer protected after export. - **Localization**: Only your site's primary locale exports. Localized pages, elements, and content aren't included. If your site relies on these features, review how your exported pages behave on your Vercel deployment before sharing the URL. ## Updating your site after changes Each drop creates a new Vercel project, so re-exporting from Webflow and dropping again gives you a new project with a new URL. If you plan to iterate on a design over time, you have two options: - **Keep dropping**: Useful for prototypes or one-off sites where each version standing alone is fine. - **Connect a repository**: Unzip your export into a codebase, push it to GitHub, GitLab, or Bitbucket, and [connect the repository to Vercel](https://vercel.com/docs/git). After that, every push deploys automatically, and your project URL stays the same. Re-export from Webflow, copy the updated files into the repository, and push to publish changes. ## Resources and next steps - Read the [Vercel Drop documentation](https://vercel.com/docs/drop) for limitations and details. - [Deploy from Git](https://vercel.com/docs/git) for automatic deployments on every push. - [Managing deployments](https://vercel.com/docs/deployments/managing-deployments) to redeploy, inspect, and promote. - Read [Webflow's code export article](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code) for the full list of what's included in an export. - Vercel Drop also works with exports from [Claude Design](https://vercel.com/kb/guide/claude-design-vercel-drop), [Google Stitch](https://vercel.com/kb/guide/google-stitch-vercel-drop), and [Bolt.new](https://vercel.com/kb/guide/bolt-vercel-drop). --- [View full KB sitemap](/kb/sitemap.md)