Screenshot to Code
Turns screenshots or mockups into code for HTML, React, Vue and other stacks using AI.
- Stars
- 81k
- Forks
- 9.9k
- Licence
- MIT
- Language
- Python
- Last update
- 10 days ago
- Type
- App
What it is
You give it a screenshot, a design mockup, a Figma design, or a screen recording, and it uses AI models to write front-end code that tries to match the look of the original. It supports several stacks, including HTML with Tailwind or CSS, React with Tailwind, Vue with Tailwind, Bootstrap, and Ionic with Tailwind. People use it to speed up turning visual designs into working starting points.
- Convert a screenshot of a landing page into HTML with Tailwind
- Turn a Figma design into a React component starting point
- Generate a functional prototype from a short screen recording of a website
- Compare outputs from different AI models when several provider keys are set
Great for
- Developers who want a first draft of a page from a design image
- Designers who want to see a rough coded version of their mockup
- Prototyping a website from a screen recording
- People who want to self-host and customize the code
Not ideal for
- Anyone who needs pixel-perfect or production-ready output without review, since the README presents results as a starting point and makes no such guarantee
- People without API keys or budget for paid model providers, because running it locally requires at least one key
- Users who want to run fully offline or with local open-source models, since the README says Ollama models are not recommended due to poor-quality results
How to get it
- 1
Clone and build from source
You'll need: Python · Poetry · pnpm · Chromium (installed via Playwright, optional for screenshot preview) · Docker (optional, for the Docker setup)
Clone the repository
git clone https://github.com/abi/screenshot-to-codeInstall backend dependencies
cd backend && poetry installInstall Chromium for screenshot preview
poetry run playwright install chromiumInstall frontend dependencies
cd frontend && pnpm install - 2
Run it
- Add at least one model provider key (OPENAI_API_KEY, ANTHROPIC_API_KEY, or GEMINI_API_KEY) to backend/.env, plus REPLICATE_API_KEY if you want image editing and background removal
- Start the backend with poetry run uvicorn main:app --reload --port 7001
- Start the frontend with pnpm dev from the frontend folder
- Open http://localhost:5173 in your browser and upload a screenshot
- 3
Get the most out of it
- Add Gemini and Replicate keys, which the README says are strongly recommended for best accuracy
- Use the settings dialog in the frontend to enter OpenAI, Anthropic, and Gemini keys instead of editing files
- Enable screenshot preview by installing Chromium so the agent can check its own rendered output
- Set OPENAI_BASE_URL in backend/.env if you need an OpenAI proxy, making sure the URL includes v1
- Use the Docker setup with docker-compose for a quicker full-stack run, noting it does not support live development
Downloads
Strengths
- Supports multiple common front-end stacks
- Offers a hosted version for trying it without local setup
- Licensed under MIT, so it can be freely used and modified
Trade-offs
- Requires API keys from model providers, which can cost money to use
- Local setup involves a backend and frontend, plus Playwright/Chromium and Poetry, so it takes some technical effort
- The README lists some features as optional or limited by which keys are configured
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.