WebSketch IR stop treating webpages like pictures.

Grammar-based

Compiles DOM into 22 fixed UI primitives — BUTTON, NAV, CARD, INPUT, and more. No ambiguity, no DOM noise.

LLM-friendly

ASCII wireframe rendering lets language models reason about page layouts without vision capabilities.

Diffable

Structural diff engine matches nodes by geometry + role + semantics, not DOM identity. Track real UI changes.

Typed

Full TypeScript types for every node, capture, and option. Zero runtime dependencies.

Fingerprintable

Content-addressed hashing produces stable fingerprints for fast structural equality checks.

Versioned Schema

Semantic versioning for the capture schema with forward and backward compatibility guarantees.

Parse & render

import { parseCapture, renderAscii, renderForLLM } from '@mcptoolshop/websketch-ir';

const capture = parseCapture(jsonString);
const wireframe = renderAscii(capture);   // 80x24 ASCII grid
const llmView = renderForLLM(capture);    // URL + viewport + legend

Diff & fingerprint

import { diff, formatDiff, fingerprintCapture } from '@mcptoolshop/websketch-ir';

const result = diff(captureA, captureB);
console.log(formatDiff(result));
// { added: 2, removed: 1, moved: 0, resized: 3 }

const fp = fingerprintCapture(capture);