websketch

CLI for WebSketch IR - render, diff, and fingerprint web UI captures.

Installation

npm install -g websketch

Or use via npx:

npx websketch render-ascii capture.json

Commands

render-ascii

Render a capture to ASCII art (LLM-readable).

# Default 80x24 grid
websketch render-ascii capture.json

# LLM-optimized format with metadata and legend
websketch render-ascii --llm capture.json

# Custom dimensions
websketch render-ascii --width 120 --height 40 capture.json

# Minimal structure-only view
websketch render-ascii --structure capture.json

Example output:

┌──────────────────────────────────────────────────────────────────────────────┐
│[NAV:primary_nav]                                                             │
├──────────────────────────────────────────────────────────────────────────────┤
│                    ┌────────────────────────────────────────┐                │
│                    │[FRM:login]                             │                │
│                    │  [INP:email]                           │                │
│                    │  [INP:password]                        │                │
│                    │  [BTN:primary_cta]                     │                │
│                    └────────────────────────────────────────┘                │
└──────────────────────────────────────────────────────────────────────────────┘

fingerprint

Compute a structural fingerprint for comparison.

# Full fingerprint (includes text)
websketch fingerprint capture.json
# Output: e33442b6

# Layout-only fingerprint (ignores text changes)
websketch fingerprint --layout-only capture.json

diff

Compare two captures and report changes.

# Human-readable diff report
websketch diff before.json after.json

# JSON output
websketch diff --json before.json after.json

# Layout-only (ignore text changes)
websketch diff --layout-only before.json after.json

# Custom match threshold
websketch diff --threshold 0.7 before.json after.json

Example output:

WebSketch IR Diff Report
════════════════════════════════════════════════════════════

SUMMARY
────────────────────────────────────────
Nodes: 14 → 16
Identical: No

CHANGE COUNTS
────────────────────────────────────────
  Added:      2
  Moved:      6
  Resized:    2
  Text:       2

TOP CHANGES (by area)
────────────────────────────────────────
  [CHILDREN_CHANGED] PAGE children: 3 → 4
  [MOVED] FORM:login moved by (0.0%, 2.0%)
  [ADDED] Added TOAST:notification at (70%, 10%)

Capture Format

This CLI works with WebSketch IR capture files (JSON). You can create captures using:

• websketch-extension - Chrome extension
• Programmatically via @websketch/ir

Development

# Install dependencies
npm install

# Type check
npm run typecheck

# Lint
npm run lint

# Run tests
npm test

# Build
npm run build

# Test locally
node dist/index.js --help

License

MIT

Author

MCP Tool Shop