dittu v0.2.0 is outRelease notes

Clone any website

Turn any website into an editable Next.js or Astro project, verified pixel by pixel.

$npx @manishtamang/dittu
Star on GitHub

Layout, CSS, fonts, images and scroll animations. Not the backend.

~/projects
$ dittu clone https://gole.codes --build

› Capturing https://gole.codes
  1,680,755 chars of markup, 6 stylesheets, 33 animations, 13 JS-responsive elements
✓ Static preview → dittu-out/gole.codes/preview
✓ Next.js project → dittu-out/gole.codes/next
✓ Astro project  → dittu-out/gole.codes/astro

Visual match (1 − differing pixels / total)
  preview  /home  1440px   99.95%
  next     /home  1440px   99.95%
  astro    /home  1440px   99.95%
  preview  /home   390px   99.89%
  next     /home   390px   99.89%
  astro    /home   390px   99.89%
✓ All checks ≥ 95% (lowest 99.89%)

One CLI, one MCP server, and skills for your coding agent

  • Claude Code
  • Cursor
  • Gemini CLI
  • Codex

Most cloners screenshot a page and ask an LLM to redraw it.

dittu copies what the browser actually rendered: the live DOM, the original CSS, every font and image.

Then it screenshots both and checks the result.

Because "looks close" isn't 99.95%.

Quick start

Clone in one command

Set it up once for your agent, or run it straight from the terminal. Requires Node 20.11+.
01

Set up your agent

Registers the MCP server and installs the skills for every agent it finds: Claude Code, Cursor, Gemini CLI, Codex.

npx @manishtamang/dittu setup
02

Ask your agent

Clone https://gole.codes into Next.js and make the pricing cards a reusable component.

The agent calls clone_website, refactors the components, and calls verify_clone to prove nothing visual changed.

03

Or use the terminal

No agent needed. Install with npm i -g @manishtamang/dittu, or use npx @manishtamang/dittu in place of dittu.

  • dittuinteractive: pick URL, frameworks, pages…
  • dittu clone <url> -ypreview + Next.js + Astro, scored
  • dittu clone <url> -p 5 --buildcrawl 5 pages, build and score
  • dittu verify <dir>re-score an existing clone
  • dittu serve <dir>preview the clone locally

Check your machine first with npx @manishtamang/dittu doctor. On Linux/WSL you may need sudo npx playwright install-deps chromium.

How it works

Copies what the browser rendered

No screenshots redrawn by an LLM. A deterministic pipeline captures the page, exports it, and proves the result with pixel diffs.
  1. 01

    Capture

    Chromium loads the page and scrolls it so lazy content and scroll reveals fire, then freezes JS timers so carousels hold still. A second render at 390px records layout that JS computes per viewport.

  2. 02

    Serialize the live DOM

    Not the server HTML. Next.js and React sites come out as their final markup, without hydration scripts or RSC payloads. Nesting the HTML parser would restructure gets repaired, so React hydrates cleanly.

  3. 03

    Keep the original CSS

    In cascade order, including CSS-in-JS rules that only exist in the CSSOM. Media queries, hover states and keyframes keep working.

  4. 04

    Download every asset

    Fonts, images and media come from the same browser session, and every URL is rewritten to the local copy.

  5. 05

    Export

    A static preview, a Next.js App Router project (JSX) and an Astro project, split into section components.

  6. 06

    Replay motion

    Recorded scroll reveals, Framer Motion animate calls and loops run again through a 2 KB runtime.

  7. 07

    Verify

    Original and clone are screenshotted the same way at desktop and mobile, then scored. --build scores the built apps, not just the preview.

Read the architecture

Coverage

What you can clone

Works on the post-hydration DOM, so it doesn't matter which framework built the site.
Site typeSupport
Marketing sites, landing pages, portfolios, docs99%+ typical
Next.js / React / Vue / Svelte / Astro buildsPost-hydration DOM
Tailwind, CSS modules, styled-components, emotionOriginal CSS kept
Tailwind CSS output (--styling tailwind)Utilities where exact, the rest stays CSS
Scroll reveals (AOS, Framer Motion, GSAP, IntersectionObserver)Recorded and replayed
Layout JS computes per viewportMobile render → media-query overrides
Multi-page sites--pages N, links rewired, shared header/footer
Canvas / WebGL scenesStill image
Carousels, tabs, menus, formsLook is copied, behaviour is not
Pages behind login or bot protectionNot supported

Benchmarks

99%+ on real sites

Raw pixel identity over the full page, including height differences, at 1440px and 390px.
SiteStackDesktopMobileBuilt apps
gole.codesNext.js, heavy animation99.95%99.89%Same
nextjs.orgNext.js99.79%99.99%99.78–99.79%
ui.shadcn.comNext.js + Tailwind100.00%100.00%100.00%
astro.buildAstro100.00%100.00%—
manishtamang.comNext.js, 3 pages99.89–99.99%99.80–100%Same
Methodology and limits

FAQ

Questions

Does it copy the backend?

No. Data fetching, auth, APIs and form handling are not copied. You get the frontend, ready to wire to your own logic.

Why is the generated JSX full of {" "}?

Whitespace between inline elements changes layout in HTML but is dropped by JSX. dittu keeps it explicit so the clone renders identically. Refactor freely, and re-run verify to check.

Can I get Tailwind classes instead of CSS?

Yes, with --styling tailwind. Every rule that can be expressed exactly becomes Tailwind utilities (sites built with Tailwind v4 keep their own classes) and the rest stays CSS, so the score does not drop.

Is the 95% score honest?

It's raw pixel identity over the full page, including height differences, at desktop and mobile. Diff images are saved next to the scores so you can check.

Can I clone any site I want?

Technically, mostly yes. Legally, no: cloning a site doesn't give you rights to its brand, copy, images or code. dittu is for learning, prototyping, design references and migrating sites you own.

Clone your first site

Free and open source. Get an editable Next.js or Astro project, scored against the original.

$npx @manishtamang/dittu clone https://gole.codes
Read the docs