Whiteboard

Collaborate on a shared canvas with drawing tools, shapes, text, sticky notes, and real-time multiplayer sync.

Open the Whiteboard#

Click Whiteboard in the sidebar. The sidebar hides automatically to maximize canvas space. Toggle it back from the top bar.

Tools#

The left toolbar contains all drawing and editing tools:

• Select (—) — Click to select, drag to move, handles to resize
• Hand (—) — Pan the canvas (also: middle-mouse drag)
• Point Select (V) — Edit anchor points on paths and shapes
• Rectangle (—) — Draw rectangles
• Circle (—) — Draw ellipses
• Polygon (—) — Draw polygons
• Text (—) — Click to add text
• Frame (—) — Create export areas/frames
• Pen (P) — Bezier path drawing
• Brush (B) — Freehand drawing
• Arrow (A) — Draw arrows with curve options
• Sticky Note (—) — Add sticky notes
• Path (—) — Draw paths (closed or open)

Undo: Q | Redo: E (bottom of left toolbar)

Drawing Shapes#

1. Select a shape tool (rectangle, circle, polygon, etc.)
2. Click and drag on the canvas to draw
3. Release to finish

For arrows: After drawing, use the bottom toolbar to choose curve style (left / straight / right).

Select and Edit#

With the Select tool:

• Click a shape to select it
• Drag to move
• Corner handles to resize
• Arrow resize also scales stroke width

With the Point Select tool (V):

• Click an anchor point to select it
• Drag to reposition
• Marquee drag (empty area) to select multiple points
• Keyboard arrows nudge selected points

Text and Sticky Notes#

Add Text#

1. Select the Text tool
2. Click on the canvas
3. Type your text in the overlay
4. Click outside to finish editing

Add a Sticky Note#

1. Select the Sticky Note tool
2. Click on the canvas to place
3. Type content
4. Drag to reposition

Link Cards#

Embed web links as visual cards on the canvas:

1. Select a shape or use the context menu → Add Link
2. Enter a URL in the Link Edit Modal
3. The card shows a preview with metadata and a proxied thumbnail
4. Click the card to open the link

Properties Panel#

The right toolbar shows properties for the selected shape:

• Fill color and opacity
• Stroke color, width, and style
• Effects (shadow, blur, etc.)
• Text properties (font, size, alignment)

Sections are collapsible and their state persists. The panel hides when nothing is selected.

Layers#

Open the Layers panel from the top overflow menu:

• View all shapes listed by z-index
• Reorder layers (z-index stays unique)
• Toggle visibility
• Lock layers

Frames#

Frames are export areas that group content:

1. Select the Frame tool
2. Draw a rectangle on the canvas
3. Frame labels appear as overlays
4. Drag shapes into a frame to assign them
5. Moving a frame moves all its contents

When moving/resizing a shape and also changing its frame assignment, both changes merge into one undo history entry.

Context Menu#

Right-click on the canvas or a shape to open the context menu:

• Copy / Paste — Clipboard operations
• Delete — Remove the shape
• Bring Forward / Send Backward — Z-index changes
• Add Link — Open link edit modal
• Shape-specific options

Collaboration#

All changes sync in real-time via WebSocket (Yjs):

• Collaborator cursors are visible with user-specific colors
• Multiple users can draw and edit simultaneously
• Changes are conflict-free and eventually consistent

Pan and Zoom#

• Hand tool — Click and drag to pan
• Middle-mouse button — Pan (works with any tool selected)
• Scroll wheel — Zoom in/out
• Pan has inertia — continues briefly after you release
• Fresh input cancels the glide

Reset view from the top overflow menu → Reset View.

Keyboard Shortcuts#

• Q — Undo
• E — Redo
• V — Point Select
• P — Pen tool
• B — Brush tool
• A — Arrow tool
• Delete / Backspace — Delete selected
• Ctrl+Z — Undo
• Ctrl+Shift+Z — Redo

Open the full shortcuts reference from the top overflow menu → Shortcuts.