# dittu

> Clone any website's frontend (layout, CSS, fonts, images, scroll animations) into an editable Next.js or Astro project, verified by pixel diff. Ships as a CLI, an MCP server and agent skills. npm package: `@manishtamang/dittu`.

dittu copies what the browser rendered (live DOM, original CSS, downloaded assets) instead of asking an LLM to redraw a screenshot. It exports a static preview, a Next.js App Router project and an Astro project, then scores the clone against the original at 1440px and 390px. It does not copy backends: data fetching, auth, APIs and forms are left to you.

- Set up agents: `npx @manishtamang/dittu setup` (Claude Code, Cursor, Gemini CLI, Codex)
- Clone from a terminal: `npx @manishtamang/dittu clone <url>`
- MCP server: `npx -y @manishtamang/dittu mcp`, tools `clone_website`, `verify_clone`, `read_report`

## Getting started

- [Installation](https://dittu.example.com/docs/installation.md): Requirements: Node.js 20.11+ (24 recommended, see .nvmrc) and npm.
- [CLI](https://dittu.example.com/docs/cli.md): In a terminal, dittu, dittu <url> and dittu clone [url] show the banner and ask for what you didn't pass as flags.
- [MCP server](https://dittu.example.com/docs/mcp.md): dittu mcp runs a Model Context Protocol server over stdio.

## Concepts

- [Architecture](https://dittu.example.com/docs/architecture.md): dittu is a deterministic pipeline: capture → transform → export → verify.
- [Fidelity](https://dittu.example.com/docs/fidelity.md): For each target (preview, built Next.js, built Astro), route and width, original and clone are screenshotted with the same procedure and compared with pixelmatch (threshold 0.1, anti-aliasing ignored).
- [Tailwind output](https://dittu.example.com/docs/tailwind.md): --styling tailwind writes styles as Tailwind CSS v4 utility classes wherever that renders exactly like the original, and keeps the rest as CSS.

## Project

- [Testing](https://dittu.example.com/docs/testing.md): tests/fixtures/hard/ is a two-page site with every edge case the pipeline has to survive.
- [Roadmap](https://dittu.example.com/docs/roadmap.md): Deterministic capture of the live DOM + CSSOM, network-recorded assets

## Optional

- [All docs in one file](https://dittu.example.com/llms-full.txt): every page above, concatenated
- [Source code](https://github.com/Manish-Tamang/dittu): GitHub repository
- [npm package](https://www.npmjs.com/package/@manishtamang/dittu): install and version history
- [Changelog](https://github.com/Manish-Tamang/dittu/blob/main/CHANGELOG.md): what changed in each release