# 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',
  },
}}
/>