Editor layout
The tour editor has three main areas:Steps panel
Lists every step in your tour. Click a step to select it, or drag steps to reorder them.
Canvas
Shows the screenshot for the selected step along with its hotspot, tooltip, and any overlay.
Settings panel
Contextual controls for the selected step — tooltip text, colors, position, overlay options, and more.
Working with steps
Add a step
Steps are automatically created from your screen recording. You can also add blank steps manually from the steps panel.Reorder steps
Drag a step up or down in the steps panel to change its order in the tour.Duplicate a step
Right-click a step in the steps panel and select Duplicate step. The duplicated step appears immediately after the original.Delete a step
Right-click a step and select Delete step. Deleted steps cannot be recovered.Hide a step
Toggle Hide step in the settings panel to exclude a step from the published tour without deleting it. Hidden steps remain visible in the editor.Hidden steps still count toward your total step count in the editor but are skipped when a viewer plays the tour.
Hotspots
A hotspot is the interactive indicator on the canvas that the viewer clicks to advance to the next step.Hotspot styles
Layerpath supports two hotspot styles:- Style 1 — Pulsing dot: A small animated circle that pulses to attract attention.
- Style 2 — Highlight rectangle: A bordered rectangle that highlights the relevant UI element, with a dimmed overlay around it.
Positioning a hotspot
The hotspot position is automatically detected from your screen recording click. To reposition it manually, drag the hotspot on the canvas to a new location.Anchor behavior
The hotspot anchors itself to the detected click point. The tooltip automatically repositions to avoid overflowing the canvas edges.Tooltips
A tooltip appears next to the hotspot and displays the step’s description text and navigation controls.Tooltip position
Choose where the tooltip appears relative to the hotspot:| Option | Behavior |
|---|---|
| Auto | Layerpath picks the best position based on available space |
| Top | Tooltip appears above the hotspot |
| Right | Tooltip appears to the right |
| Left | Tooltip appears to the left |
| Bottom | Tooltip appears below the hotspot |
Tooltip content
Edit the tooltip text directly in the settings panel under Callout content. The field supports Markdown formatting.Tooltip colors
Step actions
You can attach quick-action chips to a tooltip:- Copy chip: Shows a button that copies a value to the viewer’s clipboard.
- Link chip: Shows a button that opens an external URL in a new tab.
Overlays
An overlay covers the entire step canvas with a semi-transparent background, a heading, description, and one or more call-to-action buttons. Overlays are typically used for the intro and outro steps, but you can add one to any step.Enable an overlay
Toggle Add overlay in the settings panel for the selected step. When enabled, additional fields appear.Overlay fields
| Field | Description |
|---|---|
| Header | Large title text displayed at the top of the overlay |
| Description | Supporting text below the header |
| Button text | Label for the primary call-to-action button |
| Button color | Background color for the CTA button |
| Text color | Text color for the CTA button label |
Button actions
Each overlay button can navigate to:- Next step — advances to the next non-hidden step (default)
- A specific step — jumps to any step by ID
- External link — opens a URL in a new tab
- Replay — restarts the tour from the beginning
Intro and outro steps
The first and last steps of a tour have overlays enabled by default to create a start screen and end screen. Intro step: Displays a title, description, and a “Start tour” button (or your custom CTA label). The intro overlay also shows a metadata pill with the total step count. Outro step: Displays a title, description, and two buttons by default — a primary CTA (link to an external URL) and a “Replay” button. Customize both button labels and their targets in the settings panel.To remove the intro or outro overlay, toggle off Add overlay in the settings panel for that step.
Preview mode
Use preview mode to experience the tour as a viewer would before publishing. Click Preview in the top bar. The editor canvas switches to the viewer experience — hotspots animate, tooltips appear on hover or click, and navigation arrows let you move between steps. Press Escape or click Exit preview to return to editing.Keyboard shortcuts
| Shortcut | Action |
|---|---|
↑ / ↓ | Move to the previous or next step |
Delete | Delete the selected element |
Related
- Brandkit — set workspace-level colors and fonts that apply to all tours
- Guide Editor — create documentation-style step guides