Whiteboard

Whiteboard is the collaborative canvas — pointer-events draw a stroke locally; on pointer-up the stroke is committed via the SDK and replicated to every other participant. Coordinates are stored normalised (0..1 in both axes) so a drawing made on a 1200×800 surface looks identical on a 600×400 surface.

Install

pnpm add @levelchat/react-components @levelchat/web

Requirements

• React — react and react-dom ^18 || ^19 (peer dependency).
• LevelChat Web SDK — @levelchat/web ^0.2.4 (peer dependency, wires hook-driven mode to the live Room).
• Provider — wrap the tree in <LevelChatProvider> from @levelchat/web-react so hook-driven mode can subscribe to room events. Prop-driven demos work without it.
• Styles — import the brand tokens + kit stylesheet exactly once at the app entry, before any kit component renders.

In Next.js (App Router), import the stylesheets at the top of your root layout:

// app/layout.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

In Vite (or any plain React app), import them at the top of your entry module:

// src/main.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

Basic usage

import { Whiteboard } from '@levelchat/react-components';

<Whiteboard showClear className="h-[480px] w-full" />

Coordinate model

Every stroke is a sequence of { x: 0..1, y: 0..1 } points + a colour + a width. The canvas renders at whatever CSS size the container provides, and a ResizeObserver keeps the backing-store DPR-correct so strokes stay crisp.

Server caps

The server (not this component) enforces:

• ≤ 200 strokes / second / author.
• ≤ 500 points / stroke.
• ≤ 5000 strokes / board; older strokes age out FIFO.

We trust the server's caps — no double validation in the React layer. The component does filter near-duplicate points client-side (sub-0.002 unit distance) to avoid blowing past the 500-point cap during a slow drag.

Custom toolbar

<Whiteboard
  renderToolbar={(state) => (
    <MyToolbar
      colors={state.color}
      onPick={state.setColor}
      onUndo={state.undo}
      onClear={state.clear}
    />
  )}
/>

Props