Deploy Your Google Stitch App to Netlify
Export a UI from Google Stitch and publish it to Netlify by dragging the static HTML into Netlify Drop, with a path to graduate to a Git-connected project.
Google Stitch turns a prompt or a reference image into UI designs and front-end code. It exports static HTML, often styled with Tailwind CSS, which means no server and no build step: exactly the kind of output Netlify Drop was built to publish. Drag the folder into the browser and you get a live URL.
Stitch is a Google Labs experiment, free with a Google account (stitch.withgoogle.com). This guide takes an export from Stitch to a live Netlify site in five steps, then shows how to turn it into a project you can keep updating.
Prerequisites
- A Google Stitch project.
- A Netlify account. The free plan hosts the site within a monthly usage allowance, and since a Stitch export is static, there is no build to run.
Steps
1. Export your code from Google Stitch
Open a screen in Stitch and click the code icon (< >) to reveal the generated HTML. Copy or download it. Repeat for each screen in your design.
A note from testing Stitch exports: the code icon on each screen is the reliable way to get the HTML. The zip export has, in some cases, contained only a design.md and a screenshot rather than the HTML files, so if your download is missing markup, fall back to the per-screen code view.
2. Put the files in one folder
Collect every downloaded HTML file into a single folder. The folder must contain an index.html at its root: Netlify serves that file as your homepage, so rename your main page to index.html if it is not already. The others serve at their own paths (about.html at /about.html, and so on).
If your screens link to each other, check that the links point at the actual filenames in the folder. Stitch exports each screen independently, so cross-page links may need a quick edit.
3. Drop the folder into Netlify
Go to app.netlify.com/drop and drag your folder onto the page. Netlify uploads the files and publishes them as they are, with no build pipeline (Netlify Drop quickstart).
4. Get your live URL
Netlify publishes the site to a netlify.app address and shows it in the dashboard. Share it, or rename the site to change the subdomain.
Keep the folder under 50 MB for a smooth deploy; individual files over 10 MB can cause a deploy to stall. Static UI exports rarely approach either limit.
5. Update after changes
Regenerate a screen in Stitch, download the new HTML, and drag the updated folder onto the same site in your Netlify dashboard. The changes publish to production and the URL stays the same.
Add a custom domain
The free plan includes a custom domain with a free SSL certificate. Add yours under domain management, point your DNS at Netlify, and HTTPS provisions automatically.
Graduate to a real project
Drag-and-drop is the fast start. When your Stitch export becomes something you iterate on frequently, move the files into a Git repository and connect it to Netlify. Every push then deploys automatically, and every pull request gets its own preview URL (create deploys). You can also deploy from the terminal with the Netlify CLI using netlify deploy, which handles larger uploads that the drag-and-drop zone does not.