Interactions

Try it

Press C (the Interaction tool) — the cursor becomes the crosshair every draw tool wears, everywhere on the canvas, even over your designs. Whatever you hover lights up — whole screens or single elements inside them, like ⌘-hover — and grows its anchor ports: a small dot at the middle of each edge and a ring at the center. Those are the interaction's landing spots, and they're magnetic:

• Drag from (or drop onto) anywhere on a box and the end binds auto: it aims for the box and re-routes to whichever side faces the other end as things move. This is the default, and usually what you want.
• Steer near an edge dot and it lights up, the line snapping into it — release and the end pins to that side, exactly there.
• Steer into the middle and the center ring fills — release and the end pins to the heart of the box (the tldraw precise anchor), the line reaching the center exactly.

The moment you press, the interaction node appears at the press point — place the node, pull the arrow out of it. Hold ⌘ or Ctrl and the magnets stand down: over an element, the end pins the exact point where you press or release (its precise side and position) instead of snapping to a port or re-aiming as boxes move. The line you see while dragging is the line you get: the preview snaps to whatever port is lit, so there are no surprises on release. Drop on empty canvas instead and that end floats free at a point in space; release back on the box you started from and the drag cancels — no strays. Existing interactions never block the armed tool: drawing across one starts a new interaction, it doesn't grab the old one.

The interaction node

Every interaction wears its body at the from end: a ring riding the source element — on the edge the line exits, at the heart when pinned there, or floating at a free start's point in space. Its face is the interaction's trigger: place one from the Marks palette (tap, swipe, hover…) and the node wears that icon; the default is tap/click — most transitions are — so a fresh interaction already reads as tappable. The node keeps the line's ink — recolor the interaction and it follows.

The node is also the from end's handle: drag it to re-attach the interaction to another element (the same magnets as drawing), click it to select the interaction, right-click it for the menu. Below 25% zoom it steps back to a plain dot so overviews stay quiet.

The Interactions panel

The Ix glyph in the canvas header slides the Interactions panel over the left rail (the Present panel's grammar) — one row per interaction on the page: the node's face in its ink, where it runs ("Save button → Confirm sheet"), the annotation's trigger (or the line's labels) as the context line, and its chips, status and decision marks at a glance. Hovering a row firms the interaction on canvas; clicking selects it and flies the camera there; selecting one on canvas highlights its row back. Escape closes the panel.

The panel's head holds the layer visibility switch (the eye): hiding the Ix layer clears the canvas of annotation entirely while the list stays readable — it lives here, not in the inspector, because the inspector only exists while something is selected and layer visibility is page state. Bare I (nothing selected) is the same switch from anywhere, and acting on interactions — drawing, arming the C tool, an agent writing or selecting one — always re-reveals the layer.

The line

Interactions come in two voices, switchable per interaction from the inspector's Line toggle or the right-click menu (the tool remembers your last choice):

• Curved (the default) — the tldraw voice: the line aims from heart to heart, clipped at each box's edge, and draws dead straight until you shape it. Dragging the line itself pulls it: a shaping point enters right where you grabbed and follows your pointer, and the smooth curve flows through it. An end pinned to an edge port holds that exact point instead of re-aiming for the center.
• Elbow — an orthogonal path with rounded corners, the classic wireflow look. Move either box and it re-routes, picking whichever sides face each other (a port-pinned end keeps its side). Dragging an elbow's line drops a shaping point right there and slides it in the same motion. Between cards of a wiremap or wireflow, elbows route with extra care: through the gutters between cards, never across one, heads flush with the edge they enter, and arrows sharing a corridor spacing themselves apart — card-to-card draws pick the elbow automatically (switch any arrow to Curved to opt out). Your own shaping points always win over the automatic route.

Either shape takes shaping points — and they are the only kind of nub an interaction has, however it got them. Hover a selected interaction's line and a translucent nub rides under your cursor — double-click and the point is placed exactly there (a single click just selects), ready to slide anywhere: a curved line flows smoothly through its points, an elbow treats each as a corner to route through (handy for steering around boxes). Double-click a point (or arm it and press ⌫) to remove it.

Ends don't have to touch a box: drag the tool from (or drop onto) empty canvas and that end floats free at a point in space — grab the node (or the to-ring) later to bind it to a box. The End row picks the to end's mark: an arrowhead (the default), a dot, or nothing — the from end is always the interaction node. Solid or dotted, and a Color row of six one-click swatches — the red default plus five annotation inks — round out the style. One labelled row per property, no pickers or menus to dig through.

Marks

Marks ride the line, draggable along it, and the inspector places them with one click — every tile in the palette shows the mark it adds next to its name, so the vocabulary reads at a glance. The palette is a selector, not a stamp: an interaction is one transition, so it carries at most one mark of each family below — the placed value's tile reads pressed, clicking a different value swaps the mark in place (it keeps its spot on the line), and clicking the pressed tile removes it. Only text labels stack:

• Triggers — what fires the transition: tap (the default — every interaction has it until you pick another), double tap, long press, hover, swipe (left/right, up/down), rotate (either direction), key press, delay, or automatic (system-fired).
• Logic — the decision node (the flowchart diamond: a branch that determines the flow) and YES · NO · IF · OR chips for its outcomes and conditions.
• Labels — ✓ success and ✕ failure dots, and free text ("save", "when logged out" — also added from the interaction's right-click menu, right where you clicked).

The placed trigger doesn't ride the line — the node wears it as its face. The pressed tiles are the record of what's placed; there is no separate list. Rename a text label by double-clicking it on canvas, and remove any mark from its right-click menu (or click its pressed tile off). Text labels sit on the line in a quiet plate of the canvas ground — the line visibly breaks under the word instead of striking through it.

Branches

A decision diamond is a real junction, not just a mark — and a decision is binary: one question, two ways out. Place one on a dead-straight arrow and the arrow itself pivots at the diamond — in one vertex, out the top — because a diamond a line passes straight through is a bead, not a fork. On a turning arrow the diamond seats on a clear stretch, and hovering or selecting it shows small handles on its free vertical corners — drag one and a branch pulls out of the decision, leaving through exactly the corner you grabbed: down for a "No" path, up for an alternate route. Branches always leave vertically — top or bottom — so a junction reads flow-across, fork-up-or-down; the side vertices belong to the arrow's own travel. (With the interaction tool armed, the whole diamond glows as a port and any press-drag branches too.) The moment a branch rides it, the diamond moves to the joint — the elbow corner its paths split from — so the arrow enters one vertex, continues out another, and the branch drops from a third: three arrows, the classic flowchart junction, and never a fourth — a taken diamond grows no more handles and refuses further branches. For a wider fork, mark a decision on the branch and branch again. A branch has no node face of its own — the diamond is the junction — and it always draws as an elbow. Label its exit with a YES or NO chip: chips placed on a decision's arrow seat just past the diamond, chips on a branch beside the junction it leaves, and a text label placed at the diamond tucks beneath it ("first launch?").

Branches belong to their diamond: move either endpoint and the diamond re-projects along its arrow, towing every branch with it. Removing the diamond — or deleting its arrow, or the element that arrow starts from — removes the branches too, all in one undo step. A branch can carry its own decision and branch again; a loop back into itself is refused. The inspector warns before a removal that would take branches along.

Annotations

Marks tell the story at a glance; the Annotation carries the detail — the interaction-flow annotation card, attached to the interaction itself. Select one and the inspector offers a card with four prose fields:

• Trigger — what fires it: "User taps a story preview".
• Feedback — what the user sees happen: "The viewer opens full-screen".
• Rules — what can and can't happen: "Expired stories are skipped".
• Modes — states that change the behavior: "Only while signed in".

Notes live on the interaction: they save, sync to co-editors, and undo with it, one undo step per field edit. Emptying every field — or the remove button in the section header — takes the note off the interaction.

Interaction reference

Canvas

Inspector (interaction selected)

Interactions live on the page with the boxes they connect: they save, sync to co-editors, and undo like everything else. Agents speak the whole interaction language too — see the MCP server tools get_connectors, add_connectors, update_connectors, delete_connectors: marks place with the panel's one-per-family grammar, annotations write per field, interactions appear in agent screenshots even while you have the Ix layer hidden, and selecting one (yours or the agent's select_nodes) hands it across — an agent asking about "this" sees the interaction you have selected.