Plugins

Plugins extend the Woven Canvas editor with new tools, behaviors, and functionality. Each plugin bundles together components, systems, commands, and keybinds into a reusable package.

Built-in Plugins

Woven Canvas includes several built-in plugins that provide core functionality:

Plugin	Description
Core	Input handling, block types, selection, transform, frames
Canvas Controls	Pan, zoom, and scroll navigation
Pen	Freehand drawing with pressure sensitivity
Eraser	Object eraser tool
Arrows	Arc and elbow arrow connectors

Using Plugins

All built-in plugins are included by default when using WovenCanvas. You can configure or disable them via the pluginOptions prop:

<template>
  <!-- All plugins enabled with defaults -->
  <WovenCanvas />

  <!-- Disable specific plugins -->
  <WovenCanvas :plugin-options="{ pen: false, eraser: false }" />

  <!-- Configure plugin options -->
  <WovenCanvas
    :plugin-options="{
      controls: { minZoom: 0.1, maxZoom: 5 },
    }"
  />
</template>

To add custom plugins alongside the built-ins, use the editor prop:

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

<template>
  <WovenCanvas :editor="{ plugins: [MyCustomPlugin()] }" />
</template>

Plugin Architecture

Each plugin can provide:

• Components — Custom ECS components for data storage
• Block definitions — Configure how blocks behave (resize, rotate, etc.)
• Systems — Update logic that runs each frame
• Keybinds — Keyboard shortcut mappings
• Commands — Actions that can be triggered programmatically
• Resources — Configuration options accessible at runtime

For details on building your own plugins, see Plugins and the Create a Plugin example.

For a deep dive into the Entity Component System architecture, see the woven-ecs documentation.