Skip to content
SnapDOMGitHub★ 8K
Ecosystem

Tools built on SnapDOM.

SnapEye gives coding agents visual evidence. SnapSurf operates and verifies web pages. SnapDIFF checks a UI against saved baselines. Each covers a different part of the work.

Compare the tools Use them together
Mr. SnapDOM presenting a network of connections
The capture engine

SnapDOM

SnapDOM captures a rendered interface as reusable images and canvas. Plugins add HTML, structured context, PDF and recordings. Use it directly to build an export feature; use the tools below when you need a workflow around that capture.

Read the SnapDOM docs →

Choose by the job.

Start with the result you need. You can use each tool on its own; installing the whole ecosystem is optional.

Three tools, three main workflows
ToolUse it toWhat you getWhere it fits
SnapEyeCapture, compare or record a UI while an agent edits it.JSON results, images, changed regions and recordings.A running app with the SnapEye client and a local server integration.
SnapSurfNavigate, find controls, act and verify the result.Page summaries, typed changes and assertions.An agent using MCP or CLI with a managed Chromium session.
SnapDIFFRun repeatable visual checks against saved baselines.Pass/fail results, visual diffs and baseline review.In-page testing or a Vitest browser suite in CI.

Scroll the table horizontally to read all columns.

For a download or share button inside your app, start with SnapDOM itself.

What each tool adds.

The capture is a shared starting point. The interface, evidence and testing workflow differ.

SnapEye

Visual tools for coding agents.

Give an agent a way to inspect the UI it is changing. SnapEye runs capture, diff and record operations, then returns a JSON result with artifacts the agent can inspect when needed.

  • Capture an element before a change, then compare it afterward.
  • Locate changed regions and inspect the current and diff images.
  • Record a transition and review its frames, GIF or video.

SnapEye does not navigate or click. A browser driver reaches interactive states; SnapEye measures their appearance. Its visual comparison uses SnapDIFF’s diff engine.

SnapEye setup and API →Task recipes →

SnapSurf

Web navigation and verification for agents.

Use SnapSurf when an agent needs to operate a page and check what happened. It provides a compact observation of the page, actionable element IDs and a typed diff after an interaction.

  • Open a page, find a control, click or type, then verify.
  • Check changes to content, state, layout and clickability.
  • Assert expected changes and the absence of unwanted ones.

A semantic diff answers whether the observed page changed. It does not replace a pixel comparison against a saved visual baseline. Screenshots help when the question is about appearance.

SnapSurf is experimental. Its managed browser has its own cookies and storage, separate from your everyday browser.

SnapSurf setup and documentation →

SnapDIFF

Visual regression testing in the browser.

Use SnapDIFF to keep checking the same elements as your code changes. It captures with SnapDOM, compares against saved baselines and gives you a review interface for visual changes.

  • Mark elements with data-snap for in-page checks.
  • Review split, slider and diff views; approve intended changes.
  • Use a Vitest browser suite with disk baselines to fail CI on visual drift.

SnapEye and SnapDIFF both compare pixels. Choose SnapEye for an agent’s capture-and-inspect task; choose SnapDIFF for a maintained set of visual tests and baseline reviews.

Try the SnapDIFF demo →Setup and CI guide →

One settings panel,
three kinds of checks.

Suppose an agent is changing a settings panel. Each tool can answer a different question during the work.

  1. 1. Reach the state

    SnapSurf opens the page and clicks Settings. Verify that the panel appeared and the controls are available.

  2. 2. Inspect the edit

    SnapEye captures the open panel before and after the code change. Compare its appearance or record the opening transition.

  3. 3. Keep it checked

    SnapDIFF adds the panel to a repeatable visual suite. Review the baseline and check future changes against it.

Your agent or test harness connects these steps. For an already-open panel, call SnapEye’s in-page API: its URL trigger reloads the page. Keep viewport, data and state consistent, and manage each tool’s baselines separately.