Screenshot to Code

What it is for

Screenshot to Code is a vision-to-frontend tool: drop a screenshot, a recording, or a URL, and it writes HTML / React / Vue you can edit. Use it when the job is rebuild a UI from a picture, not when you need a full-stack app.

The GitHub repo is MIT. The hosted app at screenshottocode.com is paid. Hobby is $15/mo (100 credits).

What makes it unique: the cover is the official README dropzone — “Drag & drop a screenshot,” React + Tailwind, Claude, Record Screen, or capture a URL.

Key features

• Screenshot to working UI — drop a mock or a captured screen; the agent writes the page (cover; README).
• Screen recording to code — upload an .mp4 or record the tab to clone a flow, not one still (cover; README).
• Reuse assets from the screenshot — Gemini extracts the real logos and images from the input instead of inventing replacements (README).
• Visual preview loop — after generate, the agent can render its own page in headless Chromium and check the result (README — “Screenshot preview”).
• Iterative refine — send a follow-up instruction and regenerate the UI until it matches (screenshottocode.com).
• Self-host with your keys — run the MIT app locally or in Docker and point it at your OpenAI / Anthropic / Gemini key (README).

Who it's for

Best fit: frontend engineers who already have a mock or a competitor screenshot and want a starting codebase.

Poor fit: founders who need auth, a database, and deploy from a sentence (Lovable).

Pricing

Verified 2026-10-22 (Asia/Shanghai) from screenshottocode.com/pricing and the MIT repo. Two official paths.

• Self-host (MIT) — $0 for the software. You pay your own model API. Image edit / background removal needs a Replicate key.
• Hobby (hosted) — $15/mo. 100 credits / month. Chat support. Yearly toggle advertises 50% off.
• Pro (hosted) — $40/mo. 500 credits / month.

1 credit = one screenshot/text creation or one edit. Credits reset on the 1st and do not roll. No refunds (digital / instant access). The hosted page we fetched has no free hosted tier.

Limitations / costs

• Hosted has no free plan. Try OSS + your own key, or pay Hobby.
• An edit is another credit. A 10-turn polish on Hobby is 10% of the month.
• Credits do not roll.
• Self-host is not “free inference.” You still buy tokens from the model vendor.

Alternatives

• v0 by Vercel — prompt-to-React if you will describe the UI instead of dropping a PNG.
• Lovable — prompt-to-full-stack if you need more than a frontend clone.
• Bolt — in-browser app from a prompt if you do not have a screenshot.

Official tutorial

We searched YouTube for an official Screenshot to Code channel. The walkthroughs we found (WorldofAI, howto channels) are third-party, so they are not embedded. Use the written README and hosted pricing. If the author publishes an official channel later, we will embed it here.

Website

https://screenshottocode.com

Source

Catalog row curated for AI Tools Nav. Cover is the official README dropzone. Hosted Hobby $15 / 100 credits; Pro $40 / 500. MIT self-host + own keys. No official YouTube channel found to embed.

Last verified

2026-10-22 (Asia/Shanghai) editorial check.