Webflow 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 deploys that .zip by dragging it into your browser, with no Git, Vercel 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.
- A Webflow site on a paid Workspace plan. Code export is a workspace plan feature, so site plans alone don't include it.
- A Vercel account. The free hobby plan works.
To export your code:
- Open your site in Webflow.
- Click the W logo in the upper-left corner to open the Main menu and select Code export, or press Shift + E.
- Click Prepare ZIP.
- Download the
.zipfile 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.
Go to 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.
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.
A Webflow code export includes your site's static pages, styles, scripts, and images, but some Webflow features stay behind 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.
- 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 via the Vercel Marketplace and add Vercel BotID 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.
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. 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.
- Read the Vercel Drop documentation for limitations and details.
- Deploy from Git for automatic deployments on every push.
- Managing deployments to redeploy, inspect, and promote.
- Read Webflow's code export article for the full list of what's included in an export.
- Vercel Drop also works with exports from Claude Design, Google Stitch, and Bolt.new.