Screenshot to Code abi/screenshot-to-code

Turns screenshots, mockups, Figma designs or screen recordings into front-end code (HTML/Tailwind, React, Vue and more) using cloud AI models.

Creator kit + Compare GitHub ↗ Install guide (official) ↗

Screenshot to Code at a glance

Checked 15 Oct 2026

Screenshot to Code converts an image or screen recording of a website into front-end code in HTML + Tailwind, HTML + CSS, React, Vue, Bootstrap or Ionic. It runs locally as a FastAPI backend and React frontend, or with Docker. It needs at least one OpenAI, Anthropic or Gemini key, and Gemini plus Replicate are recommended; Ollama works but the README says results are poor. It produces front-end code only: no backend, database or hosting. MIT; there is also a paid hosted version.

Cite this pageRepoQuarry. “Screenshot to Code.” Checked 15 Oct 2026. https://repoquarry.dev/projects/screenshot-to-code

How much of Lovable does it replace?

1 of 6 jobs. Recreates a screen as front-end code; no full-stack app, backend or publishing.

Build a full-stack web app from a chat prompt Not covered

See the running app update as it is built Not covered

Change the UI by clicking on it (Visual Edits) Not covered

Add a database Not covered

Publish the app to a live URL (Publish) Not covered

Turn a screenshot Partial replacement

For build a full-stack web app from a chat prompt, see the running app update as it is built, change the UI by clicking on it (Visual Edits), add a database, publish the app to a live URL (Publish), see other Lovable alternatives. You may also need to build an interface, an API server and hosting yourself.

How much of Bolt.new does it replace?

1 of 6 jobs. Recreates a screen as front-end code; no full-stack app, backend or publishing.

Build a full-stack web app from a chat prompt Not covered

Run and preview the app in the browser (WebContainers) Not covered

Add a database and login (Bolt Database / Supabase) Not covered

Publish the app to a live URL (Bolt hosting / Netlify) Not covered

Build a mobile app from a prompt (Expo) Not covered

Turn a screenshot or design into an app (image or Figma import) Partial replacement

For build a full-stack web app from a chat prompt, run and preview the app in the browser (WebContainers), add a database and login (Bolt Database / Supabase), publish the app to a live URL (Bolt hosting / Netlify), build a mobile app from a prompt (Expo), see other Bolt.new alternatives. You may also need to build an interface, an API server and hosting yourself.

Facts, with sources

Every answer links to where we found it. We read the documentation; we did not install it.

Report a correction

QuestionAnswerSourceChecked

Runs on my machine? Yes, backend and frontend run on your machine (or Docker); models are cloud APIs Run locally: best if you want to customize, self-host, or contribute. github.com · screenshot-to-code#-getting-started ↗ 1d ago

Code licence MIT github.com · LICENSE ↗ 1d ago

Model weights licence No separate model weights github.com · screenshot-to-code#readme ↗ 1d ago

Commercial use Yes, MIT github.com · LICENSE ↗ 1d ago

Paid services needed? Normally needs an OpenAI, Anthropic or Gemini key (Replicate recommended); Ollama is possible but not recommended If you'd like to run the app with Ollama open-source models (not recommended due to poor-quality results) github.com · screenshot-to-code#api-keys ↗ 1d ago

Hardware Not documented Know the answer? —

Operating systems Windows and Linux are mentioned in setup notes; macOS not stated; Docker available On Windows, open the `.env` file with Notepad++, then go to Encoding and select UTF-8. github.com · screenshot-to-code#-faqs ↗ 1d ago

Setup effort Medium; Poetry backend plus pnpm frontend, or docker-compose If you have Docker installed, run this from the root directory: github.com · screenshot-to-code#docker ↗ 1d ago