Canvas

A React Flow-based canvas component for building interactive node-based interfaces.

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

npx ai-elements@latest add canvas

npx shadcn@latest add @ai-elements/canvas

npx shadcn@latest add @ai-elements/canvas

import { Background, ReactFlow, type ReactFlowProps } from "@xyflow/react";
import type { ReactNode } from "react";
import "@xyflow/react/dist/style.css";
import { Controls } from "./controls";

type CanvasProps = ReactFlowProps & {
  children?: ReactNode;
};

export const Canvas = ({ children, ...props }: CanvasProps) => (
  <ReactFlow
    deleteKeyCode={["Backspace", "Delete"]}
    fitView
    panOnDrag={false}
    panOnScroll
    selectionOnDrag={true}
    zoomOnDoubleClick={false}
    {...props}
  >
    <Background bgColor="var(--sidebar)" />
    <Controls />
    {children}
  </ReactFlow>
);

import { Background, ReactFlow, type ReactFlowProps } from "@xyflow/react";import type { ReactNode } from "react";import "@xyflow/react/dist/style.css";import { Controls } from "./controls";type CanvasProps = ReactFlowProps & {  children?: ReactNode;};export const Canvas = ({ children, ...props }: CanvasProps) => (  <ReactFlow    deleteKeyCode={["Backspace", "Delete"]}    fitView    panOnDrag={false}    panOnScroll    selectionOnDrag={true}    zoomOnDoubleClick={false}    {...props}  >    <Background bgColor="var(--sidebar)" />    <Controls />    {children}  </ReactFlow>);

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

Prop

Type

Installation

Usage

Features

Props

<Canvas />

On this page

`<Canvas />`