← Back to Discover

Screenshot-to-Code

An open source app that generates front-end code from a screenshot, mockup, Figma design or recording of a website, for stacks such as HTML with Tailwind, React and Vue, using models from OpenAI, Anthropic or Gemini.

App buildersUI design
Visit website ↗

What it does

Screenshot-to-Code is an open source project under the MIT license. Its frontend uses React and Vite and its backend uses FastAPI. You give it a screenshot, mockup, Figma design or a recording of a website being used, and it generates code for the stack you pick. The repository lists HTML with Tailwind, HTML with CSS, React with Tailwind, Vue with Tailwind, Bootstrap, and Ionic with Tailwind. Generation uses models from OpenAI, Anthropic or Gemini, so you need at least one provider API key. Replicate adds image generation, background removal and editing of images. You can run it locally with Poetry and pnpm or with Docker, or try the hosted app at screenshottocode.com. The README says running with Ollama open source models is possible but not recommended because the results are poor.

Capabilities

  • Turns screenshots, mockups and Figma designs into code
  • Can build a prototype from a recording of a site in use
  • Output for HTML, Tailwind, React, Vue, Bootstrap and Ionic
  • Works with OpenAI, Anthropic and Gemini models using your own API keys
  • Optional screenshot preview lets the agent render and check its own page
  • Run it locally or with Docker; a hosted app is also offered

When to use it

  • You have a design or screenshot and want a first draft of the front-end markup
  • You want to recreate an existing page layout as a quick prototype
  • You prefer to self-host and bring your own model API keys
  • You want to compare code from several models for the same screenshot