# 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.

- Type: Tool
- Targets: Website
- Category: Website analysis tools
- Relationship: Foundation tool
- Sources reviewed: 2026-10-17
- Added to the catalog: 2026-10-17
- Original resource: <https://github.com/abi/screenshot-to-code>
- Primary source: <https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/README.md>
- Catalog page: <https://awesomerea.org/resources/screenshot-to-code/>
- Record JSON: <https://awesomerea.org/resources/screenshot-to-code/record.json>
- Chinese version: [简体中文](https://awesomerea.org/zh/resources/screenshot-to-code/index.md)

## Requirements & limits

- 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.
- 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.

## Primary sources

1. <https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/README.md>
2. <https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/LICENSE>
3. <https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/backend/pyproject.toml>
4. <https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/frontend/package.json>

## More in Websites

- [Dembrandt](https://awesomerea.org/resources/dembrandt/index.md) · Tool
- [shuji](https://awesomerea.org/resources/shuji/index.md) · Tool
- [Obfuscator.io Deobfuscator](https://awesomerea.org/resources/obfuscator-io-deobfuscator/index.md) · Tool
- [javascript-deobfuscator](https://awesomerea.org/resources/ben-sb-javascript-deobfuscator/index.md) · Tool
- [mitmproxy2swagger](https://awesomerea.org/resources/mitmproxy2swagger/index.md) · Tool
- [JPEXS Free Flash Decompiler (FFDec)](https://awesomerea.org/resources/jpexs-decompiler/index.md) · Tool

## About this entry

The description was reviewed against primary sources.
Original editorial content: MIT. Linked projects, papers and assets retain their own rights and licenses.