Vue SDK

@open-pencil/vue exists so OpenPencil can be more than a standalone design app.

The goal is to make OpenPencil a toolkit you can embed into other products, internal tools, and workflow-specific editors — not just a single default UI.

The OpenPencil app is one composition of that toolkit. The SDK is how you build a different one.

It gives you:

• injected editor context
• CanvasKit-backed canvas rendering
• selection, commands, menu, property-panel, and variables composables
• headless structural primitives like PageListRoot, PropertyListRoot, and ToolbarRoot
• built-in i18n primitives for menus, panels, dialogs, and custom locale pickers

Start here

Getting Started

Install the package, create an editor instance, and mount the core primitives.

Architecture

See how composables, primitives, and editor context fit together.

Guides

Build custom shells, property panels, and navigation panels.

API Reference

Browse components, composables, and advanced public APIs.

Why the SDK exists

Different products and teams need different editing surfaces.

Sometimes you want a full design editor. Sometimes you want a focused canvas inside another app. Sometimes you want an internal workflow tool, a template editor, or an AI-assisted editing surface built around a narrow use case.

The SDK is the layer that makes those possible.

Design principles

• Headless first: logic and structure, not app styling
• Composable over wrapper: use composables when there is no meaningful structural coordination
• Intentional public API: stable exports from packages/vue/src/index.ts
• Framework-aware: Vue integration over @open-pencil/core

How to think about the package

The SDK has two main layers:

1. Composables for editor state and actions
2. Primitives for meaningful UI structure

If you only need editor state and actions, start with composables. If you are building reusable editor UI building blocks, start with primitives.

API sections

• Components
• Composables
• Advanced