Ditto turns any website into real, editable code

2 months ago

Give it any website's address. It hands you back the front end as real, editable code. This is ditto. Its trick is refusing to use AI.

Ask

Ask about this presentation

Answers are generated from this presentation.

Chapters

  1. 0:00Ditto turns any website into real, editable code
  2. 0:07A URL in. A real project out.
  3. 0:19It doesn't guess. It looks.
  4. 0:30Capture what the browser paints. Rebuild it by rule.
  5. 0:46It copies the skin, not the brains.
  6. 1:00Free, MIT, and three ways to run it.
  7. 1:14ditto
Show transcript

Ditto turns any website into real, editable code

Point it at any site. Get clean, editable code back.
Developer Tools Open Source Website → Code

Give it any website's address. It hands you back the front end as real, editable code. This is ditto. Its trick is refusing to use AI.

A URL in. A real project out.

ditto.site

Point it at a public URL and you get back a real project. Components, routes, and styles, as a Next.js or Vite app in TypeScript. Real files you can open and edit, not a flat page dump. Rebuild a site you own, or migrate your own app.

It doesn't guess. It looks.

They guess
The AI tools that write code from a prompt
Point an AI at the page and hope. It can invent a button that was never on the page.
category context
It looks
ditto
“same frozen capture in, byte-stable app out.”
README · ion-design/ditto.site

Every tool that turns a page into code points an AI at it and hopes. It can invent a button that was never on the page. ditto does the opposite. It doesn't guess, it looks. Same page in, the same code out, down to the byte.

Capture what the browser paints. Rebuild it by rule.

URL
→
browser capture
→
normalized render IR
→
deterministic inference
→
app generation
→
asset materialization
→
optional validation
Capture records DOM, computed styles, layout boxes, CSS, fonts, assets, screenshots, interaction states, and reproducible motion.
README · ion-design/ditto.site

Here's how. It opens the page in a real browser and records everything it renders. The markup, the styles, the layout, the fonts, even the motion. Think a 3D scan, not a description from memory. Then, with fixed rules and no AI, it turns the repeated pieces into components and writes out the routes. So what about everything you can't see?

It copies the skin, not the brains.

✓ The skin: comes across
  • markup
  • styles
  • components
  • sections
  • routes
✗ The brains: not replayed
  • app logic
  • auth
  • payments
  • personalization
  • third-party JavaScript

“Unsupported app logic, auth, payments, personalization, and arbitrary third-party JavaScript are not replayed.”

README · ion-design/ditto.site

So, that word: clone. What does it really copy? Everything you can see. And nothing you can't. App logic, sign-in, payments, and other sites' scripts don't carry over. The maker says so first. You don't get a working app. You get a faithful, real-code starting point to build on.

Free, MIT, and three ways to run it.

Open source
Self-host · MIT
Run the whole pipeline on your own machine.
REST API
Hosted
POST a URL, poll the job, pull the project.
MCP server
For your agents
Wire it into Claude, Cursor, or your builder loop.
MIT · TypeScript · hundreds of stars · created about three weeks ago
Built by the team at ion.design.
ditto.site · GitHub

It's free, MIT licensed, and it's yours. Three ways to run it: self-host the command-line tool, call the hosted API, or wire it into your coding agent, like Claude or Cursor. Hundreds of stars already, and it's only three weeks old. Built by the team at ion.design.

ditto

For the front end, it's the real thing,
in real code.
ditto.site

It won't copy the brains. But for the front end, it's the real thing, in real code, and it's free.