ditto.site

Product Introduction

Definition: Ditto.site is an open-source, deterministic website cloner that transforms any public URL into a clean, componentized Next.js or Vite codebase within minutes. It falls under the category of “website-to-code” tools, specifically a static analysis-based site reproduction engine that produces TypeScript, CSS, and Tailwind v4 output.

Core Value Proposition: Ditto exists to eliminate the guesswork and unreliability of LLM-based web cloning. By using deterministic parsing rather than generative AI, it delivers byte-stable, predictable copies of any public web page, complete with extracted design tokens, hover states, dropdowns, accordions, fonts, and responsive layouts. This enables developers, AI app builders, and automation pipelines to obtain production-ready, maintainable code from live websites without manual recreation or black-box AI inference.

Main Features

1. Deterministic Cloning Engine
The core of Ditto is a fully deterministic pipeline that does not rely on large language models (LLMs) for interpretation. Instead, it uses a rules-based DOM parser combined with a custom componentization algorithm to reconstruct a website’s structure. The engine processes three stages: capture (fetches HTML/CSS/JS assets at a given URL), generate (parses the DOM into a typed abstract tree, extracts repeated patterns into components, lifts regions into sections, and emits a project scaffold), and verify (runs automated checks to ensure fidelity). The result is a 100% deterministic output – the same URL always yields the same code, enabling fast, cheap, and consistent cloning at scale.

2. Componentized, Production-Ready Output
Unlike traditional “save as HTML” tools, Ditto outputs a real Next.js or Vite project with a clear file structure: app/layout.tsx, app/page.tsx, app/globals.css (with reset and Tailwind tokens), ditto.css (keyframes, pseudo-elements), content.ts (editable semantic data), and separate folders for components/, sections/, ditto/ (motion/dropdown recipes), svgs/, and public/assets/cloned/. Each repeated DOM element becomes a reusable component; every hover/focus state, dropdown, accordion, and declarative motion is preserved. Design tokens (colors, spacing, fonts) are extracted into CSS variables and Tailwind config. Web fonts, JSON-LD, sitemaps, and SEO metadata are also retained.

3. Three Integration Methods – Self-Host, REST API, MCP Server
Ditto provides the same deterministic engine through three entry points, catering to diverse workflows:

• Open Source (Self-Hosted, MIT License): Clone the GitHub repo, run npm run clone -- https://example.com locally. Full visibility into the pipeline, modifiable, and free forever.
• REST API (Hosted Endpoint): POST to https://api.ditto.site/v1/clones with an API key, parameters for mode (single/multi-page), framework (next/vite), and styling (tailwind/css). Poll the job via events endpoint to stream progress (capture, generate, verify). Returns a downloadable project.
• MCP Server (Model Context Protocol): Wire Ditto into any agent framework (Claude, Cursor, custom builder loops) via ditto tool in mcpServers configuration. Agents can call ditto.clone(url) and receive a structured project object, enabling automated cloning within AI workflows.

Problems Solved

1. Pain Point: Manual Recreation of Websites is Slow and Error-Prone
Developers and designers often need to replicate a reference website (competitor landing page, design inspiration, legacy site) into a modern framework. Manual copying involves screenshotting, eyeballing measurements, rewriting HTML/CSS, and guessing responsive behavior. This is time-consuming and introduces human error. Ditto automates this with deterministic precision, reducing a multi-hour task to minutes.

2. Target Audience

• React/Next.js Developers: Need to clone a site for migration to Next.js, or use a live page as a starting template.
• AI App Builders: Building AI-powered coding assistants or “generate UI from URL” features – need reliable, clean code instead of hallucination-prone LLM output.
• Marketing & Product Teams: Want to quickly fork a landing page for A/B testing or localization, without engineering overhead.
• Open Source Contributors & DevOps: Self-hosting enthusiasts who want a fully transparent, auditable cloning tool.

3. Use Cases

• Migration & Redesign: Clone a client’s existing site into Next.js with full design token extraction, then customize.
• AI-Driven App Generation: Use Ditto as the first step in an AI builder: give each new user a “real” codebase cloned from their current website instead of a blank canvas.
• Design System Extraction: Clone a competitor’s or inspiration site to analyze their CSS tokens, animation keyframes, and component patterns.
• Content Backup & Offline Copies: Transform public websites into editable, self-hosted projects for archival or modification.
• Agent Automation: Wire Ditto into a code-generation agent (e.g., Claude Code, Cursor) to let the agent clone any referenced URL on demand.

Unique Advantages

Differentiation:
Ditto outperforms LLM-based website cloners (like OpenAI’s vision-based tools, screenshot-to-code services) and traditional static site scrapers (HTTrack, wget) in several ways:

• No Hallucination: LLMs often misinterpret layout, miss hover states, invent incorrect styling, or merge unrelated elements. Ditto’s deterministic parsing reproduces exactly what the browser renders, with 96%+ fidelity (per the product page).
• Structured Output: Unlike raw HTML dumps, Ditto emits TypeScript components with separated styling (Tailwind/CSS), editable content model, and proper file organization – code you would be happy to maintain.
• Real Code, Not Images: Screenshot-to-code tools output pixel-approximate but non-functional UIs; Ditto produces fully functional Next.js/Vite projects with interactions, fonts, and semantic markup.
• Open Source & Free: Most commercial cloners charge per clone or require subscriptions. Ditto is MIT licensed and provides a free REST API key for prototyping.

Key Innovation:
The core innovation is the combination of a rigid deterministic pipeline with design system extraction. Instead of treating a webpage as a flat DOM, Ditto applies a structural analysis algorithm to discover repeated components, lift semantic sections, infer design tokens (e.g., color swatches, font families, spacing scales), and reconstruct motion (CSS keyframes, CSS transitions, pseudo-class states). This allows the output to be both faithful to the source and architecturally sound – a rare balance in website-to-code tools.

Frequently Asked Questions (FAQ)

1. Is Ditto free to use?
Yes. Ditto is MIT-licensed open source – you can self-host the entire pipeline for free. The hosted REST API also offers a free tier (API key required, no credit card necessary for low-volume usage). Pricing only applies to high-volume commercial usage; see the product page for details.

2. Can Ditto clone websites that use JavaScript for rendering?
Yes. The capture stage fetches the fully rendered HTML after client-side JavaScript execution (similar to a headless browser). Ditto handles SPAs built with React, Vue, or vanilla JS as long as the URL is publicly accessible and the site renders stable content without login.

3. What frameworks and styling options does the output support?
Currently, Ditto outputs to Next.js (App Router) or Vite (React) with Tailwind v4 or plain CSS. You can choose "mode":"single" for a single-page clone or "multi" to capture multiple internal links. TypeScript is the default language, ensuring type safety.

4. How does Ditto compare to using an LLM to “read” a screenshot?
LLMs are probabilistic and often misinterpret visual layout, color, and spacing. Ditto is deterministic – it reads the actual DOM and CSS computed values, so there is no guesswork. You get pixel-perfect fidelity for most sites (96% coverage per the product info), plus cleanly extracted components and tokens that LLM-based tools cannot produce reliably.

5. Can I use Ditto via my AI agent or coding assistant?
Absolutely. Ditto provides an MCP (Model Context Protocol) server. You can configure it in Claude, Cursor, or any MCP-compatible agent by adding a mcpServers block with the Ditto API endpoint. The agent can then clone any URL and receive a structured project object to continue building.