usephantom

⚠️ Experimental — This package is in active development. APIs may change between versions. DYOR.

Visual diff engine for AI agent edits. See what moved, what broke, what changed.

Landing Page →

Install

npm i usephantom -D

Quick Start

import { Phantom } from 'usephantom'

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === "development" && <Phantom />}
    </>
  )
}

Features

• Before/after snapshots — captures every element's position, size, styles, text
• 7 diff types — moved, resized, recolored, added, removed, text-changed, style-changed
• 4 overlay modes — ghost (translucent before state), heatmap (severity colors), outline (wireframes), xray (side-by-side)
• 4 output levels — compact, standard, detailed, forensic
• Severity scoring — low/medium/high based on visual impact
• Auto-interval — set autoInterval to snapshot on a timer
• Keyboard shortcuts — Ctrl+Shift+P snapshot, Esc close

Programmatic API

import { takeSnapshot, computeDiff, formatDiffMarkdown } from 'usephantom'

const before = takeSnapshot()
// ... agent makes changes ...
const after = takeSnapshot()
const diff = computeDiff(before, after)
const markdown = formatDiffMarkdown(diff, 'detailed')

Disclaimer

This is experimental software. See DISCLAIMER.md for full details. Use at your own risk. DYOR.

Security

See SECURITY.md for reporting vulnerabilities.

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT — see LICENSE

Made by @dragoon0x