Skip to main content

Workspaces

Overview​

A Workspace in Kritzel is essentially a container for the user's canvas and its corresponding state. While an Object represents a single visual element on the canvas (like a shape or a text box), a Workspace contains the entire collection of objects, the current view transformation (zoom and pan), and the configuration of the canvas itself.

When a user interacts with the canvas, they are making changes within the active workspace. Kritzel's state machine manages everything inside a workspace as a unified whole. You can think of a Workspace as a complete document or page.

Workspaces are the fundamental unit for real-time collaboration. When multiple users collaborate, they synchronize the state of a shared workspace, ensuring everyone sees the exact same objects in the same locations.

Switching Between Workspaces​

By default, Kritzel provides a built-in UI for managing multiple workspaces. However, if you hide this UI (hideWorkspaceManager), you can programmatically build your own workspace navigation. The <kritzel-editor> exposes an [activeWorkspaceId] input and an (activeWorkspaceChange) output binding that make switching between canvases seamless.

Managing Workspaces (Create, Read, Update, Delete)​

Kritzel allows you to fully manage the lifecycle of workspaces. You can create new blank canvases, update their metadata (like custom names), or delete them entirely via the editor's asynchronous workspace API (createWorkspace(), updateWorkspace(), deleteWorkspace()). The component emits (workspacesChange) whenever the overall collection updates, so your custom UI stays perfectly in sync.

  • Getting workspace state (getWorkspaces(), getActiveWorkspace())
  • Modifying workspaces (createWorkspace(), updateWorkspace(), deleteWorkspace())
  • Component integration bindings ([activeWorkspaceId], (activeWorkspaceChange), (workspacesChange))

For a comprehensive view, see the API Reference.