Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/BaselAshraf81/holystitch/llms.txt

Use this file to discover all available pages before exploring further.

​
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 a project-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

Asking an AIHolyStitch
Token usageThousands~0
CorrectnessHit or missBuild-verified
Tailwind themeLost or guessedExtracted exactly
Shared componentsDuplicated across filesDetected and deduplicated
SpeedMinutes of back-and-forthSeconds

​
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. 
holystitch/
└── packages/
    └── mcp-server/          (@stitch-to-react/mcp-server)
        └── src/
            ├── index.ts         ← entry point
            ├── server.ts        ← MCP server setup
            ├── tools/
            │   └── prepare-screens.ts
            └── pipeline/
                ├── fetcher.ts       ← Stitch API client
                ├── parser.ts        ← component tree extraction
                ├── compiler.ts      ← HTML → JSX transformation
                ├── resolver.ts      ← resolves download URLs to HTML content
                ├── writer.ts        ← project file writer
                ├── zipper.ts        ← optional ZIP output
                └── stitch-converter.ts  ← orchestrates the pipeline

​
Pipeline flow

Stitch API → fetcher → resolver → parser → compiler → writer → Next.js project
Each stage has a single responsibility:
  • 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(), and font-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-alt is promoted to alt
  • 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: 
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

​
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us