An infinite canvas SDK built for Vue.

npm install @woven-canvas/vue

<script setup lang="ts">
import '@woven-canvas/vue/style.css'
import { WovenCanvas } from '@woven-canvas/vue'
</script>

<template>
  <WovenCanvas
    :background="{ kind: 'dots' }"
    style="width: 100%; height: 100vh"
  />
</template>

Try it

Key Features

Open Source

Unrestricted MIT license. Read the source code, create issues, and contribute on GitHub.

Fully Customizable

Replace any built-in block with your own Vue component. Create custom tools, menus, and interactions that fit your exact needs.

Built for Vue

First-class Vue 3 integration with reactive composables. Access canvas state with useComponent, useQuery, and useSingleton.

Plugin Architecture

Extend the editor with plugins that add blocks, behaviors, keybinds, and more.

Real-time Collaboration

Built-in support for multiplayer with simultaneous editing, live cursors, and local-first architecture.

Canvas Essentials

Pan, zoom, select, resize, rotate, copy/paste, freehand drawing, arrows, and eraser - all included out of the box.

Easy to Customize

Fully customize every aspect of the canvas. Replace built-in blocks with your own Vue components, create custom tools and interactions, and access the full power of the editor through a rich API.

<template>
  <WovenCanvas>
    <!-- Replace the default sticky note with your own -->
    <template #block:sticky-note="props">
      <MyCustomStickyNote v-bind="props" />
    </template>

    <!-- Add a completely new block type -->
    <template #block:my-card="props">
      <MyCard v-bind="props" />
    </template>
  </WovenCanvas>
</template>

• Custom Blocks — Render any Vue component as a canvas block
• Custom Tools — Add toolbar buttons that create your block types
• Custom Menus — Context-sensitive menus for selected blocks
• Custom Everything — Full access to canvas state and events for limitless customization

Read the Docs

• Quick Start — Create your first Woven Canvas app
• Architecture — Understand the core architecture
• Using the Editor API — Interact with the canvas using the editor API
• Create a Custom Block — Build your own block type