Whiteboard styling

The board adds only the CSS that it needs to work. Colors, fonts and cursors are up to your app, which styles the board with the data attributes on its elements.

The board's CSS

boardStyles holds the CSS that the board needs to work: the size of the board and the area around it, how shapes hold their text, outline or component, where their handles and the cursors of other users show, and which parts of a frame take presses. The rules are in the whiteboard cascade layer, so your app's CSS outside of layers overrides them.

The board adds its CSS when its editor starts, so the whiteboard layer comes after the layers that your app declared before, like Tailwind's, and wins over them. To override the board from those layers, declare the whiteboard layer first:

/* With Tailwind, before @import 'tailwindcss' */
@layer whiteboard, theme, base, components, utilities;

A doc frame is as tall as its document. Its height: auto !important also wins over !important rules of your app outside of layers.

The board adds this CSS to the page itself, in a <style data-tiptap-style-whiteboard> element. It uses the editor's injectNonce. An editor with injectCSS: false leaves the CSS to your app:

import { boardStyles } from '@tiptap-pro/extension-whiteboard'

const style = document.createElement('style')
style.textContent = boardStyles
document.head.append(style)

Shapes have the size of their attributes. An app that sizes a shape by its content also sets contain: none on it.

Zoom

Set --zoom to the zoom of the camera on the element that holds the editor. The handles and the cursors of other users read it to keep their size at every zoom. Divide your own outlines and borders by it too:

[data-shape][data-selected] {
  outline: calc(2px / var(--zoom, 1)) solid #6a00f5;
  outline-offset: calc(2px / var(--zoom, 1));
}

Shapes

Every shape element has data-shape, and a data-type with the kind of shape: sticky-note, geo, free-text, freehand, doc-frame, frame, board-image or arrow. Custom shapes have the data-type from their shapeNodeView. The board element has data-type="board".

The shapeElementAttributes option of WhiteboardKit adds attributes of your own, like the data-suggestion-* attributes of Tracked Changes.

Parts of shapes

A shape in a frame has an inline clip-path, which cuts it off at the edges of the frame while it is not selected.

An image shape holds an img, which fills the whole shape. For a shape with other proportions than its image, like one that insertShape adds with a size of your own, give the img an object-fit:

[data-type='board-image'] img {
  object-fit: cover;
}

Arrows and pen lines are drawn in the current color, so set their color. The outline of a geometric shape is a path that your CSS fills and strokes:

[data-type='arrow'],
[data-type='freehand'] {
  color: var(--stroke);
}

[data-shape-outline] path {
  fill: var(--fill);
  stroke: var(--stroke);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

Colors

Shapes, text colors and highlights store the name of a board color, so your CSS decides how each one looks. One way is a few variables for each color:

[data-color='blue'] {
  --stroke: #0d74ce;
  --fill: #ebf5ff;
  --note: #bfe0ff;
}

[data-type='sticky-note'] {
  background: var(--note);
}

Text colors are span elements with data-color, and highlights mark elements with data-color. See the example for the styles of all colors.

To add a color of your own, add its name to the colors option of WhiteboardKit, and style it like the others:

import { shapeColors, WhiteboardKit } from '@tiptap-pro/extension-whiteboard'

WhiteboardKit.configure({ colors: [...shapeColors, 'brand'] })

Commands take any name. The list decides which text colors and highlights pasted HTML keeps: other text colors go away, and other highlights become yellow.

Stage

attachStage marks the stage, so your CSS can show the tool and the pan:

While a drag runs, the stage holds a preview element:

The previews are not scaled with the board, so they need no --zoom:

[data-selection-box],
[data-shape-preview] {
  background: rgba(106, 0, 245, 0.1);
  border: 1px dashed #6a00f5;
}

[data-arrow-preview] {
  color: #6a00f5;
}

Cursors of other users

createRemoteCursors puts the cursors in a data-remote-cursors element next to the editor's element, over the shapes:

An app that sets --zoom only once zooming pauses can set it at once on the data-remote-cursors element, so the cursors keep their size while the board zooms.

Keyboard

While keys act on the board, the editor element has data-keyboard="board". While the text of a shape is edited, it doesn't. It stays while the document of a doc frame is edited.

Read-only

While the board is read-only, the editor element has data-read-only, and selected shapes show no handles. Use it for cursors that promise a change, like a move cursor on shapes:

.tiptap[data-read-only] [data-shape] {
  cursor: default;
}