Tool
screenshot-to-code
Generate HTML/CSS, Tailwind, React, Vue, Bootstrap or Ionic front-end code from screenshots, mockups, Figma designs or screen recordings with multimodal models; an optional headless-browser preview lets the model check its rendered output. The result is a visual reconstruction of the interface, not recovered original source or backend behavior.
Requirements and limitations
- Self-host the MIT-licensed repository: a FastAPI backend managed with Poetry (Python ^3.10) and a React/Vite frontend run with pnpm, or both through Docker Compose. No GitHub release or tag existed at review. The hosted screenshottocode.com service is a separate product and is not what this entry reviews.
- At least one OpenAI, Anthropic or Gemini API key is required, and inputs are processed by the selected providers. Gemini is required for video mode and handles asset extraction; a Replicate key is optional but recommended upstream for image generation, editing and background removal. The self-check preview needs Playwright's Chromium.
- The README reports no fidelity or accuracy figures. Generated code needs review and cannot recover backend logic, APIs or data that the input does not show.
About this entry
- Type
- Tool
- Category
- Website analysis tools
- Relationship
- Foundation tool
- Targets
- Website
Sources reviewed
The description was reviewed against primary sources. This does not establish runtime testing, security auditing or verified compatibility.
Primary sources
- https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/README.md
- https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/LICENSE
- https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/backend/pyproject.toml
- https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/frontend/package.json