screenshot-to-code: Turn screenshots and Figma designs into React/Vue code
For frontend developers, it turns screenshots, Figma, and recordings into React/Vue code while reusing assets and generating images.
GitHub abi/screenshot-to-code Updated 2026-09-04 Branch main Stars 77.9K Forks 9.5K
React Vue Tailwind FastAPI Gemini Screenshot-to-code Self-hosting

🧭 Decision Guide

Try it if you

  • You need to quickly produce a React + Tailwind or Vue + Tailwind prototype from a screenshot or Figma design.
    The README's “Supported stacks” section lists React + Tailwind and Vue + Tailwind.
  • You want to run locally, customize, and self-host the React/Vite frontend and FastAPI backend.
    The README's “Getting Started” section says local running is best for customization, self-hosting, or contribution, and specifies React/Vite and FastAPI.
  • You can provide GEMINI_API_KEY and need real logos or image assets from the screenshot.
    The README's “API keys” section says Gemini handles asset extraction and is strongly recommended for accuracy.
  • You want to convert a website screen recording into a functional prototype.
    The README explicitly says Screenshot to Code can turn a recording of a website in action into a functional prototype.

Skip it if you

  • You are not prepared to provide any OpenAI, Anthropic, or Gemini API key.
    The README's “API keys” section requires at least one model-provider key.
  • You plan to use Ollama while expecting high-quality code-generation results.
    The README explicitly says Ollama is not recommended because of poor-quality results.
  • Your target framework is not among the stacks listed in the README: HTML, React, Vue, Bootstrap, or Ionic.
    The README's “Supported stacks” section lists only HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, and Ionic + Tailwind.
  • You use Docker for development and require file edits to trigger automatic rebuilds.
    The README's “Docker” section says this setup is not for development because file changes do not trigger a rebuild.

Requirements

  • Local execution requires at least one OpenAI, Anthropic, or Gemini model-provider API key.
  • The local architecture includes a React/Vite frontend and a FastAPI backend.
  • The backend uses Poetry and runs poetry install.
  • The frontend uses pnpm and runs pnpm install.
  • Chromium is installed through Playwright; on Linux, use poetry run playwright install --with-deps chromium.
  • REPLICATE_API_KEY is required for image editing, background removal, or Replicate-backed image generation.

First step (verbatim from README)

cd backend

Watch out

  • REPLICATE_API_KEY must be written to backend/.env and cannot be configured only through the frontend Settings dialog.
    The README says Replicate must be configured in backend/.env.
  • Without Chromium, the screenshot preview tool for generated pages does not run.
    The README says the app skips the tool when Chromium is missing and shows availability in Settings.
  • If you change the backend port, also update VITE_WS_BACKEND_URL.
    The README requires updating VITE_WS_BACKEND_URL in frontend/.env.local when using another backend port.
  • Docker's docker-compose up -d --build is unsuitable for development requiring immediate file changes.
    The README states that file changes do not trigger a rebuild.

Alternatives

  • Official hosted app at screenshottocode.com:When you want the fastest way to try Screenshot to Code without configuring a local frontend, backend, and API environment.
    Getting Started

Not stated in the README

  • The README does not specify actual costs, rate limits, or context limits for the models.
  • The README does not provide screenshot-to-code accuracy, generation latency, or quality comparisons across models.
  • The project data lists the main-language distribution and latest update as Unknown and recent commits as 0, so maintenance activity cannot be determined from these fields.
  • The README does not describe production security configuration, authentication, or multi-user support.
  • The README does not specify supported Node.js, Python, Poetry, or pnpm versions.

💡 Deep Analysis

6
Yes I need to run a React/Vite frontend and FastAPI backend in my own environment, with OpenAI, Anthropic, Gemini, and Replicate keys controlled through environment variables. Is this project suitable for self-hosting?
For: An open-source maintainer who wants self-hosting and control over model keys while using Python/Poetry and Node/pnpm

Yes, but only if you are prepared to maintain external model services, Python/Node dependencies, and the browser runtime.

  • The README describes local execution as suitable for customization, self-hosting, or contribution, and identifies the architecture as a React/Vite frontend with a FastAPI backend.
  • At least one OpenAI, Anthropic, or Gemini key is required. Gemini and Replicate are strongly recommended for asset extraction, image editing, background removal, and better screenshot accuracy.
  • The project provides Poetry, pnpm, and Docker paths; Docker can build the application with docker-compose and expose it at port 5173.
  • This is not a fully offline deployment: the README provides no equivalent local-model path and explicitly says Ollama is not recommended because of poor-quality results.
  • Getting Started: “Run locally: best if you want to customize, self-host, or contribute.”
  • Getting Started: “The app has a React/Vite frontend and a FastAPI backend.”
  • Docker: “docker-compose up -d --build”
  • API keys: “You need at least one model provider key” and “Ollama ... not recommended due to poor-quality results”
docker-compose up -d --build
Not stated in the README:The README does not describe production authentication, tenant isolation, key rotation, or data-retention policies.;The README does not provide API-cost estimates, concurrency limits, or a task-queue design.
It depends I will run the FastAPI backend on Linux with Poetry and want the model to render generated pages in Chromium for visual inspection. Does the local setup support this loop?
For: A self-hosting developer running the FastAPI backend on Linux who wants Playwright/Chromium screenshot preview enabled

It depends. The project supports this loop, but screenshot preview is enabled only when Chromium and the required Linux dependencies are installed correctly.

  • The README describes screenshot preview as optional: the agent can render the generated page in a headless browser and visually inspect its work.
  • The normal command is poetry run playwright install chromium; on Linux, the README gives poetry run playwright install --with-deps chromium, which requires sudo/apt for system libraries.
  • If Chromium is missing, the application skips the tool rather than failing outright, and the frontend Settings dialog reports whether the backend can provide screenshot preview.
  • Therefore, Poetry and FastAPI alone do not guarantee visual feedback; container permissions and system dependencies remain decisive.
  • Getting Started: “Screenshot preview (optional) lets the agent render its own generated page in a headless browser and visually check its work.”
  • README command: `poetry run playwright install --with-deps chromium`
  • README: “If Chromium is missing, the app just skips the tool”
poetry run playwright install --with-deps chromium
Not stated in the README:The README does not list the complete Chromium system dependencies for operating systems other than Linux.;The README does not specify how many visual-check iterations occur or how their results affect final code generation.
Yes I already use React/Vite and usually start prototypes from Figma designs and screen recordings. Can I use this project to generate React + Tailwind code and reproduce the basic interactions shown in the recording?
For: A frontend developer using React/Vite who needs to turn Figma designs and screen recordings into runnable prototypes quickly

Yes, it is suitable because React + Tailwind is explicitly supported and the input can include more than a static screenshot.

  • The “Supported stacks” section lists “React + Tailwind”, and the generated code is intended to remain editable and runnable.
  • The README says a “screen recording of a website in action” can be turned into a functional prototype, which helps represent visible state changes and interaction paths.
  • Gemini is required for video mode and can also extract real images and logos from screenshots.
  • However, a recording cannot reveal backend business logic, permissions, APIs, or unobserved error branches, so the result is better treated as a prototype than a complete implementation.
  • Supported stacks: “React + Tailwind”
  • README: “Screenshot to Code also supports taking a screen recording of a website in action and turning that into a functional prototype.”
  • API keys: “Gemini ... required for video mode”
Not stated in the README:The README does not specify maximum recording duration, file size, or frame-rate limits.;The README does not say whether generated interactions automatically connect to real APIs, state management, or form validation.
Yes I need to reuse real logos and images from screenshots instead of accepting placeholder assets. If I configure Gemini and Replicate, can this project meet that asset-reproduction constraint?
For: An independent developer recreating a website with real logos and images while relying on Gemini and Replicate for asset handling

Yes, it is suitable because Gemini and Replicate provide asset extraction and image-processing capabilities, although they do not replace copyright review.

  • The README says Gemini extracts real assets from the screenshot, with the goal of reusing the actual logos and images instead of relying only on placeholders.
  • Replicate provides image editing, background removal, and Replicate-backed image generation; without its key, edit_images and remove_backgrounds are unavailable.
  • The API-keys section strongly recommends configuring both Gemini and Replicate for better screenshot-to-code accuracy.
  • Generated assets still come from third-party services or the original visual input, and the project data indicates that copyright, trademark, and licensing boundaries must be checked separately.
  • API keys: “Gemini powers asset extraction (reusing the real logos/images from your screenshot)”
  • API keys: “Replicate powers image generation, background removal, and image editing”
  • API keys: “without it, `edit_images` and `remove_backgrounds` are unavailable”
Not stated in the README:The README does not specify supported asset formats, resolutions, or per-screenshot asset-count limits.;The README does not say whether extracted assets are automatically saved into the generated project or used only temporarily.
Yes I do not use React; I need to deliver prototypes using Bootstrap, plain HTML + CSS, or Ionic + Tailwind. Can this project save me from manually rebuilding the page structure?
For: A product designer or independent developer who needs screenshot-based prototypes in HTML/CSS, Bootstrap, or Ionic + Tailwind

Yes, it is suitable because the README explicitly lists all three target stacks and positions the project as a way to create a runnable frontend draft from visual input.

  • The supported-stack list includes HTML + CSS, Bootstrap, and Ionic + Tailwind, so React is not required.
  • The project description says it converts screenshots, mockups, and Figma designs into “clean, functional code”, rather than merely producing an image or visual description.
  • The hosted product is described as the fastest way to try the tool, which is useful for product designers or independent developers who do not want local setup first.
  • However, the README gives no quality comparison between Bootstrap, Ionic, and React outputs; complex business logic still has to be added manually.
  • Supported stacks: “HTML + CSS”, “Bootstrap”, “Ionic + Tailwind”
  • README: “Convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI.”
  • Getting Started: “Use the hosted app: the fastest way to try Screenshot to Code with no local setup.”
Not stated in the README:The README does not state whether Bootstrap and Ionic outputs include complete component-library interactions.;The README does not specify hosted-plan quotas, pricing, or input-file limits.
It depends My network cannot access the OpenAI API directly, but I still want to run the React/Vite frontend and FastAPI backend. Does this project support using an OpenAI proxy for GPT code generation?
For: A developer in a restricted network environment who uses the React/Vite frontend and needs an API proxy for OpenAI access

It depends. The README explicitly supports an OpenAI proxy, but successful use still depends on the proxy being compatible with the required API path and reachable from the deployment environment.

  • The FAQ says that users who cannot access OpenAI directly may use a VPN or set OPENAI_BASE_URL in backend/.env.
  • The proxy URL must include the v1 path, and the README gives a format such as https://xxx.xxxxx.xxx/v1; it can also be entered in the frontend settings dialog.
  • GPT-5.5 and GPT-5.4 Mini are listed among the default AI models, so the proxy changes the access route but does not solve model permissions, quotas, or compatibility automatically.
  • If only an OpenAI key is configured, the application uses that provider’s models only; Gemini or Anthropic keys add other code-generation choices.
  • FAQs: “configure the OpenAI base URL to use a proxy”
  • FAQs: “Set `OPENAI_BASE_URL` in `backend/.env` ... Make sure the URL has `v1` in the path”
  • Default AI models: “GPT-5.5 and GPT-5.4 Mini”
  • API keys: “With a single key it uses that provider's models only.”
poetry run uvicorn main:app --reload --port 7001
Not stated in the README:The README does not specify which OpenAI API endpoints, streaming protocols, or model-name mappings the proxy must support.;The README does not describe timeout, retry, rate-limit, or WebSocket configuration for proxy deployments.

✨ Highlights

  • Supports HTML, React, Vue, and Bootstrap stacks
  • Gemini 3.1 Pro can extract real assets from screenshots
  • Screen recordings can be converted into functional prototypes
  • MIT License with 77,540 GitHub stars

🔧 Engineering

  • Uses AI to turn screenshots, Figma designs, and recordings into functional code
  • Runs locally with a React/Vite frontend and FastAPI backend
  • Gemini handles asset extraction, while Replicate supports image editing

⚠️ Risks

  • Local execution requires at least one OpenAI, Anthropic, or Gemini API key
  • Without Chromium, the screenshot preview tool is skipped
  • In Docker mode, file changes do not trigger a rebuild
  • The README does not recommend Ollama and explicitly cites poor-quality results

👥 For who?

  • Frontend developers who need quick React or Vue prototypes
  • Teams that want to self-host and modify the React/Vite and FastAPI application
  • Users with Gemini or Replicate keys who value asset fidelity