Inpaint Canvas

Inpainting mask and canvas outpainting. Pro · Image generation › Results and editing

Mask painting (brush, eraser, rectangle, lasso, pen pressure), undo/redo, zoom/pan and outpainting with PNG export.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add inpaint-canvas

npm install valyro-ui-pro

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

Props

Prop	Type	Default
`src`	`string`		Image URL (needs CORS for export when cross-origin). Without it a procedural image is painted from `prompt` + `seed`.
`prompt`	`string`	`''`	Prompt the procedural stand-in is painted from when there is no `src`.
`seed`	`number`	`0`	Seed of the procedural stand-in.
`width` *	`number`		Working size of the image in pixels.
`height` *	`number`		Working height of the image in pixels; the mask is exported at this size (plus any extension).
`tool`	`'brush' \| 'eraser' \| 'rectangle' \| 'lasso' \| 'pan'`		Controlled `tool`; use with `onToolChange`.
`defaultTool`	`'brush' \| 'eraser' \| 'rectangle' \| 'lasso' \| 'pan'`	`'brush'`	Initial `tool` when uncontrolled.
`onToolChange`	`(tool: InpaintTool) => void`		Called with the new `tool` when it changes.
`brush`	`InpaintBrush`		Controlled `brush`; use with `onBrushChange`.
`defaultBrush`	`Partial<InpaintBrush>`		Initial `brush` when uncontrolled.
`onBrushChange`	`(brush: InpaintBrush) => void`		Called with the new `brush` when it changes.
`maskColor`	`string`		Controlled `maskColor`; use with `onMaskColorChange`.
`defaultMaskColor`	`string`		Initial `maskColor` when uncontrolled.
`onMaskColorChange`	`(color: string) => void`		Called with the new `maskColor` when it changes.
`maskColors`	`readonly InpaintMaskColor[]`	`DEFAULT_MASK_COLORS`	Swatches for the mask overlay color; the first is the initial color when none is given.
`overlayOpacity`	`number`	`0.55`	Opacity of the mask overlay. Default 0.55.
`outpaint`	`boolean`	`true`	Edge handles that extend the canvas. Default true.
`extent`	`Extent`		Controlled `extent`; use with `onExtentChange`.
`defaultExtent`	`Extent`	`NO_EXTENT`	Initial `extent` when uncontrolled.
`onExtentChange`	`(extent: Extent) => void`		Called with the new `extent` when it changes.
`extendStep`	`number`	`64`	Snap of the extension. Default 64.
`maxExtend`	`number`	`512`	Largest extension per side. Default 512.
`initialMask`	`string`		Mask to start from, as an image URL (a saved mask or a data URL): white is regenerated, black is kept. Painted once for each image, scaled to it; needs CORS when cross-origin. Undo doesn't go before it.
`onMaskChange`	`(info: { empty: boolean }) => void`		Called after every committed edit: whether anything is masked or extended.
`apiRef`	`Ref<InpaintCanvasApi>`		Receives the canvas handle: `export` the image and mask as PNGs, undo / redo, clear, invert, fit, `isEmpty`.
`actions`	`ReactNode`		Extra controls at the end of the toolbar, e.g. a Generate button.
`stageHeight`	`number \| string`		Height of the drawing area. By default `clamp(320px, 60vh, 620px)`, but never taller than the image needs at the current width (so a phone shows no empty band around it).
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<InpaintCanvasLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Generation Progress — Steps, ETA, live latent preview, queue
Image Result Grid — Result gallery with actions and a lightbox
Image Compare — Before/after comparison: slider, side by side, overlay
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

Previous: Image Compare · Next: Generation History · All Image generation