Website-to-code cloning
Accepts a public URL and produces a cloned site as componentized code rather than a flat scrape of the page.
Ditto
RevendiquerDitto is an open-source website cloner that turns a public URL into editable Next.js or Vite code. Self-host, use the API, or connect via MCP.
Overview
Ditto is an open-source deterministic website cloner. It takes a public URL and turns it into a clean, componentized codebase, with the homepage and API examples showing Next.js and Vite as output targets.
The product is positioned for builders who want a faithful starting point rather than a blank canvas. The site says Ditto preserves fidelity, extracts design systems and other UI details, and can be used as a self-hosted tool, a hosted API, or an MCP-connected agent workflow.
Core capabilities
Framework-targeted output
Reconstructs output as Next.js or Vite projects, giving users a real codebase they can edit and build on.
Deterministic pipeline
Described as deterministic, with the site explicitly contrasting it with LLM-based guessing.
UI and layout extraction
Extracts design systems, tokens, fonts, interactions, motion, breakpoints, and page sections according to the homepage copy.
Componentized project structure
Splits repeated DOM into components, lifts regions into sections, and emits editable semantic content and project files.
Multiple ways to run it
Supports three access modes: self-hosted open source, hosted REST API, and MCP server for agents.
Practical use cases
Bootstrap a new project from an existing site
A developer can send a public site URL to Ditto and get a codebase that serves as a starting point for rebuilding or extending the UI in Next.js or Vite.
Self-host the cloning pipeline
A team can run the open-source cloner on its own machine or infrastructure when it wants to inspect the pipeline and keep the workflow in-house.
Automate website cloning through an API
An application can call the hosted REST API to queue a clone job, monitor progress, and retrieve the finished project without setting up the infrastructure locally.
Add cloning to agent workflows
An AI agent or builder loop can connect to the MCP server and use Ditto as a tool for turning a target URL into code during an iterative workflow.
Review and refine a generated codebase
A designer or engineer can review the generated components, sections, content model, and extracted tokens as a structured base for further editing.
Pros and Cons
Pros
- Open source and MIT licensed, with the code available to inspect and self-host.
- Deterministic approach is positioned as avoiding LLM guesswork in the cloning process.
- Supports multiple workflows: local self-hosting, hosted REST API access, and MCP server use for agents.
- Outputs are described as structured and editable, including components, sections, tokens, and project files.
- The homepage provides concrete examples of Next.js, Vite, Tailwind, and TypeScript in the generated output.
Cons
- The collected pricing page is a 404, so pricing and plan details are not confirmed in the provided evidence.
- The source only partially documents integration and workflow details, so some setup and output limits are not visible from the pages collected.
FAQ
What does Ditto do?
Ditto is an open-source website cloner that takes a public URL and returns a componentized codebase. The source shows it can output Next.js or Vite projects and can be used through the self-hosted pipeline, the hosted REST API, or an MCP server.
How can I use Ditto?
The site shows three usage paths: self-host the cloner with MIT-licensed source code, send jobs to the hosted REST API at api.ditto.site, or connect the MCP server for agent workflows.
What kind of output does it produce?
The homepage says Ditto can reconstruct pages into clean, componentized Next.js or Vite code. It also mentions extracted design systems, tokens, fonts, interactions, motion, breakpoints, and sections.
Is Ditto deterministic?
The homepage describes Ditto as deterministic and says it does not rely on an LLM to guess at the page structure. The product page also emphasizes fidelity-preserved output and byte-stable copies.
How much does Ditto cost?
The pricing page at /pricing returned a 404 in the collected evidence, so there is no confirmed pricing information on the site snapshot provided.
Quick Facts
- Category
- Developer Tool
- Source domain
- ditto.site
- License
- MIT
- Primary output
- Componentized Next.js or Vite code
- Access modes
- Self-hosted, REST API, MCP server
- Key workflow
- Point it at a public URL and generate a cloned project
Alternatives à Ditto
EZsite AI
EZsite AI is an AI website builder that turns a URL into a fullstack React or Vue.js app with hosting, custom domains, code export, and backend features.
Termo
Termo is an AI agent platform with dedicated VMs for browsing, code execution, memory, and scheduled automation for research and build tasks.
Orca
Orca is an Agent Development Environment for shipping with coding agents, running multiple CLI agents in parallel across isolated worktrees, with desktop and mobile workflows.
Firebase Studio
Firebase Studio is a web-based workspace for full-stack app development with Gemini-assisted coding, app previews, cloud emulators, collaboration, and browser deployment.
AI Magicx
AI Magicx is a unified AI workspace for chat, image, video, voice, music, email and developer tasks, helping teams and creators manage multiple models in one place.
Paper
Paper is a design tool that connects canvas, code, and AI agents so teams can create, share, and ship work in one workflow. Includes desktop app and MCP access.