# Kritzel

> The infinite canvas development kit for Angular, React, and Vue.

Choose the application's framework first and read only the matching setup and API references. Do not mix Angular, React, and Vue wrappers.

- Use @kritzel/angular-editor, @kritzel/react-editor, or @kritzel/vue-editor for the complete editor UI. Use the matching engine wrapper for a bare canvas and custom UI; the engine registers no tools by default.

- Give the canvas host an explicit width and height. Wait for the editor's isReady or the engine's isEngineReady event before calling methods, and await asynchronous methods.

- Check the installed package version and prefer its TypeScript types when they differ from these current documentation pages.

- Persistence is opt-in through syncConfig. Use a distinct editorId for each instance when multiple canvases can exist.

- Use addObject/addObjects to insert objects and updateObject to change them. Object positions use world coordinates; use screenToWorld to convert pointer coordinates.

- For a reusable coding-agent integration workflow, install the Kritzel skill with `npx skills add kasual1/kritzel`.

LiveDemo tags are source metadata, not instructions to execute JSX: repoUrl identifies the public framework demo directory, repoFiles lists source files relative to it, and demoPath identifies the runnable example route. For a source file, replace /tree/ with /blob/ in repoUrl and append its repoFiles path. Runnable demos are hosted at https://kasual1.github.io/kritzel/{framework}{demoPath}.

Start with the matching framework's Quick Start and Basic Usage, then follow the focused API or concept pages below. The linked Markdown pages are generated from the same sources as the human documentation.

## Angular

- [Quick Start | Kritzel for Angular](https://kritzel.io/docs/angular/getting-started/quick-start.md): Install and integrate the Kritzel infinite canvas into your Angular application in minutes.
- [Basic Usage | Kritzel for Angular](https://kritzel.io/docs/angular/getting-started/basic-usage.md): Learn the main ways to interact with Kritzel from Angular: set props, listen to events, and call public methods.
- [Controls Concept | Kritzel for Angular](https://kritzel.io/docs/angular/fundamentals/controls.md): Configure Kritzel Editor's built-in controls and context menus.
- [Objects Concept | Kritzel for Angular](https://kritzel.io/docs/angular/fundamentals/objects.md): Understand the core concept of Objects in Kritzel.
- [Persistence Concept | Kritzel for Angular](https://kritzel.io/docs/angular/fundamentals/persistence.md): Understand how Kritzel persists canvas data through sync providers such as IndexedDBSyncProvider.
- [Tools Concept | Kritzel for Angular](https://kritzel.io/docs/angular/fundamentals/tools.md): Understand the core concept of Tools in Kritzel.
- [Viewport Concept | Kritzel for Angular](https://kritzel.io/docs/angular/fundamentals/viewport.md): Understand the core concept of Viewport in Kritzel.
- [Workspaces Concept | Kritzel for Angular](https://kritzel.io/docs/angular/fundamentals/workspaces.md): Understand the core concept of Workspaces in Kritzel.
- [Editor API Reference | Kritzel for Angular](https://kritzel.io/docs/angular/api-reference/editor.md): Complete API reference for the Kritzel editor component: props, methods, and events available in Angular.
- [Engine API Reference | Kritzel for Angular](https://kritzel.io/docs/angular/api-reference/engine.md): Complete API reference for the headless Kritzel engine: rendering, viewport, pointer events, and workspace management.
- [Icons | Kritzel for Angular](https://kritzel.io/docs/angular/api-reference/icons.md): Reference table for the default Kritzel icon names registered by KritzelIconRegistry.
- [Localization Terms | Kritzel for Angular](https://kritzel.io/docs/angular/api-reference/localization-terms.md): Reference for all built-in localization keys and their default English text in Kritzel.
- [Objects | Kritzel for Angular](https://kritzel.io/docs/angular/api-reference/objects.md): Reference for all canvas object types in Kritzel: brush, line, shape, text, and image.
- [Providers | Kritzel for Angular](https://kritzel.io/docs/angular/api-reference/providers.md): Reference for all sync provider classes and configuration interfaces in Kritzel: in-memory, IndexedDB, BroadcastChannel, WebSocket, and Hocuspocus.
- [Theming | Kritzel for Angular](https://kritzel.io/docs/angular/api-reference/theming.md): Reference for every property supported by the KritzelTheme interface.
- [Tools | Kritzel for Angular](https://kritzel.io/docs/angular/api-reference/tools.md): Reference for all drawing tool classes and tool configuration interfaces in Kritzel: base tool, selection, brush, line, shape, text, image, and era...
- [Custom Fonts Concept | Kritzel for Angular](https://kritzel.io/docs/angular/customization/fonts.md): Understand the core concept of Custom Fonts in Kritzel.
- [Custom Icons Concept | Kritzel for Angular](https://kritzel.io/docs/angular/customization/icons.md): Understand how to register and use custom SVG icons in Kritzel.
- [Locales | Kritzel for Angular](https://kritzel.io/docs/angular/customization/locales.md): Understand how to customize Kritzel with locales.
- [Themes | Kritzel for Angular](https://kritzel.io/docs/angular/customization/themes.md): Understand how to customize Kritzel with themes.
- [Agentic Cursors | Kritzel for Angular](https://kritzel.io/docs/angular/advanced/agentic-cursors.md): Add cursors you control from code, move them smoothly across the canvas, and stick them to objects - for example to visualize an AI agent working o...
- [Collaboration Concept | Kritzel for Angular](https://kritzel.io/docs/angular/advanced/collaboration.md): Understand the core concept of Collaboration in Kritzel — cross-tab sync and multi-user editing using Yjs providers.
- [Dynamic Objects Concept | Kritzel for Angular](https://kritzel.io/docs/angular/advanced/dynamic-objects.md): Understand how to embed native HTML or registered framework components as canvas objects in Kritzel.
- [Import/Export Concept | Kritzel for Angular](https://kritzel.io/docs/angular/advanced/import-export.md): Understand how to programmatically export the viewport as PNG or SVG, export the workspace as JSON, and import a workspace from JSON in Kritzel.
- [User Management Concept | Kritzel for Angular](https://kritzel.io/docs/angular/advanced/user-management.md): Understand how to configure Kritzel's user management and login dialog with authentication providers.
- [Interactive Blueprint & Defect Pin Mapper | Kritzel for Angular](https://kritzel.io/docs/angular/examples/blueprint-defect-mapper.md): Incorporate static architectural blueprints and allow facility inspectors to register defect pins onto custom vector layouts.
- [Image Annotation Studio Example | Kritzel for Angular](https://kritzel.io/docs/angular/examples/image-annotation-studio.md): Build an annotation surface with a centered image and a custom external toolbar with color swatches and sketch or text modes.
- [Object Explorer Example | Kritzel for Angular](https://kritzel.io/docs/angular/examples/object-explorer.md): Build a structured tree-based object explorer with filtering, visibility toggles, and a live inspector for canvas objects.
- [Slideshow Presentation Example | Kritzel for Angular](https://kritzel.io/docs/angular/examples/slideshow-presentation.md): Build a beautiful slideshow presentation layout on an infinite canvas with horizontal slide guides and dynamic slide boundaries.
- [License Activation | Kritzel for Angular](https://kritzel.io/docs/angular/license.md): Activate Kritzel with a license key for production use in your Angular application.

## React

- [Quick Start | Kritzel for React](https://kritzel.io/docs/react/getting-started/quick-start.md): Install and integrate the Kritzel infinite canvas into your React application in minutes.
- [Basic Usage | Kritzel for React](https://kritzel.io/docs/react/getting-started/basic-usage.md): Learn the main ways to interact with Kritzel from React: set props, listen to events, and call public methods.
- [Controls Concept | Kritzel for React](https://kritzel.io/docs/react/fundamentals/controls.md): Configure Kritzel Editor's built-in controls and context menus.
- [Objects Concept | Kritzel for React](https://kritzel.io/docs/react/fundamentals/objects.md): Understand the core concept of Objects in Kritzel.
- [Persistence Concept | Kritzel for React](https://kritzel.io/docs/react/fundamentals/persistence.md): Understand how Kritzel persists canvas data through sync providers such as IndexedDBSyncProvider.
- [Tools Concept | Kritzel for React](https://kritzel.io/docs/react/fundamentals/tools.md): Understand the core concept of Tools in Kritzel.
- [Viewport Concept | Kritzel for React](https://kritzel.io/docs/react/fundamentals/viewport.md): Understand the core concept of Viewport in Kritzel.
- [Workspaces Concept | Kritzel for React](https://kritzel.io/docs/react/fundamentals/workspaces.md): Understand the core concept of Workspaces in Kritzel.
- [Editor API Reference | Kritzel for React](https://kritzel.io/docs/react/api-reference/editor.md): Complete API reference for the Kritzel editor component: props, methods, and events available in React.
- [Engine API Reference | Kritzel for React](https://kritzel.io/docs/react/api-reference/engine.md): Complete API reference for the headless Kritzel engine: rendering, viewport, pointer events, and workspace management.
- [Icons | Kritzel for React](https://kritzel.io/docs/react/api-reference/icons.md): Reference for the default Kritzel icon names available to Kritzel React applications.
- [Localization Terms | Kritzel for React](https://kritzel.io/docs/react/api-reference/localization-terms.md): Reference for all built-in localization keys and their default English text in Kritzel.
- [Objects | Kritzel for React](https://kritzel.io/docs/react/api-reference/objects.md): Reference for all canvas object types in Kritzel: brush, line, shape, text, and image.
- [Providers | Kritzel for React](https://kritzel.io/docs/react/api-reference/providers.md): Reference for all sync provider classes and configuration interfaces in Kritzel: in-memory, IndexedDB, BroadcastChannel, WebSocket, and Hocuspocus.
- [Theming | Kritzel for React](https://kritzel.io/docs/react/api-reference/theme-tokens.md): Customize the look and feel of the Kritzel editor with CSS variables and theme tokens.
- [Theming | Kritzel for React](https://kritzel.io/docs/react/api-reference/theming.md): Reference for the KritzelTheme properties available to Kritzel React applications.
- [Tools | Kritzel for React](https://kritzel.io/docs/react/api-reference/tools.md): Reference for all drawing tool classes and tool configuration interfaces in Kritzel: base tool, selection, brush, line, shape, text, image, and era...
- [Types & Interfaces | Kritzel for React](https://kritzel.io/docs/react/api-reference/types.md): TypeScript types and interfaces exposed by the Kritzel library for use in React projects.
- [Custom Fonts Concept | Kritzel for React](https://kritzel.io/docs/react/customization/fonts.md): Understand the core concept of Custom Fonts in Kritzel.
- [Custom Icons Concept | Kritzel for React](https://kritzel.io/docs/react/customization/icons.md): Understand how to register and use custom SVG icons in Kritzel.
- [Locales | Kritzel for React](https://kritzel.io/docs/react/customization/locales.md): Understand how to customize Kritzel with locales.
- [Themes | Kritzel for React](https://kritzel.io/docs/react/customization/themes.md): Understand how to customize Kritzel with themes.
- [Agentic Cursors | Kritzel for React](https://kritzel.io/docs/react/advanced/agentic-cursors.md): Add cursors you control from code, move them smoothly across the canvas, and stick them to objects - for example to visualize an AI agent working o...
- [Collaboration Concept | Kritzel for React](https://kritzel.io/docs/react/advanced/collaboration.md): Understand the core concept of Collaboration in Kritzel - cross-tab sync and multi-user editing using Yjs providers.
- [Dynamic Objects Concept | Kritzel for React](https://kritzel.io/docs/react/advanced/dynamic-objects.md): Understand how to embed native HTML or registered framework components as canvas objects in Kritzel.
- [Import/Export Concept | Kritzel for React](https://kritzel.io/docs/react/advanced/import-export.md): Understand how to programmatically export the viewport as PNG or SVG, export the workspace as JSON, and import a workspace from JSON in Kritzel.
- [User Management Concept | Kritzel for React](https://kritzel.io/docs/react/advanced/user-management.md): Understand how to configure Kritzel's user management and login dialog with authentication providers.
- [Interactive Blueprint & Defect Pin Mapper | Kritzel for React](https://kritzel.io/docs/react/examples/blueprint-defect-mapper.md): Incorporate static architectural blueprints and allow facility inspectors to register defect pins onto custom vector layouts.
- [Image Annotation Studio Example | Kritzel for React](https://kritzel.io/docs/react/examples/image-annotation-studio.md): Build an annotation surface with a centered image and a custom external toolbar with color swatches and sketch or text modes.
- [Object Explorer Example | Kritzel for React](https://kritzel.io/docs/react/examples/object-explorer.md): Build a structured tree-based object explorer with filtering, visibility toggles, and a live inspector for canvas objects.
- [Slideshow Presentation Example | Kritzel for React](https://kritzel.io/docs/react/examples/slideshow-presentation.md): Build a beautiful slideshow presentation layout on an infinite canvas with horizontal slide guides and dynamic slide boundaries.
- [License Activation | Kritzel for React](https://kritzel.io/docs/react/license.md): Activate Kritzel with a license key for production use in your React application.

## Vue

- [Quick Start | Kritzel for Vue](https://kritzel.io/docs/vue/getting-started/quick-start.md): Install and integrate the Kritzel infinite canvas into your Vue application in minutes.
- [Basic Usage | Kritzel for Vue](https://kritzel.io/docs/vue/getting-started/basic-usage.md): Learn the main ways to interact with Kritzel from Vue: set props, listen to events, and call public methods.
- [Controls Concept | Kritzel for Vue](https://kritzel.io/docs/vue/fundamentals/controls.md): Configure Kritzel Editor's built-in controls and context menus.
- [Objects Concept | Kritzel for Vue](https://kritzel.io/docs/vue/fundamentals/objects.md): Understand the core concept of Objects in Kritzel.
- [Persistence Concept | Kritzel for Vue](https://kritzel.io/docs/vue/fundamentals/persistence.md): Understand how Kritzel persists canvas data through sync providers such as IndexedDBSyncProvider.
- [Tools Concept | Kritzel for Vue](https://kritzel.io/docs/vue/fundamentals/tools.md): Understand the core concept of Tools in Kritzel.
- [Viewport Concept | Kritzel for Vue](https://kritzel.io/docs/vue/fundamentals/viewport.md): Understand the core concept of Viewport in Kritzel.
- [Workspaces Concept | Kritzel for Vue](https://kritzel.io/docs/vue/fundamentals/workspaces.md): Understand the core concept of Workspaces in Kritzel.
- [Editor API Reference | Kritzel for Vue](https://kritzel.io/docs/vue/api-reference/editor.md): Complete API reference for the Kritzel editor component: props, methods, and events available in Vue.
- [Engine API Reference | Kritzel for Vue](https://kritzel.io/docs/vue/api-reference/engine.md): Complete API reference for the headless Kritzel engine: rendering, viewport, pointer events, and workspace management.
- [Icons | Kritzel for Vue](https://kritzel.io/docs/vue/api-reference/icons.md): Reference table for the default Kritzel icon names registered by KritzelIconRegistry.
- [Localization Terms | Kritzel for Vue](https://kritzel.io/docs/vue/api-reference/localization-terms.md): Reference for all built-in localization keys and their default English text in Kritzel.
- [Objects | Kritzel for Vue](https://kritzel.io/docs/vue/api-reference/objects.md): Reference for all canvas object types in Kritzel: brush, line, shape, text, and image.
- [Providers | Kritzel for Vue](https://kritzel.io/docs/vue/api-reference/providers.md): Reference for all sync provider classes and configuration interfaces in Kritzel: in-memory, IndexedDB, BroadcastChannel, WebSocket, and Hocuspocus.
- [Theming | Kritzel for Vue](https://kritzel.io/docs/vue/api-reference/theming.md): Reference for every property supported by the KritzelTheme interface.
- [Tools | Kritzel for Vue](https://kritzel.io/docs/vue/api-reference/tools.md): Reference for all drawing tool classes and tool configuration interfaces in Kritzel: base tool, selection, brush, line, shape, text, image, and era...
- [Types & Interfaces | Kritzel for Vue](https://kritzel.io/docs/vue/api-reference/types.md): TypeScript types and interfaces exposed by the Kritzel library for use in Vue projects.
- [Custom Fonts Concept | Kritzel for Vue](https://kritzel.io/docs/vue/customization/fonts.md): Understand the core concept of Custom Fonts in Kritzel.
- [Custom Icons Concept | Kritzel for Vue](https://kritzel.io/docs/vue/customization/icons.md): Understand how to register and use custom SVG icons in Kritzel.
- [Locales | Kritzel for Vue](https://kritzel.io/docs/vue/customization/locales.md): Understand how to customize Kritzel with locales.
- [Themes | Kritzel for Vue](https://kritzel.io/docs/vue/customization/themes.md): Understand how to customize Kritzel with themes.
- [Agentic Cursors | Kritzel for Vue](https://kritzel.io/docs/vue/advanced/agentic-cursors.md): Add cursors you control from code, move them smoothly across the canvas, and stick them to objects - for example to visualize an AI agent working o...
- [Collaboration Concept | Kritzel for Vue](https://kritzel.io/docs/vue/advanced/collaboration.md): Understand the core concept of Collaboration in Kritzel - cross-tab sync and multi-user editing using Yjs providers.
- [Dynamic Objects Concept | Kritzel for Vue](https://kritzel.io/docs/vue/advanced/dynamic-objects.md): Understand how to embed native HTML or registered framework components as canvas objects in Kritzel.
- [Import/Export Concept | Kritzel for Vue](https://kritzel.io/docs/vue/advanced/import-export.md): Understand how to programmatically export the viewport as PNG or SVG, export the workspace as JSON, and import a workspace from JSON in Kritzel.
- [User Management Concept | Kritzel for Vue](https://kritzel.io/docs/vue/advanced/user-management.md): Understand how to configure Kritzel's user management and login dialog with authentication providers.
- [Interactive Blueprint & Defect Pin Mapper | Kritzel for Vue](https://kritzel.io/docs/vue/examples/blueprint-defect-mapper.md): Incorporate static architectural blueprints and allow facility inspectors to register defect pins onto custom vector layouts.
- [Image Annotation Studio Example | Kritzel for Vue](https://kritzel.io/docs/vue/examples/image-annotation-studio.md): Build an annotation surface with a centered image and a custom external toolbar with color swatches and sketch or text modes.
- [Object Explorer Example | Kritzel for Vue](https://kritzel.io/docs/vue/examples/object-explorer.md): Build a structured tree-based object explorer with filtering, visibility toggles, and a live inspector for canvas objects.
- [Slideshow Presentation Example | Kritzel for Vue](https://kritzel.io/docs/vue/examples/slideshow-presentation.md): Build a beautiful slideshow presentation layout on an infinite canvas with horizontal slide guides and dynamic slide boundaries.
- [License Activation | Kritzel for Vue](https://kritzel.io/docs/vue/license.md): Activate Kritzel with a license key for production use in your Vue application.