Screenshot-To-Code

Screenshot to Code is an open-source tool that converts screenshots, mockups, Figma designs, and even screen recordings of a website into functional front-end code, supporting HTML+Tailwind, HTML+CSS, React+Tailwind, Vue+Tailwind, Bootstrap, and Ionic+Tailwind output. It can be used instantly through the official hosted product at screenshottocode.com, or run locally by self-hosting the React/Vite frontend and FastAPI backend. Code generation uses a mix of models depending on which API keys are configured — Gemini (also used to extract and reuse real logos/images from the source screenshot), GPT, and Claude for code generation, plus Replicate for image generation, background removal, and image editing — and the app automatically picks a stronger model mix as more provider keys are added. Turning a screen recording into a working prototype is also supported, in addition to static screenshots.