Canvas Configuration

Core options that control the canvas appearance and viewport behavior.

INTERACTIVE 
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
        { id: 'b', position: { x: 250, y: 0 }, data: { label: 'Node B' } },
        { id: 'c', position: { x: 125, y: 100 }, data: { label: 'Node C' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
        { id: 'e2', source: 'a', target: 'c' },
    ],
    background: 'cross',
    backgroundGap: 30,
    fitViewOnInit: true,
    minZoom: 0.5,
    maxZoom: 3,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>

Options

Option Type Default Description
pannable boolean true Enable viewport panning.
zoomable boolean true Enable viewport zooming.
interactive boolean true Master interactivity switch. Set false to start the canvas locked (no pan, zoom, or drag) without a post-ready toggleInteractive() call. It overrides the per-axis pannable/zoomable at init (both forced off); toggleInteractive() (or the controls toggle) then restores the per-axis intent. Distinct from the per-node locked flag, which freezes a single node.
containerHeight 'auto' | 'fill' | number | string 'auto' Canvas container height. 'auto' = the 400px fallback, 'fill' = 100% of the parent, a number = pixels, or any CSS length string ('80vh'). Overrides the --flow-container-height CSS variable.
minZoom number 0.5 Minimum zoom level.
maxZoom number 2 Maximum zoom level.
fitViewOnInit boolean false Auto-fit all nodes in view after initialization.
background string | BackgroundLayer[] 'dots' Background pattern: 'dots', 'lines', 'cross', 'none', or array of layers.
backgroundGap number 20 Grid spacing in pixels. Overrides --flow-bg-pattern-gap.
patternColor string — Pattern color. Overrides --flow-bg-pattern-color. Supports rgba().
ariaLabel string 'Flow diagram' ARIA label for the container.
colorMode 'light' | 'dark' | 'system' — Color mode management. 'system' tracks OS preference. Adds/removes .dark class.
debug boolean false Enable debug logging to console.

See also