Examples

Applications

Complete, self-contained example apps showing the timeline working as one component inside a larger interface, each with its own layout, controls and surrounding panels.

Project Planner

An editable Gantt planner with a collapsible phase tree and dependency arrows. Add or remove tasks, edit their dates, assignee and dependencies in the drawer, manage coloured schedule bands, and jump between zoom presets.

DependenciesProgress barsGroupingZoom presetsBandsNotesEditable items

Fleet Maintenance Dashboard

A full maintenance-scheduling app. KPI cards, region filters, a detail/edit panel and a right-click menu all wired to the timeline.

SelectionLive updatesContext menuFilteringDetail panel

Live Trading Terminal

A market-monitor app streaming real Binance trades over a WebSocket. A live watchlist sits beside the timeline, which appends ticks and follows the latest price.

Live dataAuto-followStreamingFilteringDetail dialog

Request Log Explorer

An observability tool that fetches request logs on demand as you pan and zoom, with cache stats, an error-rate metric and a live fetch-activity feed.

Lazy loadingPan & zoomGroupingLive metricsCollapsible groups

Dashboard Builder

A drag-and-drop dashboard composer. Drop in a timeline widget, resize it in the grid and repoint it at a different data source from the inspector, all live.

ResponsiveLive updatesDrag & dropResizable

Plant Operations Console

An industrial OEE monitoring console. Availability, MTTR and downtime KPIs sit above the timeline, with a side panel that swaps to full event details on selection.

SelectionGroupingDetail panelRange presetsLive metrics

Features

Table-driven selection

Controlled selection kept in sync both ways between a table and the timeline.

SelectionTwo-way syncControlled state

Context menu

A film production schedule where right-clicking an item opens contextual actions at the pointer.

Context menuSelectionGrouping

Dependencies

An app launch plan with finish-to-start arrows routed across planning, design, build, QA and release.

DependenciesGroupingProgress bars

Minimap

A year-long roadmap with the overview bar enabled for jumping between quarters.

MinimapPan & zoomGrouping

Progress bars

Completion shown as a fill inside each range item, clipped to the item's corner radius.

Progress barsPer-item styling

Custom tooltips

Tooltip content built from your own DOM, with assignee, status and progress.

Custom tooltipsProgress bars

Per-item styling

Borders, dash patterns, colours and radii applied per item to encode status.

Per-item stylingColour palettes

Colour palettes

Categories without an explicit colour draw from the global palette. Swap it at runtime.

Colour palettesLive updates

Bands

Cluster events with maintenance windows and incident periods shaded behind the items.

BandsGrouping

Timezones

A Luxon date adapter registered in place of the native one, with the display zone switchable live.

TimezonesDate adapters

Right to left

An Arabic project schedule with the axis, items, legend and tooltips all mirrored.

RTL layoutGrouping

Image export

Export the current view as PNG, JPEG or WebP, with device pixel ratio and background colour options.

Image exportGrouping