The Editor
Blocks and the Slash Menu
Blocks and the Slash Menu
Three ways to insert
Type the slash key (/). The slash menu opens at the cursor. Keep typing to filter by name, description, or alias (/todo, /flowchart, /latex all hit). Arrow keys move, Enter inserts, Escape closes.
Use the toolbar. The Insert group at the right end of the toolbar holds a link button, image, table, and code block, plus four dropdowns: Insert block, Callout, Diagram, and Embed.
Type two opening brackets ([[). Search pages and insert a link to one.
Everything the slash menu offers
Basic blocks
| Entry | Inserts |
|---|---|
| Heading 1 | Large section heading |
| Heading 2 | Medium section heading |
| Heading 3 | Small section heading |
| Bullet List | A simple bullet list |
| Numbered List | A numbered list |
| Task List | Checkbox items you can tick |
| Quote | A blockquote |
| Code Block | Code with syntax highlighting |
| Divider | A horizontal rule |
Advanced blocks
| Entry | Inserts |
|---|---|
| Table | A 3 by 3 table with a header row |
| Toggle | A collapsible section with a title and body |
| Properties | A table of this page’s properties, which you can configure and filter |
| Child pages | The list of pages inside this one, placed here instead of below the page |
| Math Equation | A block LaTeX equation |
| Inline Math | A LaTeX expression inside the line |
| Symbol | One character from the symbol picker, as plain text |
Media
| Entry | Inserts |
|---|---|
| Upload Image | File picker, uploads, then places the image |
| File Attachment | File picker, uploads, then places an attachment card |
| Gallery | A grid of images and files, laid out and sized as you choose |
| Embed Image | An image from a URL you paste |
| Link | The URL you enter, as a link, where you typed /link |
Callouts
| Entry | Inserts |
|---|---|
| Info Callout | Blue informational note |
| Warning Callout | Yellow warning |
| Danger Callout | Red error or danger notice |
| Success Callout | Green success message |
| Note Callout | Purple note or tip |
Diagrams
| Entry | Inserts |
|---|---|
| Mermaid Diagram | Text-defined flowcharts, sequence diagrams, and more |
| Whiteboard | A whiteboard page from this site, shown whole and kept up to date; see Whiteboard |
To draw by hand, use a Whiteboard page. See Whiteboard.
Embeds
| Entry | Inserts |
|---|---|
| YouTube Video | YouTube player |
| Figma | Figma file, prototype, or board |
| Vimeo Video | Vimeo player |
| Generic Embed | Any iframe-compatible URL |
Symbols
Symbol (/symbol) opens a small picker at the cursor for characters that are not on the keyboard: arrows, math operators, Greek letters, dashes and quotes, currency, and common marks such as ° and ©. Type in its search box to filter by name (alpha, euro) or by the characters an arrow is typed as (->). Enter in the search box inserts the first match; the down arrow moves into the grid, where the arrow keys move and Enter inserts. Escape closes the picker without inserting anything and puts you back where you were typing.
The character goes in as ordinary text, so it is searched, copied, and exported like any other letter. For a formula, use Inline Math instead.
Toggles
A toggle has a title row and a body. It is inserted open, with the placeholder title “Toggle title”. Click the chevron to collapse or expand it. The open or closed state is stored with the page, so readers see it the way you left it.
Galleries
A gallery lays images and files out in a grid. Type /gallery, or choose Gallery from the toolbar’s Insert block dropdown, to place an empty one, then fill it any of these ways:
- Press + in the gallery’s header and choose one or more images or files.
- Drop images or files from your computer onto the gallery.
- Select the gallery, or a picture or file in it, and paste images or files you have copied. They are added at the end of the gallery.
- Drag an image or a file attachment that is already on the page into the gallery. Drag it out again to take it back out.
Press the settings button in the gallery’s header to change its layout at any time:
| Setting | What it changes |
|---|---|
| Columns | How many tiles sit in a row, from 1 to 6 |
| Spacing | The gap between tiles: Tight, Normal, or Wide |
| Tile height | Small, Medium, or Large crop every picture to the same height; Natural shows each at its own height |
| Item sizes | How much of its tile each picture fills: the full tile, three quarters, half, or a quarter |
Changes show in the grid as you make them and are saved when you publish. A picture in a gallery is still an ordinary image: select it to use its own size, alignment, and alt text controls, or drag its corners to resize it within its tile. Files always fill their tile.
Readers see the grid without the header. Clicking a picture opens it full size, and a file opens or downloads as it does anywhere else on a page. On a phone, a gallery of more than one column shows two.
To select the whole gallery, click its name in the header. To move it, drag the grip at the left of the header. To remove it and everything in it, press the bin.
Working with block nodes
Diagrams, math, embeds, images, galleries, and whiteboards are single units. Click one to select it, then press Backspace to remove it. A click inside a gallery selects the picture or file under it; to select the gallery itself, click its name in the header. To move an image or a file attachment, press on it and drag it to its new place; a gallery moves by the grip at the left of its header. Most of them reveal their own controls when selected: an editor for Mermaid, a URL field for embeds, a size and alignment bar for images, a control to show a different board for a whiteboard.
Details for each are in Tables, Code, and Diagrams and Callouts and Media.