Toolbar Layout

The palette in one strip across the top of the canvas, and the Explorer behind a menu button.

The editor lays its tools out the same way on every device, a computer, a tablet or a phone: the palette is one strip across the top of the canvas, and the Explorer opens from a menu button in the top-left corner.

What it does

The palette is a single strip pinned to the top centre of the canvas. From left to right it holds:

  • Selection mode: Select, Hand, Eraser, Laser and the rest.
  • The categories, by name: in Diagram mode Shapes, Draw, Build, Concepts, Icons, Tech and Media. Rest the pointer on one, or click it, and its elements open in a panel underneath.
  • Search (the magnifier, or press S), last on the strip, to find any element, icon or sticker by name.

Plan mode keeps a category dropdown instead, with that category's tiles on the strip and More (the ⋯ button) for the rest.

In the top-left corner, in a card of their own, sit the menu button and the editor mode switch (Diagram, Draw, Facilitate, Illustrate or Plan; Shift+D moves to the next mode). The menu button opens the Explorer as a popover under it, and clicking it again closes it.

Layers, Collaborate and the Session buttons' Poll and Vote open just above their buttons in the bottom row, and close when you click the button again. Every other panel (the AI assistant, the Map and the tool panels) docks in a corner of the canvas, and you can drag it to another (see Panel Layout). Undo and Redo stay in the bottom-right corner.

ShapesDrawBuildConceptsIconsTechMediaExplorer, modeSelection modeCategoriesSearch100%
The editor: the menu button and mode switch top-left, the strip across the top, and the usual bottom row.

Only one of the strip's menus is open at a time: opening the selection mode, a category, More or Search closes whichever other was open, and a click anywhere outside closes it.

The categories

Each category on the strip opens a panel of its elements under its name:

  • Rest the pointer on a category and its panel opens; slide along the strip and the panel follows to each one you point at. Move away from both the strip and the panel and it closes. A click or a tap opens it too.
  • Its elements come in named groups, such as Basics, Flowchart and More Shapes in Shapes. Shapes shows them as pictures; the other categories as cards with a line on what each one is for. A tile's keyboard shortcut shows beside its name.
  • Click an element to add it, or drag it onto the canvas. The panel closes once you have used one, so the canvas is clear. The strip at the bottom of the panel says what the element under your pointer does.
  • Card and Badge open their presets in a second panel beside the first, which stays open behind it.
  • Icons, Stickers, Tech and Session list their groups down the left, with the open group's entries on the right and a search box across the top that looks through every group. Each reopens on the group you last had open.
  • With the keyboard: the Left and Right arrows move along the strip, Down or Enter opens a category, the arrows move through its elements, and Escape closes it.

The names on the strip are one word each, and the editor modes offer different categories: Draw holds the words and the pens together (Text, notes, comments, then Freehand, Highlighter, Arrow and Line), and in Facilitate mode Ask puts a question to the room while Session holds the timers, reveals, records, reactions, selection-mode buttons and the places Avatars walk to. On a window too narrow for the names, the strip shows the categories' icons alone.

ShapesDrawBuildConceptsIconsTechMediaSHAPESBasicsFlowchart
Rest on Shapes and its panel opens under it, its elements in named groups.

Search finds an element without knowing which category holds it. Before you type, it shows the kinds of element already on your tab, so the ones you are using are one click away. Type a name, or a word you would use for it ("database" finds the cylinder, a database icon and the database brands), and matching tiles, icons, stickers and technology marks appear in one list, the best name matches first; where two match equally well, the tiles your current editor mode offers lead. The × at the end of the box clears it. Click one to add it, or press Enter to add the best match.

Each editor mode keeps its palette to the tools that suit it, so a Diagram has no charts and an Illustrate page has no pens. Search still finds those: they wait below, under Elements From Other Modes, closed until you open it, and every one of them works in any mode. That includes Draw mode's Marker 1, 2 and 3, in the colours and widths you gave them there: pick one and draw, and press Escape to put it down.

Plan's own elements (its cards, boards, metrics, charts of cards and sheets) are made for Plan's boards, so only Plan mode adds them. Elsewhere, Search lists them last, under Not Available in Diagram Mode (or whichever mode you are in), greyed out so you can see where they live. Switch the tab to Plan mode to add one.

Search is not on an Event Storming board, where the notation is the palette, nor for a Participant, whose strip holds only the Participate tiles, and Draw mode shows its own dock instead of the strip. Wherever the strip's Search isn't shown, S keeps its old meaning and picks the Select tool.

The order of the tiles

Each category keeps its own order: adding something never moves it. Its groups follow the same order on Plan's strip, where thin dividers split a category into groups of related tiles, such as the desktop and the mobile devices, or the charts and the meters. Each time a document loads Plan's strip opens on Cards (or Boards while the tab has none), an Event Storming board's on its notation, and a Participant's on Participate.

What else the strip shows

  • Plan mode adds an Edit Cards button to the strip on the Cards category, for someone who can edit. It doesn't show on a phone.
  • On an Event Storming board the strip shows the notation's tiles instead of the two pickers, led by Add from Photo where it is available.
  • Viewers who can't edit have no strip, since there is nothing to add; the menu button still shows.
  • Zen mode hides the strip and the menu button with the rest of the editor's chrome.

On a phone

On a phone the strip is narrower:

  • The menu button sits in a card of its own at the left of the strip, without the mode switch: to change editor mode on a phone, open the tab menu (the … on the tab) open its Mode section and choose a mode.
  • The categories show their icons only, a little further apart. Swipe them sideways to reach the rest; the selection mode and Search stay put. A category's panel opens across the width of the screen.
  • Layers and Collaborate open above their buttons in the bottom row, as on a computer. Pinch to zoom; the Fit button is there too.

A phone held sideways counts as a phone too.

Was this article helpful?