Framer AI AgentsDesign and publish professional sites with AI
ditto.site
Clone any website into clean code. Free & open source
696 followers
Clone any website into clean code. Free & open source
696 followers
Point Ditto at any public URL and get a faithful copy as clean, componentized Next.js or Vite code, in minutes. It's fully deterministic, so it's fast, cheap, and consistent. Components, tokens, interactions & hover states included. Free REST API + MCP server, open source.
ion design
ion design
@ridhwikvinod Try it out! It's free anyway :) and log any issues on gh
Our algorithm finds repeated content and maps it out into a file that is easy to edit. And ya we built this for customers of ion.design migrating from wordpress/webflow/framer/wix/shopify/etcc
In a production setting we start with this and then run an agent that goes and makes it even better. ditto gives us the speed to show the customer their clone, the agent makes is scalable.
Nice one, congrats on the launch. This looks genuinely useful for getting past the blank-canvas stage, especially when rebuilding an existing customer site. How about the quality of the output once you start editing it. Does Ditto identify sensible reusable components, or is the main goal visual accuracy with some cleanup still needed afterward? Also, how does it handle sites with heavy client-side rendering, forms, or third-party scripts? Those are usually the parts where a clean clone gets difficult.
@os_ishmael it does identify repeated, structurally consistent patterns (e.g. cards, nav items, logos, list rows, etc.) and extracts them into reusable React components with data arrays. For heavily client-rendered sites, Ditto captures the post-JavaScript DOM, computed styles, lazy-loaded content, assets, and observable interactions. Forms are also reproduced visually. Various scripts and stuff may not carry over, as we are then dealing with compiled JS.
ion design
@os_ishmael Yea so like michael mentioned, we have "Recipes" for common patterns where we hav estructures for re creating logic. but that's as far as that goes. For client side rendering and forms you'll still have to bring that in yourself (or with a followup agent)
The interesting constraint with deterministic cloning is that it only sees the rendered DOM, so anything gated behind auth, scroll triggers or JS state never gets captured. Curious how you handle client-rendered sections that only appear after interaction.
Really cool though - congrats on the launch!
ion design
@aidan_codefox Yea JS is way harder, we didn't write a decompiler or anything. We are able to infer some stuff by capturing DOM diffs at different states (timing for intro animations, after clicks for menus/accordians)
we're just doing the max we can deterministically. in prod we run an agent on teh output of this to get even closer.
Tried Ditto on a few landing pages and the output was surprisingly clean. One thing that would make this indispensable for me is if it could also extract and map the original page’s Google Fonts or custom font stack into the generated project automatically. Having to manually re-add fonts after cloning breaks the flow a bit.
@yldzkfqa will look into this!
ion design
@yldzkfqa ah yea, it may have hit an edge case on font extraction. we'll look into it and make a PR
pulled up a couple of sites and the generated next code was honestly way cleaner than i expected, like the component split actually made sense and not just a wall of divs
ion design
@nazifesarawpwe yep we have the concept of "Recipes" on our cloner, so it tries to match sub patterns and pull them into a component.
We also do some like-component-tree compiler magic to pull other stuff out.
@nazifesarawpwe yuh we put a lot of effort into making sure it was as clean as possible.
the deterministic angle is the part that stands out to me, most "clone a site" tools I've tried lean on an AI guess and you get slightly different output every run. one thing I didn't see covered in the thread yet: if the source site gets updated after I've cloned it, is there a way to re-sync or diff against the new version, or is this meant to be a one-time snapshot you then own and diverge from?
ion design
@galdayan Yea this is meant to be a one time snapshot to migrate customers to a new platform!
@samraaj_bath1 makes sense for the migration use case, that's honestly the more common job anyway. good to know the scope so I'm not expecting sync behavior that isn't there
ion design
@galdayan appreciate! Enjoy using it!