kritzel-react
v0.3.46
Published
Kritzel helps you build infinite canvas experiences with React.
Maintainers
kasual1Readme
Kritzel for React
Build infinite canvas and collaborative whiteboard experiences in React 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 React wrapper for idiomatic JSX integration.
Kritzel handles the hard parts of canvas-based applications — infinite pan and zoom, hit-testing, CRDT-based collaboration, undo and redo, and cross-browser rendering — so you can focus on your product's domain logic.
Full documentation: kritzel.io/docs/react/overview
Installation
npm install kritzel-reactSetup
Render Kritzel in your component:
import { KritzelEditor } from 'kritzel-react';
export function Editor() {
return <KritzelEditor style={{ display: 'block', width: '100%', height: '100vh' }} />;
}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 { KritzelEditor, IndexedDBSyncProvider } from 'kritzel-react';
export function Editor() {
const syncConfig = {
providers: [IndexedDBSyncProvider],
};
return (
<KritzelEditor
syncConfig={syncConfig}
style={{ display: 'block', width: '100%', height: '100vh' }}
/>
);
}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,
#root {
width: 100dvw;
height: 100dvh;
margin: 0;
padding: 0;
overflow: hidden;
}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, such as 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.