Whiteboarding

In Observable Canvases, the infinite canvas itself is built on tldraw, which offers a wide range of tools to talk about data and organize your work.

The common whiteboarding tools shown on the left of the toolbar include:

• Select (V) - selecting, moving, and interacting with nodes
• Hand (H) - panning the viewport
• Draw (D) - freehand drawing
• Eraser (E) - erasing shapes, nodes, and other content
• Arrow (A) - drawing arrows
• Text (T) - labeling
• Note (N) - “sticky” notes or comments

The toolbar includes a submenu with more tools:

• Line (L) - drawing lines
• Rectangle (R) - drawing rectangles
• Highlight (Shift-D) - freehand highlighting areas of interest
• Laser (K) - transient highlights for multiplayer collaboration
• Frame (F) - grouping related nodes togther

Your tables, charts, and connectors are shapes on the canvas, too; see nodes. All shapes can be aligned, arranged, grouped, etc. using the same tools. Undo and redo apply to whiteboarding annotations as well as options, filters, or brushes applied to nodes.

Annotations

Click the pen icon on the toolbar (or press D ) to draw. Click the T icon on the toolbar (or press T ) to add text; click the note icon (or N ) to add a “sticky” note; or double-click any shape (rectangles, circles, arrows) to add text to them. You can group your annotations to the nodes they reference.

TIP

On August 15, 1977, astronomer Jerry R. Ehman circled an anomalous extraterrestrial radio signal on a computer printout and wrote “Wow!”. Though many data annotations nowadays are more structured, it still helps to doodle!

Media and embeds

Click the “Upload media” in the main menu (or press Mod-U ) to add images and videos to your canvas. Click “Insert embed” (or press Mod-I ) to embed content from an Observable notebook or other applications, including GitHub Gists, YouTube, or Figma.

Moving, resizing, rotating

Drag a shape to move it. Use the Shift modifier key to restrict translation to horizontal or vertical movement. Use the Option modifier key to duplicate the selected nodes rather than moving them. Use the Command modifier key to temporarily enable (or disable, if you have the Always snap preference enabled) alignment guides and snapping.

Drag a corner or edge to resize a shape. Use the Option modifier key to resize around the center of the shape. Use the Shift modifier key to preserve the shape’s aspect ratio.

To rotate a shape, click and drag just outside the shape’s corner resize handle.

Duplicating and deleting

Hold Alt and drag a shape to duplicate it. If you duplicate a node, its input connectors are duplicated as well so that it continues to show the same data.

Press Backspace to delete a shape.

Grouping

Select nodes, right-click, and go to Edit > Group (Shift-G ) to group them. Groups can be selected, moved, resized, and arranged as a single unit.

To create a more visually distinct group — with a border, opaque background, and name — create a frame shape (F ) and drag shapes into it.

TIP

To ensure annotations stay pointing at related tables and charts, we recommend grouping them with related nodes.

Arranging

Right-click a selection for controls to align them or distribute along different axes, or to arrange them front to back.

Hold down Command while dragging to show alignment guides. You can also enable Preferences > Always snap to enable this behavior by default (causing Command to disable snapping).

Use Preferences > Show grid to show the grid (and enable snap-to-grid).

Locking

Right-click a selection and go to Edit > Toggle locked to lock the shapes. Once locked, you can no longer select or otherwise interact with a shape. To unlock shapes, go to the main menu’s Edit > Unlock all.

WARNING

As any user can unlock shapes, locking is only an editing convenience, not a secure way to restrict permissions.

Undo, redo, versions

If you make a mistake, press Mod-Z to undo or Mod-Shift-Z to redo. When the AI creates things on the canvas on your behalf, they are included in the same undo stack; you can undo AI’s edits in the same way you’d undo your own.

Undo and redo only apply to your own edits during the current session. To go back farther, open the main menu and select File > Show version history.

The version history sidebar shows each version with a timestamp and the profile pictures of anyone who edited the canvas since the previous version. Click a version to preview it. Hover over a version and click ⋯ > Restore this version to set the canvas back to that state for everyone.

As you edit, a new version is automatically saved every minute. To manually save a version with a custom note attached, go to File > Show version history.