ditto.site

ditto: The Ultimate Deterministic Website Cloner for Modern Web Development

In the rapidly evolving landscape of web development, the ability to bridge the gap between existing design and functional code is a game-changer. ditto emerges as a powerful, open-source solution designed to solve this exact problem. As a deterministic website cloner, ditto allows developers to point the tool at any URL and receive a clean, componentized version of that site in either Next.js or Vite code within just five minutes.

Built by ion.design and released under the MIT license, ditto is not just a simple scraper; it is a sophisticated engine that reads the DOM, styles, and motion to recreate high-fidelity web projects that are ready for production. Whether you are an AI app builder or a front-end developer looking to skip the "blank canvas" phase, ditto provides a faithful, real-code starting point.

What's ditto?

ditto is an open-source, deterministic website cloner that prioritizes precision and maintainability. Unlike many modern tools that rely on Large Language Models (LLMs) to guess the structure of a website—often leading to inconsistent or broken results—ditto uses a deterministic engine. This means the output is stable, fast, and consistent every time you run it.

When you use ditto to clone a website, it doesn't just copy the HTML. It deep-dives into the target site to extract:

• Design Systems and Tokens: Ensuring the visual language is preserved.
• Fonts and Assets: Automatically pulling web fonts and hosting assets.
• Interactions and Motion: Capturing hover states, focus states, and declarative motion.
• Responsive Breakpoints: Creating layouts that work across all screen sizes.

By focusing on determinism, ditto guarantees a 100% determinism rate, 96% fidelity, 92% componentization, and 88% coverage, making it the most reliable tool for turning existing websites into clean React-based code.

Key Features of ditto

1. Fully Deterministic Engine

The core philosophy of ditto is determinism. By avoiding the "point an LLM and cross your fingers" approach, ditto ensures that the code you receive is predictable and stable. This makes it a reliable part of a professional development pipeline where consistency is non-negotiable.

2. High-Fidelity Componentization

ditto does not output a single, monolithic file. Instead, it intelligently splits repeated DOM elements into reusable React components. It lifts clean regions of the page into dedicated sections and extracts an editable content model. This results in a real project structure that is typed, tokenized, and easy to maintain.

3. Comprehensive Asset Extraction

When cloning a site, ditto handles the heavy lifting of asset management. It extracts:

• Web Fonts: Including the actual font files used on the site.
• Design Tokens: Colors, spacing, and typography scales.
• SVGs: Hoisted inline SVGs for cleaner code.
• Metadata: SEO tags, JSON-LD, and sitemaps.

4. Advanced Interaction Support

ditto goes beyond static layouts. It is capable of cloning complex UI patterns, including:

• Dropdown menus
• Accordions
• Hover and focus states
• Declarative motion and keyframes

5. Multi-Framework and Tooling Support

Developers can choose their preferred stack. ditto supports:

• Frameworks: Next.js and Vite.
• Styling: Tailwind CSS v4 or standard CSS.
• Language: Full TypeScript support.
• Routing: Support for both single-page and multi-page configurations.

Use Case: How to Leverage ditto

AI App Builders

For those building AI-driven applications, ditto is the perfect "step zero." Instead of asking an AI to generate a UI from scratch, you can provide a real-world reference. ditto provides a faithful, real-code foundation that your agents can then modify, saving hours of prompt engineering and layout debugging.

Rapid Prototyping and Iteration

If you need to move a design from the web into a development environment quickly, ditto allows you to skip the manual reconstruction. Within five minutes, you have a functional Next.js or Vite environment that mirrors the source site exactly.

Modernizing Legacy Sites

Use ditto to clone older websites and immediately transform them into modern, component-based architectures using Tailwind CSS and TypeScript. It acts as a bridge between the legacy web and modern front-end frameworks.

How to Use ditto

ditto offers three flexible entry points depending on your workflow. Each method uses the same powerful deterministic engine underneath.

1. Open Source (Self-Hosted)

You can run the entire pipeline on your own machine. This allows you to read every line of code and even contribute back to the project.

gh repo clone ion-design/ditto.site
cd ditto.site && npm install
npm run clone -- https://example.com

2. REST API (Hosted Endpoint)

Skip the infrastructure management by using the hosted API. You can POST a URL and poll for the job status while watching the pipeline progress live.

Example Request:

curl -X POST https://api.ditto.site/v1/clones \
  -H "Authorization: Bearer $DITTO_API_KEY" \
  -H "content-type: application/json" \
  -d '{"url":"https://example.com/",
       "options":{"mode":"single","framework":"next","styling":"tailwind"}}'

3. MCP Server (For AI Agents)

You can wire ditto directly into your AI agent loops, such as Claude or Cursor, giving your agents a powerful tool to clone and manipulate websites.

Configuration Example:

{
  "mcpServers": {
    "ditto": {
      "url": "https://api.ditto.site/mcp",
      "headers": {
        "Authorization": "Bearer ${DITTO_API_KEY}"
      }
    }
  }
}

The ditto Output Structure

When ditto completes a clone, it generates a structured project that is ready to build. The typical file tree includes:

• app/: The main render tree, including layout.tsx, page.tsx, and metadata.
• components/: Extracted, reusable DOM elements.
• sections/: Cleanly separated regions of the page.
• ditto/: Specific recipes for dropdowns and complex motion.
• svgs/: A dedicated directory for hoisted SVGs.
• public/assets/cloned/: All fonts, images, and manifests required for the site.
• globals.css: Reset styles, tokens, and Tailwind configurations.
• content.ts: An editable semantic data model for the page content.

FAQ

Q: How much does ditto cost? A: It is completely free. ditto is MIT-licensed and open-source. You can self-host the entire pipeline or use the hosted API at no cost.

Q: How long does the cloning process take? A: Most websites are cloned and transformed into componentized code within 5 minutes.

Q: Does ditto use AI to generate the code? A: No. ditto is fully deterministic. It reads the actual DOM, styles, and motion protocols of the site to ensure the output is a faithful, stable recreation rather than an AI-generated guess.

Q: What styling options are available? A: You can choose between Tailwind CSS (v4) or standard CSS for your generated project.

Q: Can I use ditto for multi-page websites? A: Yes, ditto supports both single-page and multi-page routing configurations.

Same site. Real code. No magic. ditto is the deterministic cloner that the AI build era runs on. Go to GitHub to star the project or get your API key to start cloning today.