Front-end developers wanting a quick coded first draft from a design; self-hosting is free if you bring your own model API keys.
Kenning's take
What it does
Screenshot to Code takes a screenshot, Figma design or screen recording and uses AI models from OpenAI, Anthropic or Google to write matching front-end code. It outputs HTML with Tailwind or CSS, React, Vue, Bootstrap or Ionic. It is MIT-licensed on GitHub with a hosted version at screenshottocode.com.
- Outputs HTML, Tailwind, React, Vue, Bootstrap and Ionic
- Works from screenshots, mockups and screen recordings
- Choice of GPT, Claude or Gemini models
- Reuses logos and images from the screenshot
- Self-host with your own API keys
Who it suits. Front-end developers and designers who want a quick coded starting point from a design.
Key facts
- Category
- Developer tools
- Made by
- Abi Raja
- Released
- 14 November 2023
- How to get it
- hosted app at screenshottocode.com, or run locally from GitHub with your own model API keys
- Works on
- Web, Self-hosted
- Free plan
- free open-source version on GitHub
FAQ
Is Screenshot to Code free?
The open-source version is free under the MIT licence, though you pay for the AI model API keys you use.
What frameworks does Screenshot to Code support?
HTML with Tailwind or CSS, React, Vue, Bootstrap and Ionic.
Facts from the maker's own pages and the sources listed. Checked 2026-10-11.
Similar tools
Claude Keychain
A free Mac menu bar app that keeps API keys in the macOS Keychain so Claude Code can use them without seeing them.
OpenAI Agent Builder
OpenAI's visual canvas for building multi-agent workflows, being withdrawn on 30 November 2026.
ElevenLabs Agent Workflows
Visual editor in ElevenLabs' agent platform for designing branching conversation flows for voice and chat agents.
AgentOps
Monitoring and debugging platform that records what AI agents do, what they cost and where they fail.