🖼️ → 💻 pix2code

Paste a UI screenshot, get clean React + Tailwind code in seconds — with a live preview.

Powered by Claude vision.

---

✨ What it does

Drop in a screenshot of any UI — a dashboard, a landing page, a card, a form — and pix2code hands you a single, self-contained React + Tailwind component that recreates it. You get a live preview side-by-side with the generated code, plus one-click copy.

• 📋 Paste, drop, or upload — ⌘/Ctrl+V a screenshot straight from your clipboard
• ⚡ Streaming output — watch the component get written token by token
• 👁️ Live preview — the generated component renders instantly in a sandboxed iframe
• 🎛️ Steerable — add instructions like "use a dark theme" or "make the CTA green"
• 🧩 Clean output — semantic HTML, Tailwind utilities, inline SVG icons, no dependencies

🎬 Demo

Add a screen recording here — drop a screenshot in, watch the code stream, flip to the live preview.

Record one with your favorite tool and save it as docs/demo.gif, then it shows up below:

🚀 Quickstart

# 1. Clone
git clone https://github.com/dustfillerr-code/pix2code.git
cd pix2code

# 2. Install
npm install

# 3. Add your Anthropic API key
cp .env.example .env.local
#   then edit .env.local and set ANTHROPIC_API_KEY

# 4. Run
npm run dev

Open http://localhost:3000, paste a screenshot, and hit Generate.

You'll need an Anthropic API key — grab one at console.anthropic.com.

🧠 How it works

 Screenshot ──▶ /api/generate ──▶ Claude (claude-opus-4-8, vision)
                                     │
                                     ▼
                       Streamed React + Tailwind code
                                     │
                    ┌────────────────┴────────────────┐
                    ▼                                  ▼
              Code panel                     Live iframe preview
                                        (React UMD + Babel + Tailwind CDN)

1. The browser reads your image as a base64 data URL.
2. app/api/generate/route.ts sends it to Claude with a focused system prompt and streams the response back.
3. The client renders the streamed component into a sandboxed <iframe> using React UMD, Babel Standalone, and the Tailwind Play CDN — so the preview is fully client-side and self-contained.

🗂️ Project structure

app/
  layout.tsx            Root layout + metadata
  page.tsx              The whole UI (upload, stream, preview, copy)
  globals.css           Tailwind + small tweaks
  api/generate/route.ts Claude vision endpoint (streaming)
tailwind.config.ts

⚙️ Configuration

Env var	Required	Description
ANTHROPIC_API_KEY	✅	Your Anthropic API key (server-side)

The model is set in app/api/generate/route.ts (claude-opus-4-8 by default). Swap it for claude-sonnet-5 if you want faster/cheaper generations.

☁️ Deploy

Deploys cleanly to Vercel — import the repo and add ANTHROPIC_API_KEY as an environment variable. That's it.

🔒 Notes

• Your API key stays server-side — it's never shipped to the browser.
• The preview iframe is sandboxed (allow-scripts only) and loads React/Babel/Tailwind from public CDNs.

📄 License

MIT — do whatever you like. A ⭐ is always appreciated.