Capture, compare and record for coding agents.

What it does

• capture records a baseline PNG of one target under .snapeye/baselines.
• diff compares the current render against it and reports changed regions as JSON.
• record captures a target for a fixed duration as GIF, video and filmstrip.

Install

npm install --save-dev @zumer/snapeye @zumer/snapdom@latest

// vite.config.js
import { defineConfig } from 'vite'
import { snapeye } from '@zumer/snapeye/vite'

export default defineConfig({ plugins: [snapeye()] })

Add the plugin to your Vite config, then start the dev server with npm run dev. In Astro, Nuxt or SvelteKit, add it to the framework’s Vite plugin list. For a static HTML file, use --serve instead.

Use it

npx snapeye capture header-desktop --target '#site-header'
npx snapeye diff header-desktop --target '#site-header' --fail-on-change
npx snapeye record menu --target '.menu' --duration 3000 --fps 10 --format gif

# A route in the running app (capture its baseline before diffing)
npx snapeye diff dashboard --url 'http://localhost:5173/settings?tab=billing'

# A standalone HTML fixture
npx snapeye capture issue --serve repro/issue.html --snapdom ../snapdom/dist --target '#test'

Where it fits

SnapEye does not navigate, click, reason, call a model or orchestrate an agent; getting the app into the right state stays the agent’s job. A browser driver reaches interactive states; SnapEye measures their appearance.

Its visual comparison uses SnapDiff’s diff engine. The CLI talks to the app through the Vite plugin, or serves a page itself with --serve.

Works with SnapDOM 2.24.10 or newer, including 3.x.

Agent workflowResult contractAgent recipesSetup for a Vite app