Explore Live Examples

Learn how each feature works through interactive examples and ready-to-copy code.

Browse Examples Read Docs

Examples Catalog

Jump straight to a live demo.

Article Styling

Customize colors, shapes, borders and interactions.

Open demo

Events & Handlers

Listen to clicks, zoom changes and save state.

Open demo

Lanes

Group events into multiple shared-axis lanes.

Open demo

Time Bands

Layer eras behind the main line and tweak defaults.

Open demo

Performance

Generate large timelines and tune key options.

Open demo

Article Styling

Use style, hoverStyle and activeStyle to craft distinct visuals.

Style, Hover and Active Style Modes

Style any article via timeline‑level defaults or per‑article options. Hover and active styles inherit from the base style, letting you override only what’s needed.

💡

Tip

To clear system defaults for active and/or hover styles after initialization, delete individual properties from the style object or reset all by setting to an empty object, for example:

  • myTimeline.options.article.defaultActiveStyle = {}
  • myTimeline.setOption("article.defaultActiveStyle", myActiveStyle)
/* Select an article in the timeline to see its style here */

Card layouts: Portrait vs Landscape

Toggle the default card layout between landscape and portrait. You can set it at init via options.article.defaultCardLayout or after init with timeline.setOption("article.defaultCardLayout", layout).

Events Explorer

Explore every event and payload. Switch between timeline.on and options.on.

Select an event, register a handler, inspect output

/* Select an event to see the registration snippet here */

Handler output shows summarized payloads for readability. Articles and DOM events are abbreviated (e.g. IDs, titles, coordinates). Use your own handlers to inspect full objects.

Lanes

Split timeline events into named horizontal lanes while keeping a shared bottom axis.

Multi-lane layout, styling and runtime controls

Define explicit lanes with options.lane.data, place events with ArticleData.lane, and update each lane at runtime through the Lane API.

Use the lane DOM hooks, including histropedia-lane-index-N and histropedia-lane-position-*, for stylesheet-only lane backgrounds and stacking effects. For a smaller starting point, open the simple timeline lanes CodePen.

{}

Time Bands

Overlay eras and ranges behind the timeline.

Configurable background ranges

Time Bands supply contextual ranges (eras, offices, programmes) underneath your main events. Use them to highlight background context without occupying article slots.

Change the dataset, tweak the default style, and decide how much vertical space to dedicate below the main line.

{}

Performance

Create large timelines and compare settings that impact speed.

Large Timeline Performance Tuning

💡

Tip

For best performance: lower event density, use stacking range = Screen, and disable animations. Chrome (Windows) and Safari (macOS) typically perform best.