61 lines
1.6 KiB
Markdown
61 lines
1.6 KiB
Markdown
# 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.
|
|
|
|
<Callout>
|
|
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.
|
|
</Callout>
|
|
|
|
## Installation
|
|
|
|
<ElementsInstaller path="canvas" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Canvas } from "@/components/ai-elements/canvas";
|
|
```
|
|
|
|
```tsx
|
|
<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',
|
|
},
|
|
}}
|
|
/>
|