HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TourView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA guided run through an interface, one stop at a time.ExperimentalSince 0.1.0OverlaysUsageimport'@fusion.dev/helix/tour'import'@fusion.dev/helix-headless/tour'Preview
API ReferenceRoothelix-tourA guided run through an interface, one stop at a time.
PropTypeDefaultDescriptionbackLabelstring""Label for the control that goes back, handed to every stop.defaultIndexnumber0Stop to start on, where nothing declared one.doneLabelstring""Label for the control that goes on from the last stop.indexnumberWhich stop the reader is on.labelstring""Accessible name for the run, such as "Getting started".nextLabelstring""Label for the control that goes on.openbooleanfalseWhether the tour is running.skipLabelstring""Label for the control that leaves the tour.spotlightPaddingnumber8Space left around the target when it is lit, in pixels.
ReadTypeDescriptionlengthnumberHow many stops there are.stopsHelixHeadlessTourStop[]The stops, in the order they were written.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The stops, in the order they should be visited.
EventTypeDescriptionhelix-before-activateHelixBeforeActivateEventFired before the current stop moves, carrying the new index. Cancelable: refusing it takes the decision and nothing moves.helix-before-closeHelixBeforeCloseEventFired before the reader leaves early. Cancelable: refusing it takes the decision and nothing moves.helix-completeHelixCompleteEventFired when the last stop is finished.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionback() => voidGoes back, and does nothing on the first stop.next() => voidGoes on, and finishes the run on the last stop.skip() => voidLeaves the run early, which is a close rather than a completion.
PartDescriptionspotlightThe box over the current target, which paints the scrim.
CSS PropertyDescription--tour-scrim-colorThe darkness outside the lit box.--tour-spotlight-radiusCorner radius of the lit box.
Stophelix-tour-stopOne stop on a tour: what it points at, and a panel to say it in.
PropTypeDefaultDescriptionbackLabelstring"Back"Label for the control that goes back.currentbooleanfalseWhether this is the stop the reader is on.doneLabelstring"Done"Label for the control that goes on from the last stop.firstbooleanfalseWhether this is the first stop, so there is nowhere back to.forstring""The id of the element this stop is about.lastbooleanfalseWhether this is the last stop, so the control says Done.nextLabelstring"Next"Label for the control that goes on.placementPlacement"bottom"Which side of the target the panel prefers.skipLabelstring"Skip"Label for the control that leaves the tour.
ReadTypeDescriptiontargetHTMLElement|nullThe element this stop is about, or null where the id resolves to nothing.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What this stop says. A card, a heading and a line, anything.actionsReplaces the controls, which are Back, Next and Skip.
EventTypeDescriptionhelix-tour-askHelixTourAskEventA stop asking the tour to move, from its own controls.
PartDescriptionactionsThe row the controls sit in.arrowThe point, which the floating pass places against the target.backThe control that goes to the previous stop.back-buttonThe inner control.bubbleThe panel that points at the target.contentThe region holding the slotted content.nextThe control that goes on, and finishes on the last stop.next-buttonThe inner control.skipThe control that leaves the tour.skip-buttonThe inner control.
CSS PropertyDescription--tour-arrow-sizeThe point's box, before it is rotated.--tour-border-widthWidth of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise.--tour-bubble-sizeHow wide the panel may grow.--tour-paddingInset inside the panel.--tour-shadowLift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.--tour-surface-colorThe panel's own surface.
Roothelix-headless-tourA guided run through an interface, one stop at a time.
PropTypeDefaultDescriptionbackLabelstring""Label for the control that goes back, handed to every stop.defaultIndexnumber0Stop to start on, where nothing declared one.doneLabelstring""Label for the control that goes on from the last stop.indexnumberWhich stop the reader is on.labelstring""Accessible name for the run, such as "Getting started".nextLabelstring""Label for the control that goes on.openbooleanfalseWhether the tour is running.skipLabelstring""Label for the control that leaves the tour.spotlightPaddingnumber8Space left around the target when it is lit, in pixels.
ReadTypeDescriptionlengthnumberHow many stops there are.stopsHelixHeadlessTourStop[]The stops, in the order they were written.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The stops, in the order they should be visited.
EventTypeDescriptionhelix-before-activateHelixBeforeActivateEventFired before the current stop moves, carrying the new index. Cancelable: refusing it takes the decision and nothing moves.helix-before-closeHelixBeforeCloseEventFired before the reader leaves early. Cancelable: refusing it takes the decision and nothing moves.helix-completeHelixCompleteEventFired when the last stop is finished.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionback() => voidGoes back, and does nothing on the first stop.next() => voidGoes on, and finishes the run on the last stop.skip() => voidLeaves the run early, which is a close rather than a completion.
PartDescriptionspotlightThe box over the current target, which paints the scrim.
Stophelix-headless-tour-stopOne stop on a tour: what it points at, and a panel to say it in.
PropTypeDefaultDescriptionbackLabelstring"Back"Label for the control that goes back.currentbooleanfalseWhether this is the stop the reader is on.doneLabelstring"Done"Label for the control that goes on from the last stop.firstbooleanfalseWhether this is the first stop, so there is nowhere back to.forstring""The id of the element this stop is about.lastbooleanfalseWhether this is the last stop, so the control says Done.nextLabelstring"Next"Label for the control that goes on.placementPlacement"bottom"Which side of the target the panel prefers.skipLabelstring"Skip"Label for the control that leaves the tour.
ReadTypeDescriptiontargetHTMLElement|nullThe element this stop is about, or null where the id resolves to nothing.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What this stop says. A card, a heading and a line, anything.actionsReplaces the controls, which are Back, Next and Skip.
EventTypeDescriptionhelix-tour-askHelixTourAskEventA stop asking the tour to move, from its own controls.
PartDescriptionactionsThe row the controls sit in.arrowThe point, which the floating pass places against the target.backThe control that goes to the previous stop.back-buttonThe inner control.bubbleThe panel that points at the target.contentThe region holding the slotted content.nextThe control that goes on, and finishes on the last stop.next-buttonThe inner control.skipThe control that leaves the tour.skip-buttonThe inner control.
ExamplesNameDescriptionEventsA stop asks, the run decides, and finishing is not the same as leaving.NestedA path that opens a menu and a drawer to point at what is inside them.PositionsThe first and last stops saying so, with more room cut around what they point at.PreviewFour stops across an app shell, each holding a card.PreviewFour stops across an app shell, each holding a card.ProgressControls of your own, with a count of where the reader is.