⚡ stitch-to-react

Google Stitch → Next.js. Compiled, not prompted. Zero tokens.

▶️ Watch it in action

Get Started · How It Works · Output · Report a Bug

Every token is wasted guessing at class names it can't see, reconstructing structure it doesn't have, and hallucinating props that don't exist. Then you spend the next twenty minutes fixing it.

HolyStitch is a compiler, not a prompt. It reads your Stitch project directly from the API and writes a complete, working Next.js project to disk — deterministically, instantly, and without spending a single AI token on the conversion itself.

HolyStitch runs as an MCP tool inside your IDE. You give it a Stitch project ID — it handles everything else.

Stitch API  →  Fetch screens  →  Parse components  →  Compile JSX  →  Write project

Specifically, it:

1. Fetches every screen from your Stitch project via the API
2. Reads the <!-- ComponentName --> markers Stitch embeds in the HTML
3. Splits each screen into named React components with correct parent → child relationships
4. Compiles HTML to valid JSX — attributes, inline styles, void elements, icon fonts, all of it
5. Deduplicates components shared across screens and writes them once
6. Extracts your exact Tailwind theme: colors, fonts, dark mode config
7. Writes a complete Next.js project, ready to npm install && npm run dev

Your AI then handles the finishing touches — routing, font tokens, any edge-case JSX — and asks you to review the result in the browser.

git clone https://github.com/BaselAshraf81/holystitch
cd holystitch
npm install
npm run build

Note the full path to the folder — you'll need it in the next step. For example: /Users/alice/holystitch

Go to your Stitch project settings and copy your API key.

Point your MCP host at the built package using the full path from step 1.

Claude Desktop — add to claude_desktop_config.json:

{
  "mcpServers": {
    "holystitch": {
      "command": "node",
      "args": ["/Users/alice/holystitch/packages/mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key-here"
      }
    }
  }
}

Cursor / Windsurf / other MCP hosts — add the same block to your IDE's MCP settings file, updating the path to match your machine.

Replace /Users/alice/holystitch with the actual path where you cloned the repo.

On Windows, use the full path with forward slashes or escaped backslashes, e.g.: "C:/Users/alice/holystitch/packages/mcp-server/dist/index.js" or "C:\\Users\\alice\\holystitch\\packages\\mcp-server\\dist\\index.js"

Open your Stitch project. The ID is in the URL:

https://stitch.withgoogle.com/project/12828868370598194178
                                       ^^^^^^^^^^^^^^^^^^^

Tell your AI assistant:

Convert my Stitch project 12828868370598194178 into a Next.js app at /Users/alice/projects/my-app

That's it. HolyStitch runs, writes every file, and your AI works through the post-conversion checklist automatically.

my-app/
├── components/
│   ├── TopNavBar.tsx          ← shared across all pages
│   ├── Footer.tsx             ← shared across all pages
│   ├── HeroSection.tsx
│   ├── PricingCard.tsx
│   └── ...
├── app/
│   ├── page.tsx               ← route: /
│   ├── changelog/
│   │   └── page.tsx           ← route: /changelog
│   └── pricing-plan/
│       └── page.tsx           ← route: /pricing-plan
├── stitch-source/             ← original HTML kept for reference
├── tailwind.config.js         ← your exact Stitch theme
├── package.json
├── tsconfig.json
└── project-context.md         ← routing table + AI checklist

HolyStitch goes beyond naive HTML-to-JSX conversion. It covers the edge cases that trip up LLMs:

• Attribute renames — class → className, for → htmlFor, all standard HTML → JSX rewrites
• Inline styles — style strings → style objects, including url(), calc(), var(), and font-variation-settings
• Icon fonts — Material Symbols and Material Icons rendered correctly (icon name text is stripped so the font renders the glyph, not the word)
• JSX-safe code blocks — curly braces in <pre><code> blocks are escaped so code examples don't break the JSX parser
• Duplicate attributes — deduplicated automatically; data-alt is promoted to alt and the original removed
• Client components — 'use client' is added to any Next.js component with event handlers, hooks, or buttons
• Fonts — Google Fonts loaded via next/font/google; icon fonts remain as CSS imports
• Shared components — detected by content similarity and written once, no matter how many screens use them

Contributions are welcome. HolyStitch is a compiler, and the best contributions are failing test cases: a snippet of Stitch HTML that produces wrong JSX, plus the expected output.

git clone https://github.com/BaselAshraf81/holystitch
cd holystitch
npm install
npm run build

Open an issue for patterns the compiler gets wrong. Open a PR for fixes.

If HolyStitch saved you time, consider buying me a coffee — it helps keep the project moving.

MIT © Basel Ashraf