screenshot-to-code

Last reviewed Aug 26, 2026 · 751 words

Know what you are self-hosting before you docker-compose this one. screenshot-to-code, 74,512 stars and MIT-licensed, turns a screenshot, mockup, or Figma export into working front-end code in about a minute, and the whole app runs on your own machine. The intelligence does not: it calls paid cloud vision models, so an API key from Anthropic or OpenAI is required and every generation costs real money. Self-hosted here means you own the pipeline and your images pass through your box, not that anything runs offline.

Ten minutes from clone to first generation

The stack is small — a Python FastAPI backend and a React frontend — and the catalogue's Easy rating and 1 GB RAM figure are both accurate, because your server is only orchestrating; the heavy lifting happens at the model provider. Clone the GitHub repo, put your API key in the backend's .env, and start it with Docker Compose or two local dev processes. Drop in a screenshot, pick an output stack, and code streams back with a live preview. The chat loop is the underrated part: you iterate on the result conversationally ("make the nav sticky, swap the hero image") instead of regenerating from scratch, and that loop is where the tool earns its keep.

One input, several output stacks

The same screenshot can come back as HTML with Tailwind, plain HTML and CSS, React, Vue, Bootstrap, or Ionic, which makes the tool more useful than the single-framework services it competes with. In my experience the HTML-plus-Tailwind path is the strongest: it gives the model the least room to hallucinate project structure, and the output is trivial to paste anywhere. Generations from a clean, high-resolution screenshot of a conventional layout are startlingly good; dense dashboards, unusual grids, and pixel-perfect brand work come back approximately right and visibly machine-made. There is also an experimental mode for turning a short screen recording into a working prototype, which is impressive when it lands and wasteful of tokens when it does not.

You bring the keys, and the bill scales with your curiosity

This is the catalogue's first con and the one to plan around. Every generation and every chat refinement is a vision-model API call, typically a few cents each at last check with current Claude or GPT-class models — trivial for occasional use, noticeable the afternoon you feed it thirty screenshots. Set a spending cap on the provider key you use, and use a dedicated key so the tool's usage is visible on its own line. The privacy math needs stating plainly too: your screenshots go to the model provider under their API terms. That is a much better deal than uploading them to some free converter site, but it is not local inference. If your mockups genuinely cannot leave the building, this is the wrong tool, and fully local options in the AI category — such as OpenUI, which can point at self-hosted models — trade output quality for actual privacy.

The output is a starting point, not a component library

The second catalogue con, "output needs manual cleanup," is the correct expectation. What you get is a faithful-looking single page: duplicated markup where a component should be, placeholder images, no state management, no accessibility guarantees beyond what the model happened to emit. Treat it as a scaffold that saves you the first two hours of translating a design into markup, then refactor like it was written by a fast intern — because functionally it was. Teams that accept that framing love it for prototypes, internal tools, and getting unstuck; teams that paste generations straight into production are generating tomorrow's cleanup sprint.

What I'd do

Run it in Docker on whatever box already has spare cycles, wire it to an Anthropic key with a 20-dollar monthly cap, and default to HTML plus Tailwind output. Use it for the specific job it is excellent at: collapsing the gap between "here is a picture of what we want" and "here is a page we can argue about in the browser." Keep expectations at prototype grade, budget a cleanup pass before anything ships, and skip it entirely if screenshots leaving your network is a dealbreaker. For everyone else it is one of the highest-value ten-minute installs in the catalogue, precisely because you are hosting a workflow rather than babysitting a model.