kritzel-angular
Kritzel 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/overview
Installation
npm install kritzel-angularSetup
Register Kritzel in your application config:
import { ApplicationConfig } from '@angular/core';
import { provideKritzel } from 'kritzel-angular';
export const appConfig: ApplicationConfig = {
providers: [
// ... other providers
provideKritzel(),
],
};Then use the component in your template:
import { Component } from '@angular/core';
import { KritzelEditor } from 'kritzel-angular';
@Component({
selector: 'app-editor',
imports: [KritzelEditor],
template: `<kritzel-editor></kritzel-editor>`,
styles: [`kritzel-editor { display: block; width: 100%; height: 100vh; }`],
})
export class EditorComponent {}This renders the editor with the full default toolbar — selection, brush, eraser, line, shape, text, and image tools.
Optional Enhancements
Persist Canvas State
By default, the editor 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, KritzelEditor, KritzelSyncConfig } from 'kritzel-angular';
@Component({
selector: 'app-editor',
imports: [KritzelEditor],
template: `<kritzel-editor [syncConfig]="syncConfig"></kritzel-editor>`,
styles: [`kritzel-editor { display: block; width: 100%; height: 100vh; }`],
})
export class EditorComponent {
readonly syncConfig: KritzelSyncConfig = {
providers: [IndexedDBSyncProvider],
};
}Apply Full Viewport Styling
To ensure the Kritzel editor 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"
/>Core Concepts
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
See the Kritzel License. Kritzel is free for personal, hobby, and educational use. Commercial use requires a license — visit kritzel.io for details.