How to download artifacts

Every Stitch screen produces two downloadable artifacts: an HTML file (a complete document with inline Tailwind CSS) and a screenshot image. The SDK gives you download URLs-you just fetch and save.

Get the download URLs

import { stitch } from "@google/stitch-sdk";

const projects = await stitch.projects();
const screens = await projects.at(0).screens();
const screen = screens.at(0);

const htmlUrl = await screen.getHtml();
const imageUrl = await screen.getImage();

Save HTML to disk

import fs from "fs/promises";

const response = await fetch(htmlUrl);
const html = await response.text();
await fs.writeFile(`${screen.id}.html`, html);

Open the file in a browser. You’ll see the fully rendered design with Tailwind classes.

Save the screenshot image

Images come back as binary data. Use arrayBuffer() instead of text():

const imgResponse = await fetch(imageUrl);
const buffer = await imgResponse.arrayBuffer();
await fs.writeFile(`${screen.id}.jpeg`, Buffer.from(buffer));

Batch download all screens in a project

import fs from "fs/promises";
import path from "path";

const outDir = "./designs";
await fs.mkdir(outDir, { recursive: true });

const project = (await stitch.projects()).at(0);
const screens = await project.screens();

for (const screen of screens) {
  const htmlUrl = await screen.getHtml();
  if (htmlUrl) {
    const res = await fetch(htmlUrl);
    await fs.writeFile(path.join(outDir, `${screen.id}.html`), await res.text());
  }

  const imgUrl = await screen.getImage();
  if (imgUrl) {
    const res = await fetch(imgUrl);
    await fs.writeFile(path.join(outDir, `${screen.id}.jpeg`), Buffer.from(await res.arrayBuffer()));
  }
}

console.log(`Downloaded ${screens.length} screens to ${outDir}`);