Kritzel Engine for Angular

Build infinite canvas and collaborative whiteboard experiences in Angular with Kritzel's native wrapper and TypeScript-first API.

Kritzel is a framework-agnostic infinite canvas and collaborative whiteboard engine. It provides web components that work natively in any framework, with a first-class Angular wrapper for idiomatic template integration.

Kritzel handles the hard parts of canvas-based applications — infinite pan/zoom, hit-testing, CRDT-based collaboration, undo/redo, and cross-browser rendering — so you can focus on your product's domain logic.

Full documentation: kritzel.io/docs/angular/getting-started/quick-start

Installation

npm install @kritzel/angular-engine

Setup

Register Kritzel in your application config:

import { ApplicationConfig } from '@angular/core';
import { provideKritzel } from '@kritzel/angular-engine';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideKritzel(),
  ],
};

Then use the component in your template:

import { Component } from '@angular/core';
import { KritzelEngine } from '@kritzel/angular-engine';

@Component({
  selector: 'app-editor',
  imports: [KritzelEngine],
  template: `<kritzel-engine></kritzel-engine>`,
  styles: [`kritzel-engine { display: block; width: 100%; height: 100vh; }`],
})
export class EditorComponent {}

This renders the lower-level engine canvas without the editor toolbar shell.

Optional Enhancements

Persist Canvas State

By default, the engine uses an empty sync provider list, so canvas state is reset on reload. To persist objects locally across page reloads, configure syncConfig explicitly with IndexedDBSyncProvider.

import { Component } from '@angular/core';
import { IndexedDBSyncProvider, KritzelEngine, KritzelSyncConfig } from '@kritzel/angular-engine';

@Component({
  selector: 'app-editor',
  imports: [KritzelEngine],
  template: `<kritzel-engine [syncConfig]="syncConfig"></kritzel-engine>`,
  styles: [`kritzel-engine { display: block; width: 100%; height: 100vh; }`],
})
export class EditorComponent {
  readonly syncConfig: KritzelSyncConfig = {
    providers: [IndexedDBSyncProvider],
  };
}

Apply Full Viewport Styling

To ensure the Kritzel engine occupies the entire viewport and prevents unwanted scrolling, add the following CSS to your global stylesheet (e.g. styles.css):

html,
body,
app-root {
  width: 100dvw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
}

Include Mobile Viewport Meta Tag

For optimal rendering and responsiveness on mobile devices, add this meta tag within the <head> section of your index.html:

<meta
  name="viewport"
  content="viewport-fit=cover, width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, interactive-widget=resizes-content"
/>

Fundamentals

Kritzel is composed of a small set of core concepts that work together to power your canvas experience:

• Components — Two entry points, a batteries-included editor and a headless engine, to match any integration style.
• Tools — State-machine interaction handlers that define how users draw, select, and manipulate the canvas.
• Objects — The visual building blocks on the canvas — paths, shapes, text, and images with shared spatial properties.
• Workspaces — Containers that manage an entire canvas collection, view state, and editor configuration.
• Theming — Built-in light and dark themes with full CSS variable customization to match your brand.
• Collaboration — Real-time multi-user sync powered by Yjs CRDTs with pluggable transport providers.

Learn more in the full documentation.

License

Kritzel is released under the MIT License.