Canvas

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

The Canvas component provides a Vue 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.

Install using CLI

AI Elements Vue
shadcn-vue CLI
npx ai-elements-vue@latest add canvas

Install Manually

Copy and paste the following code in the same folder.

Canvas.vue
index.ts
<script setup lang="ts">
import type { FlowEmits, FlowProps, FlowSlots } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { VueFlow } from '@vue-flow/core'
import { useForwardPropsEmits } from 'reka-ui'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

const props = withDefaults(defineProps<FlowProps>(), {
  deleteKeyCode: () => ['Backspace', 'Delete'],
  fitViewOnInit: true,
  panOnDrag: false,
  panOnScroll: true,
  selectNodesOnDrag: true,
  zoomOnDoubleClick: false,
})

const emits = defineEmits<FlowEmits>()
const slots = defineSlots<FlowSlots>()
const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <VueFlow data-slot="canvas" v-bind="forwarded">
    <Background />

    <template v-if="slots['connection-line']" #connection-line="connectionLineProps">
      <slot name="connection-line" v-bind="connectionLineProps" />
    </template>

    <template v-if="slots['zoom-pane']" #zoom-pane>
      <slot name="zoom-pane" />
    </template>

    <slot />
  </VueFlow>
</template>

Features

  • Pre-configured Vue 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 Vue Flow props and API

Props

<Canvas />

<slot />FlowSlots
Child components like Background, Controls, or MiniMap.
propsFlowProps
Any other Vue Flow props like nodes, edges, nodeTypes, edgeTypes, onNodesChange, etc.
Edit this page
Tool
Connection