Timeline Editor Usage Tutorial: 12

This tutorial is a practical walkthrough for Timeline Maker users. It focuses on exact button locations and repeatable operations, so your team can quickly onboard and use advanced features correctly.

All screenshots are under /public/blog/usage-tutorial and referenced below in order.

1Create a new timeline

Page: /dashboard/timelines. Location: top-right button labeled Create Timeline.

Operation: Click Create Timeline to enter /editor and start with a blank canvas.

S01 - Dashboard timelines page with Create Timeline button (click to enlarge)

S02 - Editor initial blank canvas after creating a timeline (click to enlarge)

2Change timeline background

Page: /editor/{timelineId}. Location: top bar button labeled Background (near Light and Collaborators).

Operation: Click Background, open Background image dialog, then configure image or background color in Settings and click Confirm.

S03 - Top bar Background button location (click to enlarge)

S04 - Background image dialog with settings and confirm action (click to enlarge)

3Create an Event marker

Page: /editor/{timelineId}. Location: timeline canvas area.

Operation: Click any blank area on canvas, then choose Event in the create menu. The right-side Marker inspector appears.

S05 - Create menu opened from canvas click (click to enlarge)

S06 - Event marker created and inspector visible (click to enlarge)

4Create a Period marker

Location: create menu option Period.

Operation: Click canvas, choose Period, then configure Start and End in Marker inspector.

S07 - Period option in create menu (click to enlarge)

S08 - Period marker start and end fields in inspector (click to enlarge)

5Create a Percentage marker

Location: create menu option Percentage.

Operation: Click canvas, choose Percentage, then use the Percentage slider in the right panel.

S09 - Percentage option in create menu (click to enlarge)

S10 - Percentage slider in inspector (click to enlarge)

6Create a Stats marker

Location: create menu option Stats.

Operation: Click canvas, choose Stats, then add points in Data (+) or switch to Raw mode for text input.

S11 - Stats option in create menu (click to enlarge)

S12 - Stats data editing area in inspector (click to enlarge)

7Use Reporting API (linked stats)

This feature is for users who already have their own website data source and want timeline stats to stay synced with source data changes.

Recommended demo source URL https://pastebin.com/raw/DbQDGunV

Operation: Click canvas -> choose Reporting API -> in right panel click Connect source -> paste URL -> click Connect.

After connected, use Refresh in the right panel whenever your upstream data changes to sync the latest points.

S13 - Reporting API option in create menu (click to enlarge)

S14 - Reporting API section in marker inspector (click to enlarge)

S15 - Reporting API connected state in right panel (click to enlarge)

8Use Grouping

Purpose: combine multiple event markers into one grouped block.

Operation: Prepare at least 2 event markers -> create Grouping marker -> keep Grouping selected -> click events on canvas to add/remove members.

S17 - Grouping option in create menu (click to enlarge)

S18 - Grouping hint in inspector (click to enlarge)

S19 - Grouping visual result on canvas (click to enlarge)

9Use Multi-Stats

Purpose: aggregate multiple Stats/Reporting markers into one combined chart block.

Operation: Prepare at least 2 stats-type markers -> create Multi-Stats -> keep it selected -> click stats markers on canvas to add/remove.

S20 - Multi-Stats option in create menu (click to enlarge)

S21 - Multi-Stats selected list in inspector (click to enlarge)

S22 - Multi-Stats visual result on canvas (click to enlarge)

10Use Collaborators

Location: top bar button Collaborators.

Operation: Save timeline first -> click Collaborators -> Invite Collaborator -> input email and role -> Send Invitation.

Important invited users receive an email notification. During collaboration, participants can also see live edit notifications in the editor.

S23 - Collaborators button in top bar (click to enlarge)

S24 - Collaborators dialog list view (click to enlarge)

S25 - Invite collaborator form with email and role (click to enlarge)

S26 - Invitation success and share link panel (click to enlarge)

S26-2 - Invitee email notification (click to enlarge)

S26-3 - Real-time collaboration notification effect (click to enlarge)

11Use Import Document

Location: top bar button Import Document.

Operation: Upload a supported file -> choose Output language -> click Analyze document -> review parsed events -> click Import N events.

S27 - Import Document button in top bar (click to enlarge)

S28 - Document upload area (click to enlarge)

S29 - AI analyzing document progress (click to enlarge)

S30 - Parsed event list and import confirmation (click to enlarge)

12Use AI Generate

Location: top bar button AI Generate.

Operation: Enter Topic -> choose Output language and Detail level -> click Generate -> events are inserted into timeline.

S31 - AI Generate button in top bar (click to enlarge)

S32 - AI generate dialog with topic and options (click to enlarge)

S33 - Generated timeline result on canvas (click to enlarge)

You can share this article as your internal onboarding SOP. It is designed to map one-to-one with the current editor UI labels.

Timeline Editor Usage Tutorial: 12 Practical Tips with Screenshots