Ditto icon

Ditto

Ditto is an open-source website cloner that turns a public URL into componentized Next.js or Vite code for developers and AI builders.

Ditto

What Ditto is

Ditto is an open-source website cloner that takes a public URL and turns it into a byte-stable codebase. The product is positioned around deterministic reconstruction: instead of asking an LLM to guess at the layout, it aims to produce stable, componentized Next.js or Vite output that preserves the original site’s structure and fidelity.

The homepage describes Ditto as useful for getting a faithful starting point for AI app builders, teams rebuilding pages, and developers who want a maintainable project rather than a flat export. It also says the pipeline extracts design systems, tokens, fonts, interactions, motion, breakpoints, sections, and editable content into real project files.

Core capabilities

Deterministic website cloning

Point Ditto at a public URL and it returns a byte-stable copy intended to preserve fidelity rather than improvise missing pieces.

Componentized code output

The output is described as clean, componentized Next.js or Vite code, so the result is a real project structure instead of one large generated file.

Design and layout extraction

The site says Ditto extracts design systems, tokens, fonts, interactions, motion, breakpoints, and sections from the source page.

Hosted REST API

The hosted API supports a simple POST-and-poll workflow, with job events available while capture, generation, and verification run.

MCP server for agents

An MCP server is documented for agent workflows, with an example that can be wired into tools such as Claude or Cursor.

Open-source self-hosting

The project is MIT licensed and open source, and the homepage also shows a self-hosted command-line workflow.

Common ways to use Ditto

  • Seed a new project from an existing site

    Use Ditto when you need a faithful starting point for a new app or landing page and want to preserve the source site’s visual structure in real code.

  • Reconstruct a site into maintainable components

    Teams rebuilding or modernizing a public site can use the componentized output to separate sections, tokens, and reusable UI instead of copying HTML by hand.

  • Automate cloning in agent workflows

    Builders using agents or internal tools can connect the MCP server so an assistant can trigger cloning as part of a broader build loop.

  • Self-host and extend the pipeline

    Developers who prefer to run their own infrastructure can self-host the pipeline, inspect the code, and adapt it for local use or contributions.

  • Use a hosted API instead of local infrastructure

    If you only need a managed workflow, the hosted REST API lets you submit a URL, track the job, and retrieve the generated project without running the cloner yourself.

Pros and Cons

Pros

  • Deterministic output is emphasized, which should reduce the uncertainty associated with LLM-generated site cloning.
  • The code output is organized into components, sections, styles, and editable content files, which is more maintainable than a single generated page.
  • Users can choose between self-hosting, a hosted REST API, or an MCP server depending on their workflow.
  • The project is MIT licensed and open source, which makes the pipeline inspectable and modifiable.
  • The hosted API documentation shows a concrete request-and-job flow, including event streaming while the clone is processed.

Cons

  • The collected pricing page URL returns a 404, so pricing and plan details are not clearly documented in the evidence provided.
  • The strongest implementation details shown in the source are for public URLs and the hosted API; broader platform, authentication, or enterprise deployment limits are not spelled out.
  • Some integration references are present, but the evidence does not provide a full compatibility matrix or setup guide for every workflow.

FAQ

How can Ditto be used?

Ditto can be used either as an open-source self-hosted cloner or through the hosted REST API. The site also documents an MCP server for agent workflows.

What does Ditto output?

The homepage says Ditto accepts a public URL and produces clean, componentized Next.js or Vite code. It is described as deterministic rather than LLM-driven.

What frameworks and styling options are supported?

The source shown on the site highlights Next.js and Vite, with Tailwind v4 and CSS mentioned in the reconstructed output. The hosted API example also shows a Next.js and Tailwind configuration.

Is Ditto free or paid?

The pricing page URL returns a 404 in the collected evidence, so the site does not clearly document pricing on that page. The homepage says Ditto is MIT-licensed and open source, and also offers a hosted API with an API key flow.

Who is Ditto for?

The site says Ditto is designed for public URLs and can extract design systems, tokens, fonts, interactions, motion, breakpoints, and sections. It is positioned for faithful code generation rather than loose visual approximation.

Quick Facts

Category
Developer Tool
Primary task
Clone a public website into componentized code
Outputs
Next.js or Vite project code
License
MIT
Access options
Self-hosted CLI, hosted REST API, MCP server
Source domain
ditto.site