What is HolyStitch?
HolyStitch is a compiler, not a prompt. It reads your Google Stitch project directly from the API and writes a complete, working React project to disk. No AI guesswork, no hallucinated props, no token burn. You give it a Stitch project ID. It handles everything: fetching screens, parsing components, compiling HTML to JSX, deduplicating shared components, extracting your Tailwind theme, and writing a ready-to-run project. Your AI assistant is still in the loop — but only for the finishing touches (routing, font tokens, edge-case JSX), guided by aproject-context.md file HolyStitch generates automatically.
The problem it solves
When you paste a design into an AI and ask it to write React, every token is spent guessing. The AI can’t see your class names, doesn’t have your component hierarchy, and invents props that don’t exist. You spend the next twenty minutes correcting it. HolyStitch takes a different approach: it reads the structured HTML Stitch produces, uses the<!-- ComponentName --> markers Stitch embeds, and compiles it directly. No inference. No guessing.
HolyStitch vs. asking an AI
Key benefits
Zero AI tokens
The conversion is 100% deterministic. No AI API keys are required for the compilation step itself.
Exact Tailwind theme
Colors, fonts, and dark mode config are extracted directly from your Stitch HTML — nothing is guessed.
Shared component detection
Components used across multiple screens are detected by content similarity and written once, then imported everywhere.
Full JSX compiler
Handles attribute renames, inline styles, icon fonts, boolean attributes, void elements, and client component detection.
Next.js + Vite support
Generate App Router Next.js or Vite projects with TypeScript or JavaScript.
MCP server integration
Runs inside Claude Desktop, Cursor, Windsurf, and any other MCP-compatible IDE.
Architecture overview
HolyStitch is structured as an npm workspace with a single package: the MCP server. The pipeline lives inside that package as a set of focused modules.Pipeline flow
- fetcher — calls the Google Stitch API and returns raw screen HTML (or download URLs)
- resolver — if the Stitch SDK returned a download URL instead of raw HTML, fetches the real HTML content before parsing
- parser — reads
<!-- ComponentName -->markers and builds a component tree - compiler — transforms HTML to valid JSX (attribute renames, inline styles, icon fonts, escaped code blocks)
- writer — writes the complete project to disk (pages, components, Tailwind config,
package.json,tsconfig.json,project-context.md)
HolyStitch runs as an MCP tool. Your IDE’s AI assistant invokes it — you never call the pipeline directly.
What the compiler handles
HolyStitch covers the edge cases that trip up LLMs:- Attribute renames —
class→className,for→htmlFor, and all standard HTML-to-JSX rewrites - Inline styles — style strings converted to style objects, including
url(),calc(),var(), andfont-variation-settings - Icon fonts — Material Symbols and Material Icons rendered correctly (icon name text is stripped so the font renders the glyph)
- 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-altis promoted toalt - 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
What you get
After a conversion, HolyStitch writes a complete, ready-to-run project:Next steps
Quickstart
Clone, build, and run your first conversion in under 5 minutes.
MCP setup
Connect HolyStitch to Claude Desktop, Cursor, or Windsurf.
How it works
Understand the full Stitch → React compiler pipeline.
Options
Configure the framework, language, and which screens to convert.