Canvus SDK

A headless, framework-agnostic TypeScript SDK for building visual layout editing workspaces.

Canvus lets you build CMS page-builders, A/B testing editors, and high-performance visual IDE tools using web-native browser capabilities — no iframes, no virtual DOM, no framework lock-in.

Why Canvus?

Shadow DOM for content isolation + Canvas overlay for interaction affordances

🏗️ Twin-Layer Architecture

Pure TypeScript, compiling to a lightweight ESM bundle with no runtime frameworks

⚡ Zero Dependencies

Discrete mutation payloads for host-managed undo/redo and multiplayer collaboration

🔄 Operation-Driven State

Built-in plain-text editor with escape hatch for TipTap, Quill, or any custom editor

✏️ Pluggable Text Editing

Quick Example

import { Workspace } from '@canvus/core'
 
// Mount the workspace onto a container element
const ws = new Workspace(document.getElementById('editor')!, {
  onHTMLCommit(id, html) {
    console.log(`Node ${id} updated:`, html)
  },
  onOperationsGenerated(ops) {
    // Push to your undo/redo stack
    historyStack.push(ops)
  },
})
 
// Add a content node
ws.addNode({
  id: 'hero-card',
  rawMarkup: '<div class="p-6 bg-white rounded-lg shadow">Hello, Canvus!</div>',
  currentRect: null,
})

Explore the Docs

Section	Description
Getting Started	Installation, setup, and your first workspace
Overview	Architecture, design philosophy, and project goals
Core Concepts	Workspace, Shadow DOM, Canvas overlay, and more
SDK Reference	Complete API documentation for all modules
Guides	Operations, custom editors, layout system, and importing
Architecture	Module roles, developer guidelines, and ADRs

✨ Playground