screenshot-to-code

What it is

screenshot-to-code is an open source app by Abi Raja. Its README says it converts screenshots, mockups, Figma designs and screen recordings into clean, functional code using AI. The README lists six stacks: HTML with Tailwind, HTML with CSS, React with Tailwind, Vue with Tailwind, Bootstrap, and Ionic with Tailwind. The app has a React and Vite frontend and a FastAPI backend. You run both yourself and add your own model keys. The maker also runs a hosted product at screenshottocode.com.

1. You give it a screenshot, mockup, Figma design or recording
2. The backend asks the models your keys give access to
3. It writes code for one of the supported stacks
4. With Chromium installed, it can render the page and check it

Who it suits

Front-end developers and designers who want a first draft of a page from an image, and people who want to self-host the app and change it. The README says running locally is best if you want to customize, self-host or contribute. Skip it if you do not want to manage model keys. The README calls the hosted app the fastest way to try it with no local setup.

Where to use it

The maker documents these routes, and the kit has a page for each.

• Your computer: the FastAPI backend with Poetry and uvicorn, and the React frontend with pnpm
• Docker: docker-compose builds and starts both
• The hosted app: the maker’s own product at screenshottocode.com, which the kit only points to

The kit also has pages for API keys and models, Linux, Windows and troubleshooting.

How to set it up

Get it saves a zip of Mindket’s setup notes in your downloads folder, with a page for each route above. The main route runs the backend and the frontend in two terminals.

1. Get the repository from GitHub. The README gives no clone command.
2. In the backend folder, write your keys to .env, install with Poetry and start uvicorn.
3. In a second terminal, install the frontend with pnpm and start it.
4. Open http://localhost:5173.

The README’s backend block, run from the repository’s root folder. Write only the key lines you have a key for, and put your real key in place of each placeholder.

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
echo "GEMINI_API_KEY=your-key" >> .env
echo "REPLICATE_API_KEY=r8_your-key" >> .env
poetry install
# Install the Chromium browser used by the screenshot preview tool.
# On Linux, use `poetry run playwright install --with-deps chromium` to also
# install the required system libraries (needs sudo/apt).
poetry run playwright install chromium
poetry env activate
# run the printed command, e.g. source /path/to/venv/bin/activate
poetry run uvicorn main:app --reload --port 7001

The frontend block, also from the root folder, in a second terminal.

cd frontend
pnpm install
pnpm dev

How to use it

Open http://localhost:5173. The README gives no click-by-click guide to the app. It says you can add your OpenAI, Anthropic and Gemini keys in the settings dialog, behind the gear icon, and that the same dialog shows whether screenshot preview works on your backend. The repository’s description says what the app is for: drop in a screenshot and convert it to clean code.

Example

You have a screenshot of a page and want its code. Of the routes you run yourself, Docker has the fewest steps. From the repository’s root folder, with your real OpenAI key in place of the placeholder:

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

Open http://localhost:5173 and give the app your screenshot. The README says you can’t develop the app with this setup, because file changes won’t trigger a rebuild. Its examples show a NYTimes page, an Instagram page and a Hacker News page.

For newcomers and experts

If you are new. A model reads your image and writes the code. screenshot-to-code is the app around that step, and it includes no model. You add a key from a provider such as OpenAI, Anthropic or Gemini. The Troubleshooting page, written for GPT-4 Vision access, says you have to buy some credits (the minimum is $5) and reach Tier 1. Check OpenAI’s own pages for what your account needs today. The sources do not give the other providers’ prices. A key is a long secret string tied to your account, so keep it out of anything you share. The .env file is a plain text file of KEY=value lines: in the backend folder for the local route, and in the repository’s root folder for the Docker route. Start with one key and one screenshot.

For experts. The backend is a FastAPI app served by uvicorn on port 7001, with --reload in the README’s command. The frontend reaches it through VITE_WS_BACKEND_URL, which frontend/.env.example sets to ws://127.0.0.1:7001, and through VITE_HTTP_BACKEND_URL. Set both in frontend/.env.local when the backend runs elsewhere.

With more keys the app picks a stronger mix of models per variant. With one key it uses that provider’s models only. Gemini powers asset extraction, which reuses the real logos and images from your screenshot. Without a Replicate key, the edit_images and remove_backgrounds tools are unavailable.

For an OpenAI proxy, set OPENAI_BASE_URL in backend/.env or in the settings dialog, with v1 in the path. The README says Ollama models can run it but are not recommended because of poor results, and links an issue comment for the steps.

Good to know

Your screenshots go from the backend to the model providers whose keys you add.

• Keys: an OpenAI key saved in the settings dialog is, in the Troubleshooting page’s words, “only stored in your browser”. The Replicate key cannot be set in the settings dialog: the README says “Replicate must be configured in backend/.env as REPLICATE_API_KEY”
• Usage data: the README does not say whether the app sends any. The backend’s pyproject.toml lists langfuse, and the README does not explain it
• The hosted app: the Troubleshooting page says “If you’re looking to use the hosted version, we recommend getting a paid subscription on screenshottocode.com”. The kit did not read the hosted app’s own pages, so it gives no price, terms or what it does with your screenshots
• Models: the README names models in two places and the two lists differ. Model names change fast, so read its current list
• Docker: file changes do not trigger a rebuild, so this route is for running the app, not developing it
• Platforms: the README gives no macOS step. Its one Windows item: if you see UTF-8 errors when running the backend, open the .env file with Notepad++, then go to Encoding and select UTF-8
• Versions: the README describes the main branch. The kit read it on 3 November 2026
• Support: the Troubleshooting page says support covers the open source version only, since the hosted version has no debugging logs
• Removal: the README gives no update or uninstall steps
• License: MIT. The LICENSE file reads “Copyright (c) 2023 Abi Raja”