screenshot-to-code

Screenshot to Code is an open-source tool that converts screenshots, mockups, Figma designs and screen recordings into clean, functional code using AI. It is built for developers who want working HTML, React or Vue code from a visual design instead of coding a layout by hand, and it is also offered as a hosted app at screenshottocode.com.

A user uploads a screenshot or screen recording to the hosted app, or runs the project locally with a FastAPI backend and a React/Vite frontend using their own OpenAI, Anthropic, Gemini or Replicate API keys. The chosen AI models generate the code; with more provider keys configured, the app automatically picks a stronger mix of models per variant.

Screenshot to Code can output HTML with Tailwind or plain CSS, React, Vue, Bootstrap or Ionic code, and can turn a screen recording of a website into a functional prototype. Gemini powers asset extraction that reuses real logos and images from the screenshot, Replicate powers image generation, editing and background removal, and an optional preview step renders the result in a headless browser to check it visually.

Screenshot to Code is open source under the MIT license and can run locally, in Docker, or through the hosted app with no setup. It needs at least one model provider API key to run, and running it with local Ollama models is not recommended due to poor-quality results.

Use cases

• Turning a design mockup or Figma file into working frontend code
• Recreating an existing website's UI as a functional prototype from a screen recording