• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
drewmcdonald

drewmcdonald

promptCompare

Public
Like
promptCompare
Home
Code
7
.claude
3
backend
2
docs
1
frontend
4
shared
.mcp.json
deno.json
Environment variables
2
Branches
1
Pull requests
Remixes
History
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
.claude
/
skills
/
ai-elements
/
references
/
canvas.md
Code
/
.claude
/
skills
/
ai-elements
/
references
/
canvas.md
Search
…
Viewing readonly version of main branch: v73
View latest version
canvas.md

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.

Installation

npx ai-elements@latest add canvas

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

PropTypeDefaultDescription
childrenReactNode-Child components like Background, Controls, or MiniMap.
...propsReactFlowProps-Any other React Flow props like nodes, edges, nodeTypes, edgeTypes, onNodesChange, etc.
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2026 Val Town, Inc.