Capture your
Ladle stories.

Install the CLI and build Ladle

Run these in the package containing an existing Ladle project. No Storybook addon is needed.

npm install --save-dev @juxtapose/cli
npx -p @juxtapose/cli jux browser install
npx ladle build

Use pnpm add -D, yarn add -D, or bun add -d instead if that is your package manager. For the default Ladle output directory, configure:

{
  "platform": "ladle",
  "buildDir": "build",
  "viewport": { "width": 800, "height": 600 }
}

Set buildDir to your actual output directory if customized.

Capture and review

npx -p @juxtapose/cli jux run --all --html
npx -p @juxtapose/cli jux list

The first run reports new stories and exits nonzero because there are no approved baselines. Open .juxtapose/runs/<run-id>/report.html to review the captured stories. After review, approve exact story IDs from your list:

npx -p @juxtapose/cli jux approve --story 'card--default'

Replace the example ID. Commit the resulting manifest and structure metadata, not captured images. Rebuild Ladle after edits, then run jux run --html again.

Use Ladle story metadata

Ladle reads per-story settings from meta.juxtapose, rather than Storybook's parameters.juxtapose. For an existing exported story:

Default.meta = {
  juxtapose: {
    variants: {
      mobile: { viewport: { width: 375, height: 812 } },
      dark: { colorScheme: 'dark' },
    },
  },
};

Each variant gets its own capture and baseline. Your component must respond to the selected theme; the capture setting only emulates the color scheme.

Use the same review rules in CI

Build with npx ladle build, then run jux run --comment --html. Use the same OS as your approved baselines and restore cached baseline images for pixel overlays. The CI setup applies with the build command replaced.

Next: inspect the working Ladle example or the configuration reference.