Freedom251 › AI Screenshot-to-Code Tools
Screenshot to Code
What Screenshot to Code is
Screenshot to Code uses AI to turn visual references and text into code. Inputs include screenshots, mockups, Figma designs, written prompts and screen recordings; a recording of a website in action can become a functional prototype. Listed code outputs include HTML with Tailwind, HTML with CSS, React with Tailwind, Vue with Tailwind, Bootstrap and Ionic with Tailwind. The service is available on the web, and the open-source project also provides local and Docker setup instructions. Running it locally requires frontend and backend setup plus an API key from OpenAI, Anthropic or Gemini. A Replicate key enables image editing, background removal and Replicate-backed image generation; without it, image editing and background removal are unavailable. There is no free plan. Hobby costs $15 a month for 100 credits, while Pro costs $40 a month for 500 credits. Each creation from a screenshot or text and each additional edit uses one credit. Credits reset on the first of each month and do not roll over. Both plans include chat support; purchases are final and refunds are not offered.
Who it suits
Screenshot to Code may suit designers or developers who want to turn visual references, Figma designs or recordings into a code prototype. Its self-hosted setup is for users able to configure the frontend, backend and required API keys.
What it does well
- Accepts screenshots, Figma designs and screen recordings
- Outputs include React, Vue and Bootstrap options
- Local and Docker setup instructions are provided
- Both paid plans include chat support
What to know first
- No free plan
- Hobby costs $15 a month
- Credits reset monthly and do not roll over
- Purchases are final; refunds are not offered
Limits
Hobby provides 100 credits per month and Pro provides 500. Each creation from a screenshot or text and each additional edit consumes one credit; monthly credits reset on the first and do not roll over.
Plans
| Plan | Billed and limits | Price |
|---|---|---|
| Hobby | $15 /mo · 100 credits / mo · Chat support · 1 credit per generation or edit | $15 a month |
| Pro | $40 /mo · 500 credits / mo · Chat support · 1 credit per generation or edit | $40 a month |
As screenshottocode.com lists them, read 8 Oct 2026. The maker's own page has the final word.
Getting started
- Open the Screenshot to Code website or use its self-hosted project
- Choose web use or follow the local and Docker setup instructions
- For local use, configure the frontend and backend
- Provide an OpenAI, Anthropic, or Gemini model-provider key
- Add a Replicate key if image editing, background removal, or Replicate generation is needed
- Select the Hobby or Pro paid plan
Verdict
Screenshot to Code supports several visual inputs and code output options, with web access and a self-hosted route. Check monthly credit limits and the required API keys before choosing a setup.
Questions
Does Screenshot to Code have a free plan?
No. The listed plans are Hobby at $15 a month and Pro at $40 a month.
Which inputs can it convert?
It accepts screenshots, mockups, Figma designs, text, and screen recordings.
Which code stacks are listed?
Outputs include HTML with Tailwind, HTML with CSS, React with Tailwind, Vue with Tailwind, Bootstrap, and Ionic with Tailwind.
Can I self-host it?
Yes. The open-source project provides local and Docker setup instructions, with frontend, backend, and model-provider configuration required.
What payment methods are listed?
Major credit cards, Alipay, Amazon Pay, and Cash App Pay are listed, with availability varying by country.
Facts from Screenshot to Code's own pages
- AI providers
- Local setup requires at least one model provider key from OpenAI, Anthropic, or Gemini. · github.com, 8 Oct 2026
- Cancellation
- Plans can be canceled at any time and remain active until the end of the billing cycle. · screenshottocode.com, 8 Oct 2026
- Code outputs
- Supported stacks listed by the project include HTML with Tailwind, HTML with CSS, React with Tailwind, Vue with Tailwind, Bootstrap, and Ionic with Tailwind. · github.com, 8 Oct 2026
- Credit renewal
- Credits reset at the beginning of each month, on the 1st, and do not roll over. · screenshottocode.com, 8 Oct 2026
- Headquarters
- New York City, United States · screenshottocode.com, 28 Sept 2026
- Image tools
- A Replicate key enables image editing, background removal, and Replicate-backed image generation; without it, image editing and background removal are unavailable. · github.com, 8 Oct 2026
- Payment methods
- The pricing page lists major credit cards, Alipay, Amazon Pay, and Cash App Pay as accepted methods, with availability varying by country. · screenshottocode.com, 8 Oct 2026
- Pricing credits
- Each creation from a screenshot or text, and each additional edit, consumes one credit. · screenshottocode.com, 8 Oct 2026
- Purpose
- It converts screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI. · github.com, 8 Oct 2026
- Refunds
- The pricing page says purchases are final and refunds are not offered. · screenshottocode.com, 8 Oct 2026
- Screen recordings
- The project supports turning a screen recording of a website in action into a functional prototype. · github.com, 8 Oct 2026
- Self-hosting
- The open-source project provides local setup and Docker instructions, and says local use requires API keys plus frontend and backend setup. · github.com, 8 Oct 2026
- Support
- The pricing page includes chat support with both listed plans. · screenshottocode.com, 8 Oct 2026
Where Screenshot to Code stands on Freedom251
- AI Screenshot-to-Code Tools#21 of 24