Canvas

The Canvas component provides a React Flow-based canvas for building interactive node-based interfaces. It comes pre-configured with sensible defaults for AI applications, including panning, zooming, and selection behaviors.

The Canvas component is designed to be used with the Node and Edge components. See the Workflow demo for a full example.

Installation

npx ai-elements@latest add canvas

Usage

import { Canvas } from '@/components/ai-elements/canvas';

<Canvas nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} />

Features

Pre-configured React Flow canvas with AI-optimized defaults
Pan on scroll enabled for intuitive navigation
Selection on drag for multi-node operations
Customizable background color using CSS variables
Delete key support (Backspace and Delete keys)
Auto-fit view to show all nodes
Disabled double-click zoom for better UX
Disabled pan on drag to prevent accidental canvas movement
Fully compatible with React Flow props and API

Props

`<Canvas />`

children?:

ReactNode

Child components like Background, Controls, or MiniMap.

[...props]:

ReactFlowProps

Any other React Flow props like nodes, edges, nodeTypes, edgeTypes, onNodesChange, etc.