gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/canvas.md

Canvas

URL: /components/canvas

---

title: Canvas description: A React Flow-based canvas component for building interactive node-based interfaces. path: elements/components/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](/elements/components/node) and [Edge](/elements/components/edge) components. See the [Workflow](/elements/examples/workflow) demo for a full example.

Installation

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 />

<TypeTable type={{ children: { description: 'Child components like Background, Controls, or MiniMap.', type: 'ReactNode', }, '...props': { description: 'Any other React Flow props like nodes, edges, nodeTypes, edgeTypes, onNodesChange, etc.', type: 'ReactFlowProps', }, }} />