Image Compare

Before/after comparison: slider, side by side, overlay. Pro · Image generation › Results and editing

Before / after comparison: draggable split, side by side, or an opacity overlay.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add image-compare

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ImageCompare } from 'valyro-ui-pro';

Prop	Type	Default
`before` *	`ImageCompareImage`		Original image: before the divider, first side by side, underneath in overlay.
`after` *	`ImageCompareImage`		Result image: after the divider, second side by side, faded over `before` in overlay. Its size sets the aspect ratio.
`mode`	`'slider' \| 'side-by-side' \| 'overlay'`		Controlled `mode`; use with `onModeChange`.
`defaultMode`	`'slider' \| 'side-by-side' \| 'overlay'`	`'slider'`	Initial `mode` when uncontrolled.
`onModeChange`	`(mode: ImageCompareMode) => void`		Called with the new `mode` when it changes.
`position`	`number`		Divider position in percent from the start edge.
`defaultPosition`	`number`	`50`	Initial `position` when uncontrolled.
`onPositionChange`	`(position: number) => void`		Called with the new `position` when it changes.
`opacity`	`number`		Opacity of "after" in overlay mode, 0–1.
`defaultOpacity`	`number`	`0.5`	Initial `opacity` when uncontrolled.
`onOpacityChange`	`(opacity: number) => void`		Called with the new `opacity` when it changes.
`showModes`	`boolean`	`true`	Mode switch above the images. Default true.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<ImageCompareLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Generation Progress — Steps, ETA, live latent preview, queue
Image Result Grid — Result gallery with actions and a lightbox
Inpaint Canvas — Inpainting mask and canvas outpainting
Generation History — Generation history by day, with filters
Image Adjustments — Color grading: upload, fit and seven filter sliders
Prompt Editor — Prompt and negative prompt: weights, LoRA, autocomplete, token count
Generation Settings — Model, sampler, steps, CFG, size, presets
Aspect Ratio Picker — Aspect ratio and exact size
Seed Input — Seed: random, fixed, increment
LoRA Stack — LoRA stack: strengths, toggles, order, trigger words
Style Presets — Style cards with previews and weights
Reference Image Input — Reference image for img2img and ControlNet