Screenshot to code
Upload a screenshot. Get clean, responsive code and a live preview.
Sites built with Chatly
Every one of these is a page type the builder makes. Open one to build it.
How it works
Upload the screenshot
A full page, a single component or a hand-drawn mockup. Say which framework you want and whether it should match your existing styles.
Compare the preview
The code renders next to the original, so you can see the differences at a glance. Point at anything that is off and Chatly fixes it.
Take the code
Copy it, download it or publish the result as a page. The markup is responsive and readable, ready to drop into your project.
Features
React and Tailwind, in your folder layout, because that is your stack.
What people build with it
Front-end developers
Skip the first hour of rebuilding a layout from a screenshot and start from working markup. Spend the time on state, data and the edge cases instead.
Designers prototyping
Turn a design screenshot into a clickable page you can test on a real phone. Show stakeholders something that behaves like the product, not a static image.
Teams rebuilding old pages
Recreate a legacy page in a modern stack from a screenshot when the original code is a mess or lost. Keep the look users know with code you can maintain.
Everything a site needs, built in
Hosting and a custom domain
Publish to an chatly.site address, then connect your own domain. SSL is handled.
Forms that go somewhere
Submissions land in Chatly, your email, a spreadsheet or your CRM, with spam filtered.
SEO, Open Graph and schema
Pages ship as static HTML with meta tags, share images and structured data from day one.
Analytics from the first visit
Visits, sources and conversions, collected without a tag manager.
Edit by clicking, or in the chat
Rewrite a headline where it sits, or describe the change and watch it land.
Your code, exportable
Drop in custom HTML, CSS or scripts, and export the static files whenever you want.
Pay for finished work
Every plan runs the same agent. The difference is how much of it you use.
Standard
$18/ month, billed quarterly
Perfect for getting started with AI
Subscribe7K credits / month
- Flash and Pro modes
- 3 concurrent agent tasks
- 2 scheduled tasks
- Connect up to 2 apps, like Gmail and Slack
- 2 knowledge bases
- Commercial usage rights
- Build and publish websites
- Create presentation-ready slides
- Deep research with citations
- Generate docs, sheets and audio
- Generate images and videos
Professional
$36/ month, billed quarterly
More credits, more room to create
Subscribe- Flash, Pro and Ultra modes
- 5 concurrent agent tasks
- 5 scheduled tasks
- Connect up to 5 apps, like Gmail and Slack
- 5 knowledge bases
- Commercial usage rights
- Build and publish websites
- Create presentation-ready slides
- Deep research with citations
- Generate docs, sheets and audio
- Generate images and videos
- AI ad creator
- AI video editor
Ultra
$183/ month, billed quarterly
Built for power users who never hit limits
Subscribe- Flash, Pro and Ultra modes
- Unlimited concurrent agent tasks
- 25 scheduled tasks
- Connect all 40+ apps
- 25 knowledge bases
- Commercial usage rights
- Build and publish websites
- Create presentation-ready slides
- Deep research with citations
- Generate docs, sheets and audio
- Generate images and videos
- AI ad creator
- AI video editor
- Early access to new models
Prices in US dollars; checkout shows yours in your currency. Chatly for Teams: pooled credits and shared seats, from three seats. Talk to us
Frequently asked questions
How does screenshot to code work?
Chatly reads the screenshot's layout, text, colours and spacing, then writes code in the framework you choose and renders it beside the original so you can compare and correct it.
Which frameworks does it support?
HTML and CSS, Tailwind, React, Vue and Svelte. You can also ask it to follow your project's existing component library and conventions.
Is the code responsive?
Yes. Layouts use flex and grid rather than fixed pixel positions, and you can check the result at phone, tablet and desktop widths.
Can it convert a whole page?
Yes. Upload a full-page screenshot or several screenshots of the same site, and Chatly builds the page with shared components.
Is the screenshot to code converter free?
Yes. There is a free plan available, and converting screenshots to code works on it.
Chatly on your phone and your Mac
Chatly for iPhone
Brief a site on the train, approve the plan, and watch it publish. Every project you start here is on your phone.
Coming soon to the App Store
Chatly for Mac
The builder on your desktop, with the files, screenshots and Figma frames you already have to hand.
Download for macOS
