Juxtapose

Visual tests for your Storybook

See the UI changes.

Give your agent specific screenshot and DOM evidence. Juxtapose compares your rendered UI with approved baselines, so you can review the change and decide what to fix.

Open source. Runs locally or in CI. No cloud account needed.

Juxtapose in Storybook: baseline and current Card Long Body renders, a padding change from 20 to 28 pixels, and ten DOM changes.
Real Storybook capture: card width 280 → 240px, padding 20 → 28px. The report identifies the spacing change and ten DOM deltas.Full size ↗ · See the diff overlay ↗

Build toward a reference. Keep what you approve.

Put visual feedback
into the next edit.

Start with a design comp, a reference screenshot, and what matters to you. Let the agent build, then review the rendered result against that intent.

  1. 01

    Reference + intent

    Define the layout, states, and details to preserve.

  2. 02

    Agent builds

    Make a concrete change in the component.

  3. 03

    Capture the render

    Inspect the UI at the intended viewport and theme.

  4. 04

    Review the result

    Compare with the reference and describe what is still off.

  5. 05

    Adjust + recapture

    Use the feedback to make the next edit. Repeat until it is right.

  6. 06

    You approve

    Establish the rendered baseline after review.

Reference review guides the design work. Juxtapose currently compares rendered captures; importing Figma files or automatically scoring a design comp is not supported.

After approval, every edit has a reference.

Approved baseline edit capture + compare inspect the screenshot and DOM diff.

Unexpected change? Fix it, capture again, and compare with the same baseline. Intended change? Review and explicitly approve the new baseline.

Inspect the changed pixels.

Actual capture, with the diff overlay off and on.

What the tool does

Capture less.
Inspect the changes.

01

Skip work that does not need to run.

Affected-story selection limits captures to stories your change can reach. A warm browser avoids another launch between local runs. Exact matches need a hash comparison.

02

Give the agent specific evidence.

Deterministic comparisons report changed elements, properties, and values. That narrows what the agent needs to inspect; screenshots and crops remain available when the structure does not explain the change.

03

Make rendering noise easier to investigate.

Settling, animation controls, and fresh-capture confirmation help separate repeatable changes from timing or renderer history. A mismatch can retry with a cache pulse and then a fresh renderer. Unstable stories still need attention.

Hosted review · Early access

Hosted review
is in early access.

Upload a captured run to review it in the browser and link it to a GitHub pull request. Hosted uploads require CLI 0.23.0 or later; local use needs no cloud account.

Open the early-access app

Get started

Add visual tests
to your Storybook.

Set up Juxtapose