Tips and tricks for using the Observable editor

Mike Bostock

Observable

Pro tips: Inserting cells

Pro tips: Navigating cells

Pro tips

It's weird that this shortcut only works if a cell is focused. Shouldn't the pane also appear when nothing is in focus (or if a rendered html word is "selected")?

Nacho Caballero

Shift-Command-F doesn’t require a cell to be focused, but it does require the Observable editor/application to be focused rather than the sandboxed (“worker“) iframe which runs user code. So if you’ve clicked on the output of a cell, the worker iframe receives focus and the Observable editor can no longer intercept key events. You can read more about our security model here: 

https://observablehq.com/@observablehq/security-model

When the worker iframe has focus, you can hit Esc to restore focus to the Observable editor. So if you ever find that Shift-Command-F doesn’t work, hit Esc once (or twice) and try again.

Opening a cell.webp

Tabbing between cells.webp

Opening a cell (alt-tab).webp

Arrowing between cells.webp

Moving between cells (j-k).webp

Jump to definition.webp

Jump via minimap.webp

Finding cells.webp