Capture Live Apps

When you’re redesigning an existing page or prototyping a new feature inside an established app, don’t start from a blank canvas. Bring your real running UI onto the Stitch Canvas first so your edits build on your actual layout and styles.

Capture routes with the /stitch skill

With the /stitch skill installed (stitch agent-skills add), start your local dev server and ask your coding agent to capture your routes onto your Stitch project:

Your agent auto-detects your running Vite, Next.js, or Astro dev server port, captures the hydrated DOM and a 1280x800 verification screenshot for each route, checks that no login modal blocked the page, and uploads the screens to your Stitch project.

Capture and upload from the terminal

The CLI splits capturing and uploading into two separate commands so you can always inspect what was captured on disk before sending anything to Stitch.

Capture a client-rendered app in headless Chrome

Use stitch capture browser for React, Next.js, Vite, or Vue apps that need JavaScript hydration, WebFonts, and computed styles:

stitch capture browser \
  --url "http://localhost:3000/checkout" \
  --wait-for "#checkout-root" \
  -o .stitch/checkout.html

Passing -o writes both the normalized HTML file (.stitch/checkout.html) and a 1280x800 verification screenshot (.stitch/verify-capture.png) so you can verify the capture at a glance.

Capture over HTTP or from a static file

If you’re working with server-rendered HTML on a local port or a static build file, use stitch capture port or stitch capture file:

stitch capture port --port 5173 --route "/dashboard" -o .stitch/dashboard.html
stitch capture file ./dist/index.html -o .stitch/index.html

Get past login screens without touching code

Never edit your application source code just to bypass a login screen for a capture. stitch capture browser gives you three clean ways to capture authenticated views:

• Sign in directly in the open tab: Log in or toggle tabs inside the live browser window, then freeze that active tab without reloading:

  stitch capture browser --page 1 -o .stitch/dashboard.html
  

• Pass saved cookies and localStorage: Point --storage at a JSON storage state file:

  stitch capture browser \
    --url "http://localhost:4321/schedule" \
    --storage .stitch/storage.json \
    -o .stitch/schedule.html
  

• Run a sign-in script before snapshot: Pass --prepare to run a small setup script before the DOM is captured:

  stitch capture browser \
    --url "http://localhost:4321/login" \
    --prepare .stitch/signin.js \
    --wait-for "#dashboard" \
    -o .stitch/dashboard.html
  

Upload to the Stitch Canvas

Once your local .html snapshot or image looks right, place it on your Stitch Canvas project with stitch upload screen:

stitch upload screen .stitch/checkout.html \
  --route "/checkout" \
  --title "Checkout"

Pass --route when uploading an application route so Stitch records that screen as the canonical reference for /checkout. Once uploaded, open your project with stitch open project or start iterating on the screen with stitch edit screen.