ditto.site
ion-design · Coding
ditto.site is an open-source, MIT-licensed website cloner that turns any public URL into a working, componentized Next.js or Vite React project. Instead of asking a language model to guess at your markup, it captures what the browser actually renders and emits a deterministic codebase, usually in around five minutes. You can self-host the whole pipeline, call the hosted REST API, or wire it into an agent through its MCP server, and it costs nothing either way. Hard to argue with that.
About ditto.site
What Is ditto.site
ditto.site is a website-to-code tool and Next.js code generator built for developers who want a real, maintainable starting point rather than a blank canvas. Point it at a live page and it writes a fresh project from the rendered result, so you don't need the original source or an existing repository. The output isn't one giant file: the tool splits repeated DOM into components, lifts clean regions into sections, and hands you typed, tokenized code you can keep working on.
The core idea is determinism. Many AI website cloners send your page to an LLM and hope the result looks close. ditto.site runs a capture-to-code pipeline instead, so the same frozen capture always produces a byte-stable app. No guesswork. According to the project, it also pulls out the design system behind the page, including tokens, fonts, interactions, motion, breakpoints, and sections.
The main limit is scope. It clones public URLs you have the right to work with, and it's a developer tool at heart, so you'll be comfortable running npm commands, managing an API key, or unpacking a JSON file map. Not for everyone. If you want a finished product with a visual editor and hosting built in, this isn't that.
Getting Started
- Go to the ditto.site site and request a hosted API key with your email, or clone the repo and run the pipeline on your own machine.
- Verify your email, then copy the one-time
dtto_live_...key and store it in an environment variable likeDITTO_API_KEY. - POST a public URL to the REST API endpoint with your preferred options, such as framework
nextand stylingtailwind. - Poll the job until it succeeds, then extract the returned file map into a project directory with the official tool.
- Run your usual install and dev commands inside the new project and start building on top of it.
Product Information
A quick look at ditto.site's pricing, supported platforms, and performance.
Best for
The users, tasks, and scenarios where this tool fits best.
Users
- Front-end developers
- AI app builders
- Teams evaluating an existing site
Tasks
- Turning a landing page into Next.js code
- Prototyping from a reference design
- Building an internal agent workflow
Scenarios
- Kicking off a new client project
- Rebuilding a legacy public page
- Migrating a design into a component library
Key features
Deterministic Capture-to-Code Pipeline
ditto.site doesn't point an LLM at your page and hope for the best. It captures what the browser rendered, then compiles that frozen capture into a project, so the same input gives you byte-stable output every time. Same input, same output. That consistency matters when you're building on top of the result or regenerating after a change.
Componentized Next.js and Vite Output
The tool splits repeated DOM into components and lifts clean regions into sections, then emits a real project rather than a single monolithic file. No giant file to untangle. You can request Next.js App Router by default or Vite React when that fits your stack better. The result is typed and tokenized, so it slots into your normal workflow.
Three Ways to Run It
You pick the entry point that matches how you build. Clone the repository and self-host the entire pipeline under the MIT license, POST a URL to the hosted REST API and skip the infrastructure, or connect the MCP server so any agent can clone as a tool. All three share the same deterministic engine underneath. Which one fits comes down to your setup.
Design System Extraction
Beyond markup, ditto.site pulls the design system out of the page: design tokens, web fonts, hover and focus states, dropdowns, accordions, and declarative motion. It also captures breakpoints and sections, along with SEO metadata, JSON-LD, and sitemaps. That gives you editable material for styling, not just a static snapshot.
Agent and API Integration
The hosted endpoint at api.ditto.site handles clone jobs over REST, returning a file map keyed by each app-relative path. The MCP server at api.ditto.site/mcp lets you give Claude, Cursor, or a custom builder loop a cloning tool directly. For teams automating their setup, this is the fastest way to bake cloning into a pipeline.
Open Source Under MIT
The whole project is MIT-licensed and built in the open, so you can read every line, send a PR, and shape how it evolves. Self-hosting means your captures and generated code stay on your own machine, which suits teams with stricter data habits. No paywall either. There's no paid tier hiding the core engine.
Pros and cons
Pros
- Free and open source under the MIT license, with no paid tier gating the main features.
- Deterministic output means the same capture produces stable, repeatable code.
- Splits pages into components and sections instead of one unmanageable file.
- Flexible entry points: self-host, REST API, or MCP server for agents.
- Extracts design tokens, fonts, motion, and breakpoints you can actually edit.
Cons
- Aimed at developers, so you need comfort with npm, API keys, and unpacking JSON output.
- It only handles public URLs, and you're responsible for having the rights to clone a given site.
- There's no visual editor or built-in hosting, so it won't replace a full site builder for non-coders.
Frequently asked questions
It turns a public URL into a self-contained Next.js or Vite React project. It captures what the browser renders and compiles that into componentized, tokenized code you can build on.
Related content
Explore related tools, skills, and articles for ditto.site.
ditto.site Alternatives
Base Code
Base44 (Wix) · Coding · ProductivityBase Code is a shared cloud development environment from Base44. Teammates describe changes to an existing GitHub codebase in chat, preview them live and send them back as pull requests.
Google EmbeddingGemma 2
Google DeepMind · Writing · Image · CodingGoogle EmbeddingGemma 2 is a 740M-parameter open model that turns text, code, images, audio, and video frames into vectors in one 768-dimension space, running on phones and laptops.
GitGlow
GitGlow · Coding · ProductivityGitGlow is a local-first desktop Git client that lets independent developers review their own code and their AI agents' changes in one place before shipping.