README

screenshot-to-code

Convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI. The easiest way to try this is using the official, hosted product at screenshottocode.com →


https://github.com/user-attachments/assets/ec08a5e6-9606-41c5-b03a-1bf47dfeba75


Supported stacks:

- HTML + Tailwind
- HTML + CSS
- React + Tailwind
- Vue + Tailwind
- Bootstrap
- Ionic + Tailwind

Default AI models:

- Gemini 3 Flash Preview and Gemini 3.1 Pro Preview - the best models
- GPT-5.5 and GPT-5.4 Mini
- Claude Opus 4.6, Claude Opus 4.8
- z-image-turbo (using Replicate) for image generation

See the Examples section below for more demos.

Screenshot to Code also supports taking a screen recording of a website in action and turning that into a functional prototype.

!google in app quick 3

 🛠 Getting Started

Choose the path that fits what you want to do:

- Run locally: best if you want to customize, self-host, or contribute.
- Use the hosted app: the fastest way to try Screenshot to Code with no local setup. Open the hosted app →

Running locally requires API keys and a backend/frontend setup. The app has a React/Vite frontend and a FastAPI backend.

 API keys

You need at least one model provider key (OpenAI, Anthropic, or Gemini).
Gemini and Replicate are strongly recommended for the best quality of
screenshot-to-code accuracy — Gemini powers asset extraction (reusing the
real logos/images from your screenshot) and Replicate powers image
generation, background removal, and image editing. Adding all four keys gives
the best results and lets you compare multiple models per generation.

| Key | Required? | What it unlocks |
|-----|-----------|-----------------|
| OPENAI_API_KEY | One of these three | GPT code-gen variants (GPT-5.5, GPT-5.4 Mini) |
| ANTHROPIC_API_KEY | One of these three | Claude code-gen variants (Opus 5, Opus 4.8, Fable 5, Sonnet 4.6) |
| GEMINI_API_KEY | One of these three — strongly recommended | Gemini code-gen variants (3 Flash, 3.1 Pro); extracts real assets from the screenshot; required for video mode |
| REPLICATE_API_KEY | Strongly recommended | Image editing, background removal, and Replicate-backed image generation — without it, edit_images and remove_backgrounds are unavailable |

With more keys, the app automatically picks a stronger mix of models per
variant; with a single key it uses that provider's models only.

If you'd like to run the app with Ollama open-source models (not recommended due to poor-quality results), follow this comment.

Run the backend (I use Poetry for package management; run pip install --upgrade poetry if you don't have it):

bash
cd backend
echo "OPENAI_API_KEY=sk-your-key"  .env
echo "ANTHROPIC_API_KEY=your-key"  .env
echo "GEMINI_API_KEY=your-key"  .env
echo "REPLICATE_API_KEY=r8_your-key"  .env
poetry install
 Install the Chromium browser used by the screenshot preview tool.
 On Linux, use poetry run playwright install --with-deps chromium to also
 install the

Top issues