wiremd CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

What this is

wiremd converts Markdown with extended wireframing syntax into visual wireframes. It ships as an npm library, a CLI tool, and a VS Code extension. Input is .md files with wiremd syntax; output is HTML (7 styles), React/JSX, Tailwind, or JSON.

Commands

npm run build        # TypeScript + Vite → dist/
npm test             # Run all tests (vitest)
npm test -- tests/parser.test.ts              # Single test file
npm test -- tests/parser.test.ts -t "Button"  # Single test by name
npm run test:coverage
npm run typecheck    # Strict TypeScript check
npm run lint         # ESLint on src/
npm run docs:dev     # VitePress docs dev server

CLI usage (after build):

wiremd input.md --style clean --serve 3001 --watch
wiremd input.md -o output.html -f html -s sketch

Architecture

The pipeline: Markdown string → parse() → WiremdAST → render*() → HTML/React/JSON/Tailwind

src/
├── types.ts                        # ~40 discriminated-union AST node types
├── index.ts                        # Public exports
├── parser/
│   ├── index.ts                    # parse() + validate(); calls resolveIncludes()
│   ├── transformer.ts              # MDAST → wiremd AST (the bulk of parsing logic)
│   ├── remark-containers.ts        # ::: block syntax plugin (supports nesting)
│   └── remark-inline-containers.ts # [[ ... ]] nav/inline syntax plugin
└── renderer/
    ├── index.ts                    # renderToHTML(), renderToReact(), renderToJSON(), renderToTailwind()
    ├── html-renderer.ts            # Component → HTML string (handles all node types)
    ├── react-renderer.ts           # Component → React/JSX string
    ├── tailwind-renderer.ts        # Component → Tailwind-classed HTML
    └── styles.ts                   # 7 CSS style systems (sketch, clean, wireframe, material, brutal, tailwind, none)

Parser flow: unified/remark parses standard Markdown into MDAST, then remark-containers and remark-inline-containers handle wiremd-specific syntax (::: card, [[ nav ]], buttons [Label]*, inputs [_____]). The transformer walks the MDAST and emits wiremd AST nodes.