Canvas Store

Persistence, undo/redo, and real-time collaboration for canvas applications built with @woven-ecs/core.

Installation

npm install @woven-ecs/core @woven-ecs/canvas-store

Features

• Real-time Sync — WebSocket-based multiplayer with conflict resolution. Multiple users can edit the same document simultaneously.
• Local-First — Your app works offline by default. Data lives on the client and syncs to the server when connected.
• Undo/Redo — Full history tracking with configurable depth. Users can undo and redo changes across sessions.
• Persistence — Automatic IndexedDB storage for offline support. Changes are saved locally and synced when back online.
• Migrations — Version your component schemas with automatic migrations. Evolve your data model without breaking existing documents.
• Configurable — Configure sync behavior per component: persist to server, sync ephemerally, store locally, or skip entirely.

Usage

import { World } from '@woven-ecs/core';
import { CanvasStore, Synced } from '@woven-ecs/canvas-store';

import { Position, Velocity, Shape } from './components';

const components = [Position, Velocity, Shape];

const store = new CanvasStore({
  persistence: {
    documentId: 'my-document',
  },
  history: true,
  websocket: {
    documentId: 'my-document',
    url: 'wss://your-server.com',
    clientId: crypto.randomUUID(),
  },
});

await store.initialize({
  components,
});

// Create world with all components including Synced
const world = new World([...components, Synced]);

function loop() {
  world.execute((ctx) => {
    // Sync changes to persistence/network/history
    store.sync(ctx);

    // ...the rest of your loop
  });
  requestAnimationFrame(loop);
}

loop();

Server

For real-time collaboration, use @woven-ecs/canvas-store-server.

Documentation

• Introduction
• How It Works
• Components & Singletons
• Client Setup
• Server Setup
• API Reference

License

MIT