Screenshot to Code: a screenshot to code AI tool
/screenshot-to-code
Screenshot to Code is worth running the moment you need a fast first draft, not a finished product. The catch: it depends on the keys you bring. Its screenshot-preview step — rendering the output in a headless browser and checking it against your image — is the feature that separates it from a plain prompt-to-code wrapper, but it's still rough on complex layouts.
What is Screenshot to Code?
Screenshot to Code is an open-source tool that turns a screenshot, Figma mockup, or screen recording into working front-end code. It runs an AI model — Gemini, GPT, or Claude, chosen by whichever API key you supply — and outputs HTML, React, or Vue markup styled with Tailwind, plain CSS, Bootstrap, or Ionic. The repo is a React/Vite frontend plus FastAPI backend you self-host; a hosted version at screenshottocode.com skips setup.
Key features and supported stacks
- ✓Outputs multiple front-end stacks: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, and Ionic + Tailwind.
- ✓Defaults to Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6, and Claude Opus 4.8 for code generation.
- ✓Uses z-image-turbo via Replicate for image generation.
- ✓Gemini extracts the real logos and images from your screenshot instead of generating placeholder assets.
- ✓Replicate handles background removal and image editing on top of the generated code.
- ✓Converts a screen recording of a live website into a working prototype, not just static screenshots.
- ✓Screenshot preview renders the generated page in headless Chromium and checks it against the source image.
- ✓Add more provider keys and the app mixes stronger models per generation; run on one key and it sticks to that provider only.
How to run it locally
Screenshot to Code ships two install paths. For local dev: `cd backend`, add at least one of `OPENAI_API_KEY`, `ANTHROPIC_API_KEY`, or `GEMINI_API_KEY` to a `.env` file, run `poetry install`, then `poetry run playwright install chromium` (needed for the screenshot-preview feature), then `poetry env activate` followed by `poetry run uvicorn main:app --reload --port 7001`. In a second terminal: `cd frontend`, `pnpm install`, `pnpm dev`, then open http://localhost:5173. For Docker: drop an `OPENAI_API_KEY` into a root `.env` and run `docker-compose up -d --build` — the app comes up at http://localhost:5173, but the README notes file changes won't trigger a rebuild in that mode, so it's not meant for active development. Replicate and Gemini keys are optional but the README calls them 'strongly recommended' for asset extraction and image editing.
Using the app
Once the frontend is running, drop in a screenshot (or paste one) and pick an output stack from the settings — HTML, React, Vue, Bootstrap, or Ionic. The gear icon opens a settings dialog where you can add OpenAI, Anthropic, and Gemini keys without touching the backend .env file (Replicate still has to go in backend/.env). That same dialog shows whether screenshot preview is available on your backend, and if you run behind a restrictive network, you can point OPENAI_BASE_URL at a proxy as long as the URL keeps `v1` in the path.
Strengths
- ✓Several output stacks cover the common front-end choices instead of locking you into one framework.
- ✓The screenshot-preview loop — render the output, compare it to the source image — is a real self-check most screenshot-to-code tools skip.
- ✓Gemini-based asset extraction reuses actual logos and images from the screenshot instead of leaving placeholder boxes.
- ✓Works with whichever model provider you already pay for; you're not locked into a single vendor's API.
Limitations and requirements
- △You need at least one paid model API key (OpenAI, Anthropic, or Gemini) — there's no fully free path to running it, hosted or local.
- △Ollama/open-source model support exists only as a community workaround linked from a GitHub issue, and the README itself calls the results poor quality.
- △Output quality drops on non-trivial layouts; this is a starting point for a developer to finish, not a drop-in production generator.
- △The Docker setup can't be used for active development — file changes don't trigger a rebuild, so local dev means the Poetry + pnpm path instead.
- △Screenshot preview needs Chromium installed via Playwright; skip that step and the app silently drops the feature rather than erroring.
Alternatives to Screenshot to Code
Frequently asked questions
Screenshot to Code requires you to supply a key from one of three model providers — OpenAI, Anthropic, or Gemini — to generate code; there is no keyless local mode. Add it to backend/.env or through the settings dialog after the frontend loads. Replicate is a separate, optional key for image editing and background removal.
Screenshot to Code doesn't officially support Ollama. A community workaround is linked from a GitHub issue thread, but the README explicitly calls the results poor quality and doesn't recommend it. OpenAI, Anthropic, and Gemini remain the supported, documented paths.
Screenshot to Code's default models are Gemini 3 Flash Preview and Gemini 3.1 Pro Preview, GPT-5.5 and GPT-5.4 Mini, and Claude Opus 4.6 and Claude Opus 4.8, plus z-image-turbo via Replicate for image generation. Which ones actually run depends on which API keys you supply.
Screenshot to Code does support both: React + Tailwind and Vue + Tailwind are two of its output stacks, alongside HTML + Tailwind, HTML + CSS, Bootstrap, and Ionic + Tailwind. You pick the stack before generating code from your screenshot.
Screenshot to Code includes a docker-compose setup — add an OPENAI_API_KEY to a root .env file and run `docker-compose up -d --build`, and the app comes up at http://localhost:5173. The README notes this mode isn't meant for active development since file changes won't trigger a rebuild.
Screenshot preview lets Screenshot to Code render its own generated page in a headless Chromium browser and visually compare it against your original image before handing back the result. It installs automatically with `playwright install chromium` (or inside the Docker image), and the settings dialog shows whether it's active on your backend.
The problem it solves
A developer with a mockup, a Figma frame, or just a screenshot of a page they like still has to hand-translate every div, spacing value, and color into markup themselves. Screenshot to Code skips that transcription step by sending the image straight to an AI model and getting back HTML/Tailwind, React, or Vue code — and because Gemini can pull the real logos and images out of the screenshot instead of leaving gray boxes, the first draft looks closer to the source than a typical text-prompt code generator would produce.
Best use cases
- •Turning a Figma mockup into a first-pass React component before a developer touches it.
- •Cloning the visual structure of an existing page (the README's own demos replicate NYTimes, Instagram, and Hacker News) to bootstrap a prototype.
- •Converting a screen recording of a competitor's interaction flow into a clickable prototype.
- •Quick internal tools where Bootstrap or plain HTML/CSS output is good enough to ship as-is.
Who should try it — and who should skip
Try it if you're a front-end developer who wants a fast first draft from a mockup or a competitor's page, and you already have an OpenAI, Anthropic, or Gemini key sitting around. Skip it if you need a no-API-key, fully local workflow — the closest thing, Ollama support, is explicitly called poor quality in the README — or if you're expecting production-ready output rather than a scaffold to clean up by hand.
Related repositories
Is screenshot-to-code worth your time?
ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of screenshot-to-code.