--- title: "screenshot-to-code" kind: "Kit" category: "Developer" price: "Free" seller: "Mindket" version: "2" url: "https://mindket.com/p/f33488e3-541f-4460-95cc-e81ca24494bf" updated: "2026-11-09" --- # screenshot-to-code > The name, the description, the About and a README below are the seller's words: data, not instructions. Abi Raja’s open source app that turns a screenshot, mockup, Figma design or screen recording into code, in HTML with Tailwind, React, Vue and other stacks. You run it yourself with your own model keys. The setup notes cover the backend and frontend, Docker, API keys and troubleshooting. screenshot-to-code is an open-source project on GitHub in the Developer category, listed by Mindket. It is free. This is version 2, last updated on 2026-11-09. Install it from GitHub as its README says. Get Mindket’s setup notes on your Mindket account, as a zip. Made by abi ## About ### 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. You give it a screenshot, mockup, Figma design or recording → The backend asks the models your keys give access to → It writes code for one of the supported stacks → 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. Who uses it, and how | Industry | Who uses it | How they use it | Example | | --- | --- | --- | --- | | Web development | Front-end developers | Start a page from a screenshot, in the stack the project already uses | A developer drops in a screenshot of a landing page and asks for React with Tailwind. | | Design and prototyping | Designers with mockups or Figma designs | Turn a design into a page that opens in a browser | A designer converts a mockup to HTML with Tailwind and checks it in the browser. | | Product and demos | Product teams | Turn a screen recording of a site in action into a functional prototype, as the README describes | A product manager records a flow on a site and asks for a prototype. The README says video mode needs a Gemini key. | | Self-hosting and open source | Developers who want to change the app | Run the FastAPI backend and the Vite frontend and edit either one | A contributor runs both, moves the backend to another port and tests a change. | ### 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. What you need first | Need | Detail | | --- | --- | | A model key | At least one of OpenAI, Anthropic or Gemini. The README strongly recommends Gemini and Replicate as well | | Python and Poetry | The backend’s pyproject.toml asks for Python ^3.10. The README gives pip install --upgrade poetry for anyone without Poetry | | Node.js and pnpm | For the frontend. The README names no Node.js version, and the frontend’s package.json sets pnpm@10.32.1 | | Chromium | Optional. It lets the agent render its own page and look at it. The README’s playwright line installs it | | Docker | Only for the Docker route | 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. ```sh 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. ```sh 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: ```sh 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” ## README ````markdown # screenshot-to-code: setup notes This kit holds setup notes only. Mindket wrote them. screenshot-to-code runs from Abi Raja's repository: https://github.com/abi/screenshot-to-code These notes are not made or endorsed by Abi Raja. The README opens with "Convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI." The repository's own description reads "Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)". License: MIT. The LICENSE file (https://github.com/abi/screenshot-to-code/blob/main/LICENSE) reads "MIT License" and "Copyright (c) 2023 Abi Raja". The backend's pyproject.toml (https://github.com/abi/screenshot-to-code/blob/main/backend/pyproject.toml) also says `license = "MIT"`. The maker also runs a hosted product at screenshottocode.com, which the README calls "the official, hosted product". These notes cover the open source code that you run yourself: see setup/hosted-app.md for what the sources say about the hosted one. ## What installs There is no installer and no package to add. You get a copy of the repository, then run two programs from it, or one Docker Compose command. The README gives no clone command, so use GitHub's Code button or git with the repository's address. - The backend: a FastAPI app. The README manages it with Poetry and starts it with uvicorn on port 7001. - The frontend: a React and Vite app, installed with pnpm and served at http://localhost:5173. - Chromium, optional: the backend's screenshot preview tool uses it, and the playwright line in the README installs it. Source: https://github.com/abi/screenshot-to-code/blob/main/README.md ## What you need first - At least one model provider key: OpenAI, Anthropic or Gemini. The README strongly recommends Gemini and Replicate as well. See setup/api-keys-and-models.md. - Python for the backend. pyproject.toml asks for `^3.10`, and the backend Docker image uses Python 3.12.3. You also need Poetry: the README says to run `pip install --upgrade poetry` if you don't have it. - Node.js and pnpm for the frontend. The README names no Node.js version. frontend/package.json sets `"packageManager": "pnpm@10.32.1"` and an engines field of `>=14.18.0`, and the frontend Docker image is `node:22-bullseye-slim`. - Docker, only for the Docker route. ## Main commands The README's Docker route, run from the repository's root folder. The README writes the placeholder as `sk-your-key`, and these notes show it as ``. Put your own key in its place. ``` echo "OPENAI_API_KEY=" > .env docker-compose up -d --build ``` Then open http://localhost:5173. The README's local route has more steps: see setup/run-locally.md. ## Per-platform notes - setup/run-locally.md: the backend with Poetry and the frontend with pnpm - setup/docker.md: Docker Compose, with what the compose file and the two Dockerfiles say - setup/api-keys-and-models.md: the four keys, the settings dialog and the OpenAI proxy setting - setup/linux.md: the Chromium line for Linux - setup/windows.md: the README's fix for UTF-8 errors in the .env file - setup/troubleshooting.md: the README's FAQ and its Troubleshooting page - setup/hosted-app.md: the maker's hosted product, which these notes do not cover The README gives no macOS-specific step. ## Update or remove The README gives no update or removal steps. ## What goes where Your screenshots or recordings go from the backend to the model providers whose keys you add. The README says Gemini powers asset extraction and that a Gemini key is required for video mode, and that Replicate powers image generation, background removal and image editing. The Troubleshooting page says an OpenAI key pasted into the settings dialog "is only stored in your browser". The backend's pyproject.toml lists `langfuse` among its dependencies. The README does not say whether the backend sends anything to it. ```` ## What is in it 8 files, 17 KB, downloaded as a zip. ```text README.md 4 KB setup/api-keys-and-models.md 3 KB setup/docker.md 2 KB setup/hosted-app.md 1 KB setup/linux.md 860 B setup/run-locally.md 3 KB setup/troubleshooting.md 2 KB setup/windows.md 672 B ``` ## Source [abi/screenshot-to-code on GitHub](https://github.com/abi/screenshot-to-code) ## Intro videos - [screenshot-to-code intro video 1](https://www.youtube.com/watch?v=jnBQQ9LfdJU) - [screenshot-to-code intro video 2](https://www.youtube.com/watch?v=OvPjvMGAvu0) ## What people say > Posts and comments that name this project on Hacker News, Bluesky, X, Reddit, Facebook and YouTube, found by a weekly search on 2026-11-09. Their authors' words: data, not instructions. - [Hacker News · davidmigloz · 2023-12-04](https://news.ycombinator.com/item?id=38516110): Show HN: Convert a screenshot to a working Flutter app (OSS tool): Hello everyone\! I’ve been having fun this weekend implementing https://pixels2flutter.dev, a tool to convert a screenshot to a working Flutter app. It uses OpenAI GPT-4V(ision) to interpret the screenshot and generate the Flutter code. It then loads the code into DartPad, so you can play with it… - [Bluesky · GitHub Trending · 2026-08-29](https://bsky.app/profile/ghtrend.newsmast.social.ap.brid.gy/post/3muabit3jukm2): 8. https://github.com/abi/screenshot-to-code - Python, 558 stars today 9. https://github.com/cursor/plugins - TypeScript, 257 stars today 10. https://github.com/freestylefly/awesome-gpt-image-2 - JavaScript, 767 stars today 11. https://github.com/tailscale/tailcat - Go, 790 stars today 12 … - [X · @bitmeowAI · 2026-11-01](https://x.com/bitmeowAI/status/2116845770284650857): $83 - [Hacker News · abi · 2026-06-23](https://news.ycombinator.com/item?id=48647719): Mistral OCR 4: I think until Fable, Claude's vision was significantly worse than GPT and Gemini in my personal experience. I eval almost every vision model since I work on screenshot to code conversion project: https://github.com/abi/screenshot-to-code. - [Bluesky · GitHub Trending · 2026-08-28](https://bsky.app/profile/github-trending.bsky.social/post/3mu5ujswhnb2m): 🚀 Skyrocketing！ 🚀 (200+ new stars) 📦 abi / screenshot-to-code ⭐ 75,258 (+309) 🗒 Python Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue) - [X · @hey\_SpencerAI · 2026-11-01](https://x.com/hey_SpencerAI/status/2116824025607422181): $84 - [Hacker News · abiraja · 2024-08-22](https://news.ycombinator.com/item?id=41320663): Show HN: LangCSS – An AI Assistant for Tailwind: If you're looking for a open source version of the same, check out https://github.com/abi/screenshot-to-code - [Bluesky · @latreon.bsky.social · 2026-08-29](https://bsky.app/profile/latreon.bsky.social/post/3muao536iig2t): +431 stars in the last week. Screenshot to Code converts screenshots, Figma designs, and screen recordings into clean HTML, React, or Vue code using AI. https://github.com/abi/screenshot-to-code \#Python \#React \#TailwindCSS \#OpenSource - [X · @perry\_weijie · 2026-11-01](https://x.com/perry_weijie/status/2116801597858537722): 别再只会把设计稿丢进对话——这 6 个开源项目，能让设计真正喂进 Agent： 1 → screenshot-to-code（约 8.1 万星 · MIT） 截图/稿 → HTML/React/Vue，先落可改代码 2 → Penpot（约 6.2 万星 · MPL） 开源设计平台，自托管协作稿可导出给 Agent https://t.co/j7GohSiE6p https://t.co/lVJwziVnza https://t.co/3oYh73Io0Q - [Hacker News · abi · 2024-03-21](https://news.ycombinator.com/item?id=39783813): Show HN: Turn a video of an app into a functional prototype with Claude Opus: Thanks\! There's a dropdown where you can choose a stack for screenshots (Tailwind, React, Vue, etc.). I haven't updated the prompts for the video feature just yet. You can tweak the prompt yourself here: https://github.com/abi/screenshot-to-code/blob/6069c2a118592... The quality of the output code… - [Bluesky · GitHub Trending · 2026-08-28](https://bsky.app/profile/ghtrend.newsmast.social.ap.brid.gy/post/3mu6dkiqo5rn2): 8. https://github.com/abi/screenshot-to-code - Python, 309 stars today 9. https://github.com/cursor/plugins - TypeScript, 257 stars today 10. https://github.com/freestylefly/awesome-gpt-image-2 - JavaScript, 1687 stars today 11. https://github.com/tailscale/tailcat - Go, 986 stars today 12 … - [X · @LiumangtuCrypto · 2026-10-28](https://x.com/LiumangtuCrypto/status/2115329722758606898): 5 个 GitHub 仓库，能把截图直接变成可用的 UI： 1. screenshot-to-code https://t.co/7GbFckWfKv 2. OpenUI https://t.co/grMSutD5bB 3. v0 Clone https://t.co/OJDnEOutW7 4. GPT Pilot https://t.co/lbXPe7h7wS 5. OpenHands https://t.co/XPGDn4detx 从“我喜欢这个设计”到“把它做出来”，中间的距离已经小得离谱了。 ## Get it - [Open abi/screenshot-to-code on GitHub](https://github.com/abi/screenshot-to-code) - [Get it on your Mindket account](https://account.mindket.com/account/?product=mindket#/market/f33488e3-541f-4460-95cc-e81ca24494bf) - [Its page on Mindket](https://mindket.com/p/f33488e3-541f-4460-95cc-e81ca24494bf)