HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
CanvasView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA board of cards and the connections between them, which can be navigated, rearranged, and connected.StableSince 0.100.0MediaUsageimport'@fusion.dev/helix/canvas'import'@fusion.dev/helix-headless/canvas'Preview
API ReferenceRoothelix-canvasA board of cards and the connections between them, which can be navigated, rearranged, and connected.
PropTypeDescriptionactivateHintLabelstringDefault"Press the board to use it"The hint shown when a surface waiting to be pressed is scrolled or
swiped over, with gestures="activate". Each family declares it as a
word property with its own English, such as "Press the map to use it".arrangedLabelstringDefault"Cards arranged"What screen readers hear after arrange() moves the cards.comesFromLabelstringDefault"from {cards}"The text read with a card to say where its connections come from, with {cards}.connectedLabelstringDefault"Asked to connect {from} to {to}."The text announced when a connection is requested, with {from} and {to}.connectingLabelstringDefault"Connecting from {from}. Move to another card and press Enter, or Escape to stop."The text announced when a connection is started, with {from} filled in.connectionLabelstringDefault"From {from} to {to}"The accessible name of a connection, with {from} and {to}.controlsstringWhich controls to show, as a list such as pan zoom fullscreen, or
none. A family can add words of its own.controlsLabelstringDefault"Board controls"The name of the group of controls, read by screen readers. Each family
declares it as a word property with its own English, "Map controls" or
"Board controls", which names what the controls drive rather than the
mechanism.controlsPlacement"top-start"|"top-end"|"bottom-start"|"bottom-end"Which corner the controls sit in.copiedLabelstringDefault"{count, plural, one {# card copied} other {# cards copied}}"What screen readers hear after a copy, with {count} for the cards copied.edgeRouteCanvasRouteDraws every connection's line: a function from where it leaves and
arrives, and the sides it does, to its SVG path and where its label sits.fallbackLabelstringDefault"Canvas"The board's name where label is empty.fullscreenLabelstringDefault"Fill the screen"The fullscreen button's label.gestures"activate"|"always"|"cooperative"Which gestures the surface takes from the page.grid"lines"|"dots"Draws lines or dots on the board's plane, so you can see it move.idleDelaynumberDefault0How long, in milliseconds, before the header and footer hide when the
user is inactive. 0 keeps them visible. The attribute also takes a CSS
time, such as 3s.labelstringDefault""The accessible name for the board. Required.labelEditorLabelstringDefault"Label for {name}"The accessible name of the field for editing a label, with {name} for what
the label belongs to.leadsToLabelstringDefault"leads to {cards}"The text read with a card to say where its connections go, with {cards}
as the list.linkedLabelstringDefault"{leadsTo}; {comesFrom}"The text read with a card that has connections both ways. {leadsTo} is
leads-to-label and {comesFrom} is comes-from-label, each filled in.loadingbooleanDefaultfalseMarks the board as busy while its document arrives: the board is
aria-busy, and the loading slot is shown.movedLabelstringDefault"{name} moved to {x}, {y}"What screen readers hear after a key moves a card, with {name} for the
card and {x} and {y} for where it now is, in the document's units.order"spatial"|"edges"The order the arrow keys and screen readers move through the cards:
spatial or edges.panDownLabelstringDefault"Pan down"The pan down button's label.panLeftLabelstringDefault"Pan left"The pan left button's label.panRightLabelstringDefault"Pan right"The pan right button's label.panStepnumberDefault0.25How far one press pans the view, as a fraction of its size.panUpLabelstringDefault"Pan up"The pan up button's label.pastedLabelstringDefault"{count, plural, one {# card pasted} other {# cards pasted}}"What screen readers hear after a paste, with {count} for the cards pasted.path"straight"|"step"The route every connection takes when it sets no path of its own:
straight, or step for right angles.readOnlybooleanDefaultfalsePrevents every card from being moved, connected, or removed.reconnectingLabelstringDefault"Moving the end of the connection from {from} to {to}. Move to a card and press Enter, or Escape to stop."The text announced when a connection's end is picked up, with {from} and
{to}.redoneLabelstringDefault"Move made again"What screen readers hear after a move or a resize is made again.removedLabelstringDefault"{count, plural, one {Asked to remove {name}.} other {Asked to remove # items.}}"What screen readers hear when Delete asks to remove what is selected, with
{count} for how many cards and connections, and {name} for the one
where there is one.resizedLabelstringDefault"{name} resized to {width} by {height}"What screen readers hear after a key resizes a card, with {name} for the
card and {width} and {height} for its new size, in the document's
units.roleLabelstringDefault"canvas"What a screen reader calls the board in place of its role, after its
name: "Release plan, canvas". Said only where the board has a name of its
own, since the fallback name is the same word. Empty leaves the role.selectedstringDefault""The names of the selected cards and connections, comma separated. Empty
when nothing is selected.selectedLabelstringDefault"selected"What a selected card or connection adds to what screen readers hear on
it, before its tone and its connections. Empty adds nothing.selectionLabelstringDefault"{count} selected"What screen readers hear after the selection grows or shrinks, with
{count} for how many cards and connections are selected, written in the
locale, where a language that needs plural forms writes them: by Space, a
click with Shift, Command or Control, Command or Control with A, a box
drawn across the board, or Escape.separation"outlined"|"plain"How the board is set apart from the page. plain draws no frame.snapnumberSnaps the cards a reader moves or resizes to a multiple of this many of the
document's units, such as 32 to land on the lines grid draws.stoppedLabelstringDefault"Stopped connecting."The text announced when a connection is stopped before it is requested.toneLabelsPartial<Record<CanvasTone, string>>Default{}What each tone means on this board, in words read out with the cards and
connections in it, such as {"danger": "Blocked", "success": "Done"}.twoFingerHintLabelstringDefault"Use two fingers to move the board"The hint shown when one finger swipes over a surface with
gestures="cooperative". Each family declares it as a word property.undoneLabelstringDefault"Move undone"What screen readers hear after a move or a resize is undone.usingLabelstringDefault"Using the board. Press Escape to scroll the page again."The line shown while a surface with gestures="activate" has the
gestures. Each family declares it as a word property.viewCanvasViewThe board's current view: the document's point at the middle of the view,
and the zoom.wheelHintLabelstringDefault"Use {key} and scroll to zoom the board"The hint shown when the wheel scrolls past a surface with
gestures="cooperative", with {key}. Each family declares it as a
word property.zoomedLabelstringDefault"Zoom {zoom}"What screen readers hear after a zoom button or key, with {zoom} for the
zoom as a percentage, written the way the element's locale writes one.zoomInLabelstringDefault"Zoom in"The zoom in button's label.zoomOutLabelstringDefault"Zoom out"The zoom out button's label.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The board's helix-canvas-node and helix-canvas-edge elements, drawn on the plane.emptyContent shown when the document has no nodes.footerContent below the board.fullscreen-iconReplaces the glyph inside the fullscreen button.headerContent above the board.loadingContent shown while loading is set, such as a progress bar while the document arrives.pan-down-iconReplaces the glyph inside the pan down button.pan-end-iconReplaces the glyph inside the button that pans toward the end of a line of text.pan-start-iconReplaces the glyph inside the button that pans toward the start of a line of text.pan-up-iconReplaces the glyph inside the pan up button.zoom-in-iconReplaces the glyph inside the zoom-in button.zoom-out-iconReplaces the glyph inside the zoom-out button.
EventTypeDescriptionhelix-before-moveHelixBeforeMoveEventCards are about to move. Cancelable: cancel it to keep the positions in your own state.helix-before-pasteHelixBeforePasteEventCards and connections are about to be pasted. Cancelable: cancel it to add the detail's document to your own state.helix-before-reconnectHelixBeforeReconnectEventA connection's end is about to move to another card or side. Cancelable: cancel it to keep connections in your own state.helix-before-relabelHelixBeforeRelabelEventA connection's label or a group's name is about to change. Cancelable: cancel it to keep labels in your own state.helix-canvas-editHelixCanvasEditEventA card was double-clicked, or Enter or F2 was pressed on it. Open your own editor for the card.helix-canvas-panHelixCanvasPanEventThe board moved one step, from its controls or the arrow keys. A drag sends helix-canvas-view.helix-canvas-viewHelixCanvasViewEventThe board's view changed, by any means. The detail is the new view.helix-canvas-zoomHelixCanvasZoomEventThe board zoomed one step, from its controls or the keys. A wheel or a pinch sends helix-canvas-view.helix-connectHelixConnectEventTwo cards were chosen to be joined. Add a helix-canvas-edge to join them.helix-moveHelixMoveEventCards moved and the move is finished: a drag was released, a click put a card down, or a key was pressed.helix-pastedHelixPastedEventCards and connections were pasted, and the board holds them.helix-reconnectHelixReconnectEventA connection's end moved, and the move is finished.helix-relabelHelixRelabelEventA connection's label or a group's name changed.helix-removeHelixRemoveEventCards or connections were chosen for removal. Remove the elements it names.helix-selectHelixSelectEventThe selection changed. The detail's value is the names, comma separated, empty for none. Cancelable: canceling it keeps the selection as it was.
MethodTypeDescriptionarrange(options: CanvasArrangeOptions) => booleanMoves the cards so that none overlaps another: in layers that follow the
connections, or in a grid where there are none. A group moves as one box
with its cards. Each place lands on a multiple of snap where it is set.fit() => voidFits the whole board into its box, centered, and never zoomed in past its
own size.pan(to: ViewportWay) => voidPans the view one step in a direction.paste(document: CanvasDocument | string) => booleanAdds the cards and connections of a JSON Canvas document, as a paste does,
and selects the cards. Ids the board already holds are given a count after
them, and the cards move a step down and to the right while they would sit
on cards already there.redo() => booleanMakes the last move or resize undo took back again, asking with
helix-before-move first. Returns whether anything moved.show(name: string) => voidBrings a card, by name, to the middle of the viewport.toggleFullscreen() => voidTurns fullscreen on or off.toJsonCanvas() => CanvasDocumentThe board as a JSON Canvas document, for saving it.undo() => booleanPuts the cards of the last move or resize back where they stood, asking
with helix-before-move first. Returns whether anything moved: false
with nothing to undo, or when the request was refused.zoom(by: number) => voidZooms the view one step: 1 zooms in and -1 zooms out.
PartDescriptionarrowThe arrowhead at an end of a connection that has one.boardThe plane the cards are placed on, which pans and zooms.controlsThe toolbar the pan and zoom buttons sit in, one tab stop.draftThe connection being drawn, before helix-connect is sent.edgeOne connector between two cards.edge-endAn end of a selected connection. Drag it, or click it to pick it up.edge-targetA wider, invisible line over a connection, which receives focus and presses.edgesA layer the connectors are drawn in: one holding the arrowhead, and one after each card holding the connections leaving it, so they are read in the order the arrows walk them. Give it z-index: -1 to draw it under the cards.footerThe strip below the board.fullscreenThe button that makes the board fill the screen.fullscreen-buttonfullscreen's inner button.fullscreen-livefullscreen's live region, which speaks while it is pending.fullscreen-spinnerThe ring fullscreen turns while it is pending.fullscreen-textThe box fullscreen's glyph sits in.gesture-hintWords over the board for a moment when it lets a gesture pass to the page, such as how to zoom it.gesture-statusThe line shown while a board with gestures="activate" has the gestures.headerThe strip above the board.labelThe label on a connector.label-editorThe field for editing a connection's label or a group's name, placed over that text.liveA live region that screen readers announce while a connection is being made. Visually hidden in the styled tier.marqueeThe box a Shift-drag across the empty board draws, which selects the cards it touches.minimapThe picture of the whole board, under controls="minimap".minimap-nodeOne card in the minimap.minimap-viewThe frame in the minimap around what is on screen.pan-downThe button that moves the board down.pan-down-buttonpan-down's inner button.pan-down-livepan-down's live region, which speaks while it is pending.pan-down-spinnerThe ring pan-down turns while it is pending.pan-down-textThe box pan-down's glyph sits in.pan-endThe button that moves the board toward the end of a line of text: right in English.pan-end-buttonpan-end's inner button.pan-end-livepan-end's live region, which speaks while it is pending.pan-end-spinnerThe ring pan-end turns while it is pending.pan-end-textThe box pan-end's glyph sits in.pan-startThe button that moves the board toward the start of a line of text: left in English.pan-start-buttonpan-start's inner button.pan-start-livepan-start's live region, which speaks while it is pending.pan-start-spinnerThe ring pan-start turns while it is pending.pan-start-textThe box pan-start's glyph sits in.pan-upThe button that moves the board up.pan-up-buttonpan-up's inner button.pan-up-livepan-up's live region, which speaks while it is pending.pan-up-spinnerThe ring pan-up turns while it is pending.pan-up-textThe box pan-up's glyph sits in.regionThe named region the board is drawn in.viewportThe box the board is drawn inside.zoom-inThe button that zooms in.zoom-in-buttonzoom-in's inner button.zoom-in-livezoom-in's live region, which speaks while it is pending.zoom-in-spinnerThe ring zoom-in turns while it is pending.zoom-in-textThe box zoom-in's glyph sits in.zoom-outThe button that zooms out.zoom-out-buttonzoom-out's inner button.zoom-out-livezoom-out's live region, which speaks while it is pending.zoom-out-spinnerThe ring zoom-out turns while it is pending.zoom-out-textThe box zoom-out's glyph sits in.
CSS PropertyDescription--canvas-background-colorThe background behind the board.--canvas-block-sizeThe height of the frame.--canvas-border-colorThe color of the frame's edge.--canvas-connect-colorThe color of a connection being drawn, and of the card it will arrive at and that card's points.--canvas-edge-colorThe color of a connection with no tone. Set it in one edge's style to color only that edge.--canvas-edge-target-widthThe width of the area a pointer can press on a connection, which is wider than the drawn line.--canvas-edge-widthThe width of a connection's line. A selected or focused connection is drawn at twice it.--canvas-grid-sizeThe spacing of the grid lines or dots, in the document's units, so it scales with the zoom.--canvas-handle-sizeThe size of the ends of a selected connection. A card's connection points use the same property.--canvas-label-colorThe color of the label on a connection.--canvas-label-editor-inline-sizeThe width of the field for editing a label.--canvas-label-font-sizeThe size of the label on a connection.--canvas-minimap-block-sizeThe height of the minimap, under controls="minimap".--canvas-minimap-inline-sizeThe width of the minimap, under controls="minimap".--canvas-radiusThe frame's corners.--canvas-selected-colorThe color of what is selected: a card's outline, its corners and its move handle, a connection and its ends, and the box drawn to select.--canvas-zoomThe board's zoom, which the board writes: 1 at the document's own size, 0.5 at half. The cards inherit it, so a card's stylesheet can draw less when the board is far out, such as a border that stays one pixel wide at calc(1px / var(--canvas-zoom)).--viewport-control-background-colorThe background of the pan and zoom buttons. Map uses the same property.
Custom stateDescriptionconnectingWhile you draw a connection.directThe board moves without easing, while you drag it or while it settles into its box.emptyWhile the document has no nodes.fullscreenWhile the board fills the screen.holdingAn item picked up with a click follows the pointer until the next press puts it down.idleThe user has been still for idle-delay milliseconds. The board's own controls stay; select on it to hide chrome of your own.loadingWhile loading is set.pressingWhile a press on the board, its cards or its connections is under way.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.sharingThe page keeps the plain wheel and one finger, with gestures="cooperative" or while a board with gestures="activate" waits to be pressed.usingA board with gestures="activate" has been pressed and has the gestures.
Edgehelix-canvas-edgeA connector between two cards on a canvas.
PropTypeDescriptionfromstringDefault""The name of the card the connection starts from.fromEnd"none"|"arrow"The marker at the start of the connection.fromSide"top"|"right"|"bottom"|"left"The side of the from card the connection leaves from, when the document sets one.labelstringText drawn at the middle of the connection.namestringDefault""The connection's name, unique on its board, which events use to refer to
it.path"straight"|"step"The route the line takes: straight, or step for right angles.readOnlybooleanDefaultfalsePrevents the connection from being removed.tostringDefault""The name of the card the connection ends at.toEnd"none"|"arrow"The marker at the end of the connection. Unset is an arrow, as JSON Canvas specifies.tone"accent"|"danger"|"info"|"neutral"|"primary"|"success"|"warning"The meaning of the connection, shown by its color, in the same tones as
other Helix components.toSide"top"|"right"|"bottom"|"left"The side of the to card the connection arrives at, when the document sets one.variant"dashed"|"dotted"How the line is drawn: dashed or dotted. Unset is solid.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Nodehelix-canvas-nodeOne card or group on a canvas.
PropTypeDescriptiongroupbooleanDefaultfalseMakes this a group: a box drawn behind the cards inside it.heightnumberDefault0How tall the card is, in the document's own units.labelstringDefault""The card's name as text. A group shows it, and another card's connections
read it out.material"frosted"|"glass"|"transparent"The material of the card's background: glass or frosted, which let the
board's grid lines show through, or transparent.namestringDefault""The name that connections and events use for this card, unique on its
board.readOnlybooleanDefaultfalsePrevents the card from being moved, connected, or removed.separation"elevated"|"filled"|"outlined"|"plain"How the card is set apart from the board: outlined, filled,
elevated, or plain.shape"circle"|"diamond"|"pill"|"square"The card's outline: circle, diamond, pill, or square. Unset is a
rounded box.tone"accent"|"danger"|"info"|"neutral"|"primary"|"success"|"warning"The meaning of the card, shown by its color, in the same tones as other
Helix components.widthnumberDefault0How wide the card is, in the document's own units.xnumberDefault0Where its left edge sits, in the document's own units.ynumberDefault0Where its top edge sits, in the document's own units.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The card's content, such as text, a picture, or a chart.descriptionA line of secondary text under the content.
MethodTypeDescriptionfocus(options: FocusOptions) => voidFocuses the card's node part. The host draws no box of its own.
PartDescriptiongripA corner handle that resizes a selected card, on each of the four corners.grip-bottom-leftThe bottom left corner.grip-bottom-rightThe bottom right corner.grip-top-leftThe top left corner.grip-top-rightThe top right corner.handleA point that you draw a connection from, on each of the four sides.handle-bottomThe point on the bottom side.handle-leftThe point on the left side.handle-rightThe point on the right side.handle-topThe point on the top side.moveThe handle that moves a selected card. Drag it, or click once to pick the card up and again to put it down.nodeThe box the content sits in.outlineThe drawn outline of a diamond card, a shape a box cannot draw.
CSS PropertyDescription--canvas-grip-sizeThe size of the corner handles that resize a selected card.--canvas-handle-sizeThe size of the points you draw a connection from.--canvas-move-block-sizeThe height of the handle that moves a selected card.--canvas-move-inline-sizeThe width of the handle that moves a selected card.--canvas-move-insetThe distance between the move handle and the card's corner.--canvas-node-background-colorThe card's background.--canvas-node-colorA color for the card that carries no meaning, such as a hex color from a document. Use it when no tone fits.--canvas-node-font-sizeThe size of the card's text.--canvas-node-paddingThe space between the card's edge and its content.--canvas-node-radiusThe card's corners. A shape draws its own.--canvas-node-shadowThe shadow under the card, set by separation="elevated".
Custom stateDescriptioncandidateWhile a connection is being drawn and this card is somewhere it could arrive.currentThe card that receives focus when you tab into the board.placedPlaced on the board.selectedThe card is selected.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.targetA connection being drawn would end here if you released it.
Roothelix-headless-canvasA board of cards and the connections between them, which can be navigated, rearranged, and connected.
PropTypeDescriptionactivateHintLabelstringDefault"Press the board to use it"The hint shown when the board, waiting to be pressed with
gestures="activate", is scrolled or swiped over.arrangedLabelstringDefault"Cards arranged"What screen readers hear after arrange() moves the cards.comesFromLabelstringDefault"from {cards}"The text read with a card to say where its connections come from, with {cards}.connectedLabelstringDefault"Asked to connect {from} to {to}."The text announced when a connection is requested, with {from} and {to}.connectingLabelstringDefault"Connecting from {from}. Move to another card and press Enter, or Escape to stop."The text announced when a connection is started, with {from} filled in.connectionLabelstringDefault"From {from} to {to}"The accessible name of a connection, with {from} and {to}.controlsstringWhich controls to show, as a list such as pan zoom fullscreen, or
none. A family can add words of its own.controlsLabelstringDefault"Board controls"The name of the group of controls, read by screen readers, which names
what the controls drive rather than the mechanism.controlsPlacement"top-start"|"top-end"|"bottom-start"|"bottom-end"Which corner the controls sit in.copiedLabelstringDefault"{count, plural, one {# card copied} other {# cards copied}}"What screen readers hear after a copy, with {count} for the cards copied.edgeRouteCanvasRouteDraws every connection's line: a function from where it leaves and
arrives, and the sides it does, to its SVG path and where its label sits.fallbackLabelstringDefault"Canvas"The board's name where label is empty.fullscreenLabelstringDefault"Fill the screen"The fullscreen button's label.gestures"activate"|"always"|"cooperative"Which gestures the surface takes from the page.idleDelaynumberDefault0How long, in milliseconds, before the header and footer hide when the
user is inactive. 0 keeps them visible. The attribute also takes a CSS
time, such as 3s.labelstringDefault""The accessible name for the board. Required.labelEditorLabelstringDefault"Label for {name}"The accessible name of the field for editing a label, with {name} for what
the label belongs to.leadsToLabelstringDefault"leads to {cards}"The text read with a card to say where its connections go, with {cards}
as the list.linkedLabelstringDefault"{leadsTo}; {comesFrom}"The text read with a card that has connections both ways. {leadsTo} is
leads-to-label and {comesFrom} is comes-from-label, each filled in.loadingbooleanDefaultfalseMarks the board as busy while its document arrives: the board is
aria-busy, and the loading slot is shown.movedLabelstringDefault"{name} moved to {x}, {y}"What screen readers hear after a key moves a card, with {name} for the
card and {x} and {y} for where it now is, in the document's units.order"spatial"|"edges"The order the arrow keys and screen readers move through the cards:
spatial or edges.panDownLabelstringDefault"Pan down"The pan down button's label.panLeftLabelstringDefault"Pan left"The pan left button's label.panRightLabelstringDefault"Pan right"The pan right button's label.panStepnumberDefault0.25How far one press pans the view, as a fraction of its size.panUpLabelstringDefault"Pan up"The pan up button's label.pastedLabelstringDefault"{count, plural, one {# card pasted} other {# cards pasted}}"What screen readers hear after a paste, with {count} for the cards pasted.path"straight"|"step"The route every connection takes when it sets no path of its own:
straight, or step for right angles.readOnlybooleanDefaultfalsePrevents every card from being moved, connected, or removed.reconnectingLabelstringDefault"Moving the end of the connection from {from} to {to}. Move to a card and press Enter, or Escape to stop."The text announced when a connection's end is picked up, with {from} and
{to}.redoneLabelstringDefault"Move made again"What screen readers hear after a move or a resize is made again.removedLabelstringDefault"{count, plural, one {Asked to remove {name}.} other {Asked to remove # items.}}"What screen readers hear when Delete asks to remove what is selected, with
{count} for how many cards and connections, and {name} for the one
where there is one.resizedLabelstringDefault"{name} resized to {width} by {height}"What screen readers hear after a key resizes a card, with {name} for the
card and {width} and {height} for its new size, in the document's
units.roleLabelstringDefault"canvas"What a screen reader calls the board in place of its role, after its
name: "Release plan, canvas". Said only where the board has a name of its
own, since the fallback name is the same word. Empty leaves the role.selectedstringDefault""The names of the selected cards and connections, comma separated. Empty
when nothing is selected.selectedLabelstringDefault"selected"What a selected card or connection adds to what screen readers hear on
it, before its tone and its connections. Empty adds nothing.selectionLabelstringDefault"{count} selected"What screen readers hear after the selection grows or shrinks, with
{count} for how many cards and connections are selected, written in the
locale, where a language that needs plural forms writes them: by Space, a
click with Shift, Command or Control, Command or Control with A, a box
drawn across the board, or Escape.snapnumberSnaps the cards a reader moves or resizes to a multiple of this many of the
document's units, such as 32 to land on the lines grid draws.stoppedLabelstringDefault"Stopped connecting."The text announced when a connection is stopped before it is requested.toneLabelsPartial<Record<CanvasTone, string>>Default{}What each tone means on this board, in words read out with the cards and
connections in it, such as {"danger": "Blocked", "success": "Done"}.twoFingerHintLabelstringDefault"Use two fingers to move the board"The hint shown when one finger swipes over the board with gestures="cooperative".undoneLabelstringDefault"Move undone"What screen readers hear after a move or a resize is undone.usingLabelstringDefault"Using the board. Press Escape to scroll the page again."The line shown while the board, with gestures="activate", has the gestures.viewCanvasViewThe board's current view: the document's point at the middle of the view,
and the zoom.wheelHintLabelstringDefault"Use {key} and scroll to zoom the board"The hint shown when the wheel scrolls past the board with
gestures="cooperative". {key} is ⌘ on a Mac and Ctrl elsewhere.zoomedLabelstringDefault"Zoom {zoom}"What screen readers hear after a zoom button or key, with {zoom} for the
zoom as a percentage, written the way the element's locale writes one.zoomInLabelstringDefault"Zoom in"The zoom in button's label.zoomOutLabelstringDefault"Zoom out"The zoom out button's label.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The board's helix-canvas-node and helix-canvas-edge elements, drawn on the plane.emptyContent shown when the document has no nodes.footerContent below the board.fullscreen-iconReplaces the glyph inside the fullscreen button.headerContent above the board.loadingContent shown while loading is set, such as a progress bar while the document arrives.pan-down-iconReplaces the glyph inside the pan down button.pan-end-iconReplaces the glyph inside the button that pans toward the end of a line of text.pan-start-iconReplaces the glyph inside the button that pans toward the start of a line of text.pan-up-iconReplaces the glyph inside the pan up button.zoom-in-iconReplaces the glyph inside the zoom-in button.zoom-out-iconReplaces the glyph inside the zoom-out button.
EventTypeDescriptionhelix-before-moveHelixBeforeMoveEventCards are about to move. Cancelable: cancel it to keep the positions in your own state.helix-before-pasteHelixBeforePasteEventCards and connections are about to be pasted. Cancelable: cancel it to add the detail's document to your own state.helix-before-reconnectHelixBeforeReconnectEventA connection's end is about to move to another card or side. Cancelable: cancel it to keep connections in your own state.helix-before-relabelHelixBeforeRelabelEventA connection's label or a group's name is about to change. Cancelable: cancel it to keep labels in your own state.helix-canvas-editHelixCanvasEditEventA card was double-clicked, or Enter or F2 was pressed on it. Open your own editor for the card.helix-canvas-panHelixCanvasPanEventThe board moved one step, from its controls or the arrow keys. A drag sends helix-canvas-view.helix-canvas-viewHelixCanvasViewEventThe board's view changed, by any means. The detail is the new view.helix-canvas-zoomHelixCanvasZoomEventThe board zoomed one step, from its controls or the keys. A wheel or a pinch sends helix-canvas-view.helix-connectHelixConnectEventTwo cards were chosen to be joined. Add a helix-canvas-edge to join them.helix-moveHelixMoveEventCards moved and the move is finished: a drag was released, a click put a card down, or a key was pressed.helix-pastedHelixPastedEventCards and connections were pasted, and the board holds them.helix-reconnectHelixReconnectEventA connection's end moved, and the move is finished.helix-relabelHelixRelabelEventA connection's label or a group's name changed.helix-removeHelixRemoveEventCards or connections were chosen for removal. Remove the elements it names.helix-selectHelixSelectEventThe selection changed. The detail's value is the names, comma separated, empty for none. Cancelable: canceling it keeps the selection as it was.
MethodTypeDescriptionarrange(options: CanvasArrangeOptions) => booleanMoves the cards so that none overlaps another: in layers that follow the
connections, or in a grid where there are none. A group moves as one box
with its cards. Each place lands on a multiple of snap where it is set.fit() => voidFits the whole board into its box, centered, and never zoomed in past its
own size.pan(to: ViewportWay) => voidMoves the board, and says so.paste(document: CanvasDocument | string) => booleanAdds the cards and connections of a JSON Canvas document, as a paste does,
and selects the cards. Ids the board already holds are given a count after
them, and the cards move a step down and to the right while they would sit
on cards already there.redo() => booleanMakes the last move or resize undo took back again, asking with
helix-before-move first. Returns whether anything moved.show(name: string) => voidBrings a card, by name, to the middle of the viewport.toggleFullscreen() => voidTurns fullscreen on or off.toJsonCanvas() => CanvasDocumentThe board as a JSON Canvas document, for saving it.undo() => booleanPuts the cards of the last move or resize back where they stood, asking
with helix-before-move first. Returns whether anything moved: false
with nothing to undo, or when the request was refused.zoom(by: number) => voidZooms the board about the middle of the view, and says so.
PartDescriptionarrowThe arrowhead at an end of a connection that has one.boardThe plane the cards are placed on, which pans and zooms.controlsThe toolbar the pan and zoom buttons sit in, one tab stop.draftThe connection being drawn, before helix-connect is sent.edgeOne connector between two cards.edge-endAn end of a selected connection. Drag it, or click it to pick it up.edge-targetA wider, invisible line over a connection, which receives focus and presses.edgesA layer the connectors are drawn in: one holding the arrowhead, and one after each card holding the connections leaving it, so they are read in the order the arrows walk them. Give it z-index: -1 to draw it under the cards.footerThe strip below the board.fullscreenThe button that makes the board fill the screen.fullscreen-buttonfullscreen's inner button.fullscreen-livefullscreen's live region, which speaks while it is pending.fullscreen-spinnerThe ring fullscreen turns while it is pending.fullscreen-textThe box fullscreen's glyph sits in.gesture-hintWords over the board for a moment when it lets a gesture pass to the page, such as how to zoom it.gesture-statusThe line shown while a board with gestures="activate" has the gestures.headerThe strip above the board.labelThe label on a connector.label-editorThe field for editing a connection's label or a group's name, placed over that text.liveA live region that screen readers announce while a connection is being made. Visually hidden in the styled tier.marqueeThe box a Shift-drag across the empty board draws, which selects the cards it touches.minimapThe picture of the whole board, under controls="minimap".minimap-nodeOne card in the minimap.minimap-viewThe frame in the minimap around what is on screen.pan-downThe button that moves the board down.pan-down-buttonpan-down's inner button.pan-down-livepan-down's live region, which speaks while it is pending.pan-down-spinnerThe ring pan-down turns while it is pending.pan-down-textThe box pan-down's glyph sits in.pan-endThe button that moves the board toward the end of a line of text: right in English.pan-end-buttonpan-end's inner button.pan-end-livepan-end's live region, which speaks while it is pending.pan-end-spinnerThe ring pan-end turns while it is pending.pan-end-textThe box pan-end's glyph sits in.pan-startThe button that moves the board toward the start of a line of text: left in English.pan-start-buttonpan-start's inner button.pan-start-livepan-start's live region, which speaks while it is pending.pan-start-spinnerThe ring pan-start turns while it is pending.pan-start-textThe box pan-start's glyph sits in.pan-upThe button that moves the board up.pan-up-buttonpan-up's inner button.pan-up-livepan-up's live region, which speaks while it is pending.pan-up-spinnerThe ring pan-up turns while it is pending.pan-up-textThe box pan-up's glyph sits in.regionThe named region the board is drawn in.viewportThe box the board is drawn inside.zoom-inThe button that zooms in.zoom-in-buttonzoom-in's inner button.zoom-in-livezoom-in's live region, which speaks while it is pending.zoom-in-spinnerThe ring zoom-in turns while it is pending.zoom-in-textThe box zoom-in's glyph sits in.zoom-outThe button that zooms out.zoom-out-buttonzoom-out's inner button.zoom-out-livezoom-out's live region, which speaks while it is pending.zoom-out-spinnerThe ring zoom-out turns while it is pending.zoom-out-textThe box zoom-out's glyph sits in.
CSS PropertyDescription--canvas-zoomThe board's zoom, which the board writes: 1 at the document's own size, 0.5 at half. The cards inherit it, so a card's stylesheet can draw less when the board is far out, such as a border that stays one pixel wide at calc(1px / var(--canvas-zoom)).
Custom stateDescriptionconnectingWhile you draw a connection.directThe board moves without easing, while you drag it or while it settles into its box.emptyWhile the document has no nodes.fullscreenWhile the board fills the screen.holdingAn item picked up with a click follows the pointer until the next press puts it down.idleThe user has been still for idle-delay milliseconds. The board's own controls stay; select on it to hide chrome of your own.loadingWhile loading is set.pressingWhile a press on the board, its cards or its connections is under way.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.sharingThe page keeps the plain wheel and one finger, with gestures="cooperative" or while a board with gestures="activate" waits to be pressed.usingA board with gestures="activate" has been pressed and has the gestures.
Edgehelix-headless-canvas-edgeA connector between two cards on a canvas.
PropTypeDescriptionfromstringDefault""The name of the card the connection starts from.fromEnd"none"|"arrow"The marker at the start of the connection.fromSide"top"|"right"|"bottom"|"left"The side of the from card the connection leaves from, when the document sets one.labelstringText drawn at the middle of the connection.namestringDefault""The connection's name, unique on its board, which events use to refer to
it.path"straight"|"step"The route the line takes: straight, or step for right angles.readOnlybooleanDefaultfalsePrevents the connection from being removed.tostringDefault""The name of the card the connection ends at.toEnd"none"|"arrow"The marker at the end of the connection. Unset is an arrow, as JSON Canvas specifies.tone"accent"|"danger"|"info"|"neutral"|"primary"|"success"|"warning"The meaning of the connection, shown by its color, in the same tones as
other Helix components.toSide"top"|"right"|"bottom"|"left"The side of the to card the connection arrives at, when the document sets one.variant"dashed"|"dotted"How the line is drawn: dashed or dotted. Unset is solid.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Nodehelix-headless-canvas-nodeOne card or group on a canvas.
PropTypeDescriptiongroupbooleanDefaultfalseMakes this a group: a box drawn behind the cards inside it.heightnumberDefault0How tall the card is, in the document's own units.labelstringDefault""The card's name as text. A group shows it, and another card's connections
read it out.namestringDefault""The name that connections and events use for this card, unique on its
board.readOnlybooleanDefaultfalsePrevents the card from being moved, connected, or removed.shape"circle"|"diamond"|"pill"|"square"The card's outline: circle, diamond, pill, or square. Unset is a
rounded box.tone"accent"|"danger"|"info"|"neutral"|"primary"|"success"|"warning"The meaning of the card, shown by its color, in the same tones as other
Helix components.widthnumberDefault0How wide the card is, in the document's own units.xnumberDefault0Where its left edge sits, in the document's own units.ynumberDefault0Where its top edge sits, in the document's own units.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The card's content, such as text, a picture, or a chart.descriptionA line of secondary text under the content.
MethodTypeDescriptionfocus(options: FocusOptions) => voidFocuses the card's node part. The host draws no box of its own.
PartDescriptiongripA corner handle that resizes a selected card, on each of the four corners.grip-bottom-leftThe bottom left corner.grip-bottom-rightThe bottom right corner.grip-top-leftThe top left corner.grip-top-rightThe top right corner.handleA point that you draw a connection from, on each of the four sides.handle-bottomThe point on the bottom side.handle-leftThe point on the left side.handle-rightThe point on the right side.handle-topThe point on the top side.moveThe handle that moves a selected card. Drag it, or click once to pick the card up and again to put it down.nodeThe box the content sits in.outlineThe drawn outline of a diamond card, a shape a box cannot draw.
Custom stateDescriptioncandidateWhile a connection is being drawn and this card is somewhere it could arrive.currentThe card that receives focus when you tab into the board.placedPlaced on the board.selectedThe card is selected.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.targetA connection being drawn would end here if you released it.
Examples
NameDescriptionControlledA board whose page holds the card positions. The page cancels each move and places the card on the nearest grid line.EditingA board you can edit. Draw from a card's edge to another card to join them, drag a connection's end to move it, double-click a card to edit it, and press Delete to remove a card or a connection.FlowchartA flowchart with a pill to start, boxes for steps, a diamond for the decision, and a circle to end, joined at right angles.MinimapA board with a minimap in its corner. A press or a drag on the minimap moves the view there.PreviewA board of cards and the arrows between them, drawn where its author placed each one.PreviewA board of cards and the arrows between them, drawn where its author placed each one.Read OnlyA read-only board for publishing. Every card stays where its author put it, and every connection turns at right angles.StylesOutlined, filled, elevated, and plain cards, joined by solid, dashed, and dotted connections, with what each tone means read out.With ComponentsCards that hold your own components, such as an image and a stat.