The Selection Toolbar

Select something, and the interface comes to you. The moment you select anything — a pen sketch, an image, a node, a design element — a row of pill-shaped action buttons appears at the top-center of the canvas with exactly the actions that make sense for that selection. No hunting through menus, no memorising where things live: the toolbar reads what you've picked and offers the next move.

It's the same toolbar everywhere. On the whiteboard, in workflows, and in the Designer, selecting something summons the same row in the same place — so the muscle memory you build on one surface carries to all of them. And because every action is a real button, it's how touch and pencil users reach everything the right-click menu offers. On an iPad, this row is the context menu.

A few behaviours worth knowing up front:

• Buttons with a small triangle in the corner are flyouts. Tap one and the row is replaced by its sub-actions plus a ← Back button; Esc or a tap elsewhere collapses it.
• Some buttons are state-dependent. Lock becomes Unlock, Group becomes Ungroup — the same button swaps its face in place to match your selection.
• The ⋯ More button opens the full context menu directly below itself, so the long tail of actions is never more than two taps away.
• Hover any button (mouse or pencil) for a tooltip naming it. In settings you can show text labels instead of icons, and pick a button size.
• Copy flashes green for a second when it succeeds — instant confirmation without a popup.

When you select drawing objects

Select ink, shapes, text, or images on the whiteboard, a workflow canvas, or the Designer and you get the full drawing action row:

• Vision — flyout of on-device image edits for selected images: Remove Background , Auto Enhance , and a nested Filters set — Sepia Tone , Black & White , Noir , Vintage , Blur , Sharpen , Vibrance . Runs on supported Apple hardware; the edits are enabled when the selection is images only.
• AI Generate — regenerate a single selected image with AI.
• Explode — break a selected vector image or untouched library icon into individually editable shapes.
• Sketch to AI — generate a finished AI image from your selected sketch; on an image you generated earlier, it re-opens the wizard so you can refine the prompt.
• OCR — flyout of text-recognition actions for any selection: Convert to Text replaces handwriting with an editable text object, and Copy Text recognises the writing and puts the text on your clipboard.
• 2vec — convert a selected image into clean, editable vectors.
• Z-Order — flyout for stacking: Bring to Front , Move Forward , Move Back , Send to Back .
• Copy — copy the selection to the drawing clipboard.
• Copy as Image — copy the selection rasterised as an image.
• Paste — paste the drawing clipboard. This button only exists while the clipboard actually has content — no dead Paste button, ever.
• Duplicate — duplicate the selection in place.
• Clip+ — save the selection as a reusable clip.
• SVG — download just the selected objects as a scalable vector file, cropped to their own edges. Designer only; see Designer.
• Lock — lock the selected objects so they can't be moved or edited. When everything selected is already locked, the same button becomes an amber Unlock — one glance tells you the state.
• G — Group / Ungroup. Select two or more objects and the bold G groups them; select a group (or any member of one) and the same button, highlighted, ungroups it.
• Combine (Boolean) — flyout of the six boolean operations for two or more selected objects. Full details in Combining shapes below.
• Use as Mask — mark the selected shape as the cookie cutter to clip with next. It turns see-through while it waits, and the same button becomes Clear Mask to change your mind. Full details in Masking one shape with another below.
• Mask (Clip) — clip the selection to a shape. Appears whenever the selection could be masked.
• Release Mask — take a masked object apart again, with nothing lost.
• To Node — the whiteboard-to-workflow bridge: converts labelled sketch blocks, text, and even raw handwriting into real flow nodes, wiring your drawn arrows into live connections. Appears in the workflow editor when the selection has something convertible. See Sketch to Diagram.
• Delete — delete the selection.

If a node is selected at the same time as drawing objects, the node's actions take priority — the toolbar always shows one coherent set, never a mixture.

Combining shapes (boolean operations)

If you've used a vector editor before, this is the pathfinder / boolean panel. It's called Combine (Boolean) here, and you'll find it in three places for the same selection: the button on this toolbar, Edit → Combine Shapes (Boolean) in the menu bar, and the Combine (Boolean) section of the right-click menu. Same six operations, same order, wherever you reach for them.

Select two or more objects first. The difference from Group is the important part: grouping keeps your objects and moves them as a unit, while combining replaces them with genuinely new geometry you can carry on editing point by point.

Things worth knowing:

• Holes are real holes. Subtract a circle from the middle of a square and you get a ring — move it, and the hole moves with it. The same shape can hold several holes and several separate islands at once.
• Which shape survives is decided by stacking order, not by the order you selected things. That's the convention in every vector tool, and it's why subtract comes in both directions: if the result is the wrong way round, don't restack — just pick the other one. Subtract Front keeps what's underneath; Subtract Back keeps what's on top.
• The result inherits an appearance rather than inventing one — in every case it's the appearance of the shape that survived. That means the frontmost object's fill and stroke, except for Subtract Front, where the back object is the survivor. Divide gives each piece the appearance of the frontmost object covering it.
• It stays where it was. The new shape takes the frontmost original's place in the stacking order instead of jumping to the top, and ends up selected so you can keep working.
• Icons and vector images are converted for you. Stamp a star icon over a rectangle, hit Subtract Front, and you get a star-shaped bite — no need to Explode into Shapes first. Freehand ink combines by the line you actually see, thickness and all, and text combines once you've turned it into outlines.
• Text takes part too, and you don't have to prepare it. Select a word and a shape, choose an operation, and the letters are outlined for you behind the scenes. What can't take part: photos, clips, and text flowed along a curve. They're left untouched rather than silently dropped, and the button only offers itself when at least two objects in your selection actually have an outline.
• Curves become fine-grained points. Uniting two circles gives you a dense editable outline rather than two arcs — it looks identical and every point is yours to move.
• ⌘/CtrlZ undoes any combine in one step.

Turning text into shapes

Type is text until you say otherwise — you can keep editing the words, restyle them, or reflow them. Sometimes you want the letters instead: to pull one serif out of shape, colour half a word differently, or hand a logo to someone who doesn't have your font. That's what Edit → Convert Text to Paths does. If you've used a vector editor before, this is Create Outlines.

Select one or more text objects and choose it. Each one becomes a group of editable shapes, one per letter, with the counters — the hole in an 'o', the two in a 'B' — kept as real holes rather than painted over.

The phrase stays one object. Click any letter and the whole phrase selects, so dragging it moves the words together and nothing scatters — a single letter only comes loose once you Ungroup it, and then it's yours to reshape point by point with the path tools. If the text was already inside a group — a label inside a button, say — the letters stay inside that group too, so the button still moves as a whole.

Worth knowing:

• It's one-way. The words stop being words: no more retyping, no font or size controls. ⌘/CtrlZ puts them back, but once you've saved and moved on, the text is shapes. Duplicate the text first if you want to keep an editable copy.
• You don't need it just to combine or mask. Boolean operations outline text for you automatically, so reach for Convert to Paths when you actually want to edit the letters.
• Everything about how the text looked is carried over — colour and fill, opacity, effects, and its position, size, stretch and rotation. The shapes land exactly where the letters were.
• The lighter-touch alternative: right-click a text object and choose Convert to Outlines instead. That one keeps the text fully editable and merely records its outline geometry alongside — which is what lets an SVG export match your screen on a machine that doesn't have the font.
• Text flowed along a curve can't be converted this way; its letters follow the path rather than sitting on a line. Detach it from the curve first.
• Fonts are fetched when you convert, so the very first conversion of a face may take a moment, and it needs a connection. If the outlines can't be read you're told, and the text is left exactly as it was.

Masking one shape with another

If you've used a vector editor before, this is the clipping mask. Put an oval over a photo, mask it, and the photo takes the oval's shape. Nothing is cut away — the rest of the picture is hidden, and one click brings it all back.

It works the same in the whiteboard, the notepad, a workflow's drawing layer and Designer, and a masked object copies and pastes between them.

Making one

1. Draw the shape you want to clip to and put it over your artwork.
2. Select it on its own and press Use as Mask. It turns see-through with a dashed edge so you can line it up against what's underneath — and so it's obvious which object is the cutter.
3. Select the shape and the artwork together, then press Mask (Clip).

You'll find the same three steps in Edit → Use as Mask Shape / Make Clipping Mask and in the Mask (Clip) section of the right-click menu.

If you skip step 2 and just select everything, the frontmost closed shape is used as the mask. Marking it first is worth the extra click though: it's the only way to use a lasso of freehand ink as the mask, and it removes all doubt about which shape is about to do the clipping.

Living with one

• It moves as one object. Drag, resize, rotate or use Edit → Transform… and the mask travels with what it's clipping.
• The mask stops showing its own outline — only its silhouette matters. Select the masked object and you'll see that outline again as a dashed line, so you always know what shape is doing the work.
• Release Mask gives you both pieces back exactly as they were, fill and stroke included. Nothing about masking is destructive, so it's always safe to try.
• To reframe, release, nudge the artwork or the shape, and mask again.
• ⌘/CtrlZ undoes a mask in one step.

What can be a mask

Any closed shape you can draw: an oval, a circle, a rectangle, a triangle, a path you've drawn with the Path pen — including a shape with holes in it, made with Subtract Front, which masks through the holes too. A lasso of freehand ink works as well, as long as you mark it with Use as Mask first.

Straight lines, photos, stamped icons and editable text can't be the mask itself — but they can all be masked. To clip to lettering, convert the text to outlines and Unite it into one shape first.

Things worth knowing

• Anything the mask hides stops being clickable. Click where the hidden part of your photo used to be and you'll select nothing, exactly as if it weren't there.
• The handles hug what you can see, not the hidden artwork, so a photo masked to a small oval gets a small selection box.
• Everything ends up on one layer (Designer): a masked object is a single object, so its pieces are brought together onto the mask's layer.
• Exports keep the mask as a real mask. Save to SVG and you get proper clipping in the file, still editable in any vector tool — not a flattened picture. Screen thumbnails, Copy as Image and HTML export all show the clipped result too.
• Combine and Mask are the two ways several objects become one, and they're different. Combining makes new geometry and the originals are gone; masking hides part of what's there and can always be undone. If you want a permanent bite taken out of a shape, use Subtract Front instead.

When you select a node

Select a single node in a workflow and the row becomes node-centric:

• Rename — rename the node; first in the row for quick access.
• Convert to — for sketch-style flow nodes, opens the node picker to convert it into a real node type.
• Run from Here — run the workflow starting at this node.
• Run This Only — run just this one node. (Both run buttons step aside on pure diagramming nodes, where there's nothing to execute.)
• Configure — open the node's configuration panel.
• Open Editor — for nodes with a full editor behind them (code, agent, chat, data grid, 3D, web), open that editor.
• Edit Database — on database nodes; vector-store nodes show Edit Store instead. Jumps straight into the data editor without expanding the node.
• Expand Inline — when a node's detail view normally opens in the side panel, this expands it inline on the canvas instead.
• Duplicate — duplicate the node.
• Delete — delete the node.
• More — open the node's full context menu right below the button: View Output, Copy, Cut, detail-view modes, and type-specific actions.

When you select several nodes

Multi-select and the row switches to arrangement tools:

• Align — flyout: Align Left, Center, Right, Top, Middle, Bottom.
• Distribute — flyout that spaces three or more selected nodes evenly, horizontally or vertically. (It appears once your selection reaches three.)
• Auto Layout — flyout that lays the selected nodes out automatically, horizontally or vertically.
• Duplicate — duplicate everything selected.
• Delete — delete everything selected.
• More — the full multi-node menu (Open in CodeBook, Copy, Cut, and more) opens below the button.

When you select design elements

The Designer adds selection rows of its own:

A selected HTML component (in Design or HTML mode):

• Edit — step inside the component to edit its individual elements.
• Edit Strokes — revert the component back to the editable drawing it was made from.
• To Primitives — convert the component into drawing primitives.
• Copy, Duplicate, Delete — the essentials, same as everywhere else.

An element inside a component (while editing it): a focused row of Copy, Paste, Duplicate, and Delete at the element level.

Drawings in HTML mode get a conversion-focused row: Edit Strokes for already-converted drawings, or a Convert flyout — To HTML , To SVG , To Image — plus Delete.

When nothing is selected

If your drawing clipboard has content, a lone Paste pill appears so pasting never requires a menu. In drawing mode, when Paste would be the only button, it moves up into the drawing toolbar instead of floating alone over your canvas.

Some tools also put their live controls here: with the icon stamp tool active, Zoom Speed and Rotation Speed buttons join the row, each opening a slider panel beneath it.

Keyboard

The toolbar is deliberately pointer-first — every action is a visible button rather than a hidden shortcut. One key matters:

Works with the rest of the studio

• The Smart Whiteboard — where the drawing selection row does its best work
• The Style Panel — the appearance half of the same selection: colour, dashes, corners, effects
• Sketch to Diagram — the To Node conversion in depth
• Workflows Overview — the nodes these buttons run, configure, and arrange
• Node Reference — every node type behind Open Editor and Configure
• The Designer — component and element selection rows in context
• Sharing & Live Collaboration — the same selections, on a shared board