Overview
A walkthrough is authored in its own editor, separate from the page builder. The walkthrough builder opens onto the real page your tour will play over, with an ordered list of the tour's steps down one side and a property panel for the selected step on the other. You assemble the tour here — add and order steps, compose what each step says, point each step at part of the page, and preview the whole thing before you publish.
The Canvas
The canvas shows the actual page your walkthrough runs on, rendered live with the selected step drawn over it — the tooltip or modal, the dimmed backdrop, and the highlight around the target. It is a running preview, not a static mockup, so what you see on the canvas is what the tour looks like to a user on that page.
Because the canvas is the real page, the tooltip and modal position themselves against real blocks, and moving between steps re-draws the overlay for whichever step is selected.
Warning: Inside the builder and its preview, steps appear immediately — the "show after a delay" and "show after scrolling" settings are not applied. Steps that are configured to wait still show at once on the canvas. Test timing behavior in the live published app, not on the canvas.
The Step List
The step list is the spine of the builder: an ordered, top-to-bottom list of every step in the tour. The order in the list is the order the tour plays. Selecting a step loads it on the canvas and in the property panel.
Step Row Controls
| Control | What it does |
| Drag handle | Drag a step earlier or later in the list. The playback order updates immediately. |
| Rename | Give the step a readable name so the list stays legible as it grows. |
| Duplicate | Copy a step — including its message and settings — as the basis for the next one. |
| Delete | Remove a step from the tour. The Delete option disappears when only one step remains — a walkthrough always keeps at least one step. |
| Play | Preview the tour starting from that step, without leaving the builder. |
Note: You cannot delete a tour's only remaining step — the Delete option disappears. To "empty" a tour, delete the walkthrough itself from the Walkthroughs list, not its last step.
Adding a Step
Click Add Step to add a new step. A picker appears offering ready-made tooltip and modal templates. Every step begins as a template — there is no blank step option.
When you choose a tooltip template, the builder immediately enters target-selection mode so you can click the element the tooltip will anchor to. Tooltip steps always need a target, so the builder skips you straight to picking one.
Click Add Step: Opens the template picker below the step list.
Choose a template: Select a Tooltip Template (anchored to an element) or a Modal Template (floating over the page). The chosen layout becomes the step's starting content.
(Tooltip) Pick a target element: The canvas enters selection mode. Hover to highlight elements; click to select one. Confirm with Save. The step is anchored to that element.
Edit the step in the property panel: The new step is selected. Configure its content and appearance in the property panel on the right. See Steps & Targeting for the full reference.
The Builder Header
The header carries tour-level controls above any single step:
| Control | What it does |
| Back | Returns to the walkthrough list for the app. |
| Walkthrough name | The tour's name — editable inline. |
| Active / Inactive toggle | The tour's on/off state, saved with the walkthrough. Inactive tours do not run for real users even when published. |
| Device switcher | Switch between desktop, tablet, and mobile to author and preview the tour at the size it will run. |
| Undo / Redo | Step back or forward through your editing history. |
| Interactive canvas toggle | Switch between preview mode and interactive editing of the canvas. |
| Save | Save changes manually (only shown when real-time collaboration is off). |
| Publish | Publish the app (including this walkthrough) to the live URL. |
Header During Preview
While previewing a tour, the header changes to show tour progress — for example "Step 2 of 5" — and offers a Restart control that jumps the preview back to the first step.
The Property Panel
Selecting a step opens its property panel on the right, split into two tabs:
| Tab | What it contains |
| Content | What the step is: tooltip or modal, the target it points at, and the timing and interaction rules for when it shows and what the user may touch. |
| Appearance | How the step looks: the backdrop and spotlight, placement, and sizing. |
The panel can be collapsed to give the canvas more room.
Every field on both tabs is documented in full on the Steps & Targeting page.
Saving Your Work
Whether saving is manual or automatic depends on whether real-time collaboration is enabled for the app:
Collaboration on: Edits save automatically. There is no manual Save button and no unsaved-changes indicator.
Collaboration off: You save manually using the Save button in the header. An "unsaved changes" chip warns you before you leave with work unsaved.
Previewing the Tour
Use the Play button on any step row to start a preview of the tour from that step. The canvas enters tour mode — you can advance through the steps with the step's own Next/Back controls and see the dimmed backdrop and tooltips as users will.
To restart from the beginning, click Restart in the header.
Warning: In the builder's preview, "advance when the target is clicked" does nothing — you move between steps with the builder's controls — and "end the tour if the target is missing" is not honored (the preview shows a full backdrop instead). Test these behaviors in the live published app.
Example — Building a 3-step onboarding tour
Step 1 — Welcome modal: Choose a Modal Template. Edit the title to "Welcome to the app!" and the body to "This quick tour shows you the key features." Add a Next button wired to Control step → next.
Step 2 — Highlight the main action button: Choose a Tooltip Template. Click the primary action button on the canvas in selection mode. Edit the tooltip text to "Click here to create a new record." Set Go to next step on click to target element so clicking the button both advances the tour and performs the action.
Step 3 — Closing modal: Choose a Modal Template. Title: "You're all set!" Body: "Explore the app or revisit this tour any time." Add a Finish button wired to Control step → next (advancing past the last step completes the tour).
Activate the walkthrough, publish the app, and wire a "Take the tour" button on the app to Control walkthrough → startWalkthrough.
Related Pages
Walkthroughs Overview — the Walkthroughs tab and creating a walkthrough.
Steps & Targeting — every field on the Content and Appearance tabs.
Controlling a Walkthrough — wiring actions to start, stop, and advance the tour.