Screenshot to Code

Overview

Screenshot to Code is an open-source project and hosted product that uses AI to turn screenshots, mockups, Figma designs, and screen recordings into clean, functional code. It supports multiple frontend stacks and lets users run locally or use the hosted app.

Key Features

• Convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI.
• Supported stacks: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, and Ionic + Tailwind.
• Default AI models include Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6, Claude Opus 4.8, and z-image-turbo via Replicate.
• Supports turning a screen recording of a website in action into a functional prototype.
• With multiple provider keys, the app can compare models and automatically pick a stronger mix of models per variant.
• Optional screenshot preview lets the agent render generated pages in a headless browser and visually check its work.

Use Cases

• Converting a screenshot into clean HTML, Tailwind, React, Vue, or other supported code.
• Turning Figma designs or mockups into functional frontend code.
• Creating a functional prototype from a screen recording of a website in action.
• Comparing multiple AI model providers per generation when multiple API keys are configured.

Getting Started

• Use the hosted app for the fastest way to try Screenshot to Code with no local setup.
• Run locally by setting up the React/Vite frontend and FastAPI backend; local operation requires API keys.
• Backend setup uses Poetry: install dependencies, configure .env with model provider keys, install Chromium through Playwright, activate the Poetry environment, and run uvicorn main:app --reload --port 7001.
• Frontend setup uses pnpm: run pnpm install and pnpm dev.
• Docker setup: from the root directory, create .env with OPENAI_API_KEY and run docker-compose up -d --build.

Deployment & Requirements

• Running locally requires API keys and a backend/frontend setup. The app has a React/Vite frontend and a FastAPI backend.
• You need at least one model provider key among OpenAI, Anthropic, or Gemini; Gemini and Replicate are strongly recommended for the best quality.
• Replicate must be configured in backend/.env as REPLICATE_API_KEY; without it, edit_images and remove_backgrounds are unavailable.
• Optional screenshot preview requires Chromium installed via Playwright or automatically in the Docker image; if Chromium is missing, the app skips the tool.
• Docker deployment requires Docker installed and a .env file with OPENAI_API_KEY; docker-compose up -d --build starts the app.

Before You Adopt

• License: MIT. Review its terms before using, modifying, or distributing the project.
• Operational caution: Optional screenshot preview depends on Chromium; if Chromium is missing, the app skips the tool.
• Operational caution: Running with Ollama open-source models is not recommended due to poor-quality results.
• Operational caution: The Docker setup cannot be used for development because file changes won't trigger a rebuild.