# Deploy a Google Stitch design with Vercel Drop

**Author:** Ben Sabic

---

[Google Stitch](https://stitch.withgoogle.com/) by Google Labs turns text prompts, sketches, and screenshots into UI designs, with HTML and Tailwind CSS behind every screen. When a design is ready, you can download its code straight from the canvas. [Vercel Drop](https://vercel.com/drop) deploys those files directly to your browser, with no Git, Vercel CLI, or local setup required. Together, they take you from a prompt to a live production URL you can share with anyone.

In this guide, you'll export the HTML for your Stitch screens, deploy them to Vercel with Vercel Drop, choose which page loads at your site's root, and set up automatic deployments as you iterate.

## Prerequisites

- A [Google Stitch](https://stitch.withgoogle.com/) project. Stitch is free and requires only a Google account.
  
- A [Vercel account](https://vercel.com/signup). The free Hobby plan works.
  

## Steps

### 1\. Export your code from Google Stitch

Select a screen on your Stitch canvas and click the code icon (the angle brackets, `< >`). From the code view, download the generated HTML. Repeat for each screen you want to include on your site.

### 2\. Put the files in one folder

Create a folder on your computer and move the downloaded HTML files into it. If you want a specific screen to load when someone opens your site, rename that file to `index.html`. If you skip this, Vercel asks you to pick a homepage during deployment instead.

### 3\. Drop the folder into Vercel

Go to [vercel.com/drop](https://vercel.com/drop) and drag the folder onto the page. You can also zip the folder first or select a **folder** to upload, because Vercel Drop accepts files, folders, and `.zip` archives.

### 4\. Name your project and deploy

Choose the Vercel team to deploy to, enter a project name, and select **Deploy**. Stitch exports are static HTML, so Vercel publishes them as-is with no build step. When the deployment finishes, you get a live URL for your site.

### 5\. Choose your homepage (if prompted)

If your folder has no `index.html` at the top, Vercel asks which page people should see first when they open your site. Pick a screen from the **Root (/)** menu. Vercel serves every other file at its own path, so a screen exported as `pricing.html` is available at `/pricing.html`.

## Updating your site after changes

Each drop creates a new Vercel project, so re-exporting from Stitch and dropping again gives you a new project with a new URL. For prototypes and design reviews, that's often fine, and each version stands on its own. If a design graduates into a real project, move the code into a repository, 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 URL stays the same.

## 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.

---

[View full KB sitemap](/kb/sitemap.md)