Node Canvas

Infinite node canvas: typed ports, links, groups, minimap, graph execution. Pro · Image generation › Node graph

Installation

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

npm install valyro-ui-pro

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

Props

Prop	Type	Default
`editor`	`NodeGraphEditor`		State from `useNodeGraph`, shared with NodeInspector, NodeLibrary… Without it the canvas keeps its own.
`types`	`readonly NodeTypeDef[]`		Node type registry (when no `editor` is passed).
`graph`	`NodeGraph`		Controlled graph (when no `editor` is passed).
`defaultGraph`	`NodeGraph`		Initial `graph` when uncontrolled.
`onGraphChange`	`(graph: NodeGraph) => void`		Called with the new `graph` when it changes.
`execution`	`Readonly<Record<string, NodeExecutionState>>`	`NO_EXECUTION`	Run state per node id: status, progress, error, output images.
`errors`	`readonly GraphError[]`	`NO_ERRORS`	Validation problems to show: missing inputs get a red port and an error badge.
`viewport`	`Viewport`		Controlled `viewport`; use with `onViewportChange`.
`defaultViewport`	`Viewport`		Initial `viewport` when uncontrolled.
`onViewportChange`	`(viewport: Viewport) => void`		Called with the new `viewport` when it changes.
`fitViewOnMount`	`boolean`	`true`	Fits the graph into view on mount (ignored with a controlled `viewport`).
`minFitZoom`	`number`	`0.75`	Smallest zoom the fit on mount settles on, so ports and widgets stay readable. A graph that does not fit at it opens at its left and top edges, clear of the controls and minimap, moved just enough to show the selection; its right / bottom end is cut. The Fit button and `apiRef.fitView()` still show the whole graph.
`minZoom`	`number`	`0.1`	Smallest zoom factor reachable by wheel, pinch, the zoom buttons and fit. @default 0.1
`maxZoom`	`number`	`2.5`	Largest zoom factor reachable by wheel, pinch and the zoom buttons; fit never zooms past 1. @default 2.5
`gridSize`	`number`	`20`	Grid spacing in canvas units, also the snap step. @default 20
`snapToGrid`	`boolean`		Controlled `snapToGrid`; use with `onSnapToGridChange`.
`defaultSnapToGrid`	`boolean`	`false`	Initial `snapToGrid` when uncontrolled.
`onSnapToGridChange`	`(snap: boolean) => void`		Called with the new `snapToGrid` when it changes.
`locked`	`boolean`		Locked: pan, zoom and select only.
`defaultLocked`	`boolean`	`false`	Initial `locked` when uncontrolled.
`onLockedChange`	`(locked: boolean) => void`		Called with the new `locked` when it changes.
`minimap`	`boolean`	`true`	Overview map in the corner; click or drag in it to move the view. Hidden while the canvas is under 640 px wide or 360 px tall.
`controls`	`boolean`	`true`	Zoom, fit, snap and lock buttons. @default true
`portTypes`	`PortTypeStyles`		Wire colour / display name per socket type; defaults come from the theme's wire palette.
`children`	`ReactNode`		Rendered over the canvas, e.g. a floating toolbar or run button.
`locale`	`string`		Number formatting in widgets. Defaults to the ThemeProvider locale.
`labels`	`Partial<NodeCanvasLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`widgetLabels`	`Partial<NodeWidgetLabels>`		Text of the built-in node widgets: number steppers, seed controls and image upload.
`apiRef`	`Ref<NodeCanvasApi>`		Imperative fit / zoom / focus.

Related components

Node Library — Node palette: fuzzy search, categories, favorites, drag onto the canvas
Node Inspector — Selected node properties: title, color, mode, parameters, ports
Execution Queue — Run queue and history: progress, ETA, previews, cancel and retry
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
Generation Progress — Steps, ETA, live latent preview, queue
Image Result Grid — Result gallery with actions and a lightbox

Previous: Image Adjustments · Next: Node Library · All Image generation