Timelines
The timeline puts things in time: moments and spans in rows, with rows that nest and fold. Drag the background or use the wheel to move, Ctrl and the wheel or a pinch to zoom, from millennia down to milliseconds; the axis always counts in steps that make sense at that scale, including the years before Christ. Items that overlap stack into lanes, and where a row is too busy they gather into clusters you open by zooming in.
Make it editable and your users move items, change their length, drag them to another row, add and delete them — and every change asks the page first, so a rule of yours can refuse it. Times are read and shown in any time zone, daylight saving included. The navigator is a strip of the whole range with a histogram of where the items are and a window you drag.
A product launch
Twelve weeks of work across product and marketing. Drag an item to move it, to another row too; choose it and drag its ends to change its length; double-click empty space to add one. The page holds one rule: nothing in Engineering may end after the code freeze. Try it. The launch-day times are moments, so a change of time zone moves them; the days stay days.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-select id="tl-zone" label="Time zone" value="Europe/London" style="inline-size: 13rem">
<bmx-option value="Europe/London">London</bmx-option>
<bmx-option value="America/New_York">New York</bmx-option>
<bmx-option value="Asia/Tokyo">Tokyo</bmx-option>
</bmx-select>
<bmx-timeline id="tl-plan" editable selectable="multiple" time-zone="Europe/London" label="Product launch plan" locale="en-GB" style="inline-size: 100%; --bmx-timeline-max-height: 26rem"></bmx-timeline>
<bmx-timeline-navigator for="tl-plan" label="The whole plan"></bmx-timeline-navigator>
<script>
const timeline = document.getElementById('tl-plan');
timeline.items = [ /* your items */ ];
</script>
An incident, minute by minute
A bad release and the forty minutes after it: the deploy, the time each service was degraded, the alerts, the pages and the rollback. Click anything for what happened.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-timeline id="tl-incident" show-now="false" time-zone="UTC" label="Incident on 6 October 2026" locale="en-GB" style="inline-size: 100%; --bmx-timeline-max-height: 20rem"></bmx-timeline>
<script>
const timeline = document.getElementById('tl-incident');
timeline.items = [ /* your items */ ];
</script>
Three thousand years
Eras and events from 1200 BC. Zoom from millennia down to single years and the axis follows, counting across the year 1 BC to AD 1 the way historians do.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-timeline id="tl-history" show-now="false" time-zone="UTC" label="Ancient and medieval history" locale="en-GB" style="inline-size: 100%; --bmx-timeline-max-height: 18rem"></bmx-timeline>
<script>
const timeline = document.getElementById('tl-history');
timeline.items = [ /* your items */ ];
</script>
Fifty thousand events
A day of events across five services: fifty thousand items. Rows too busy to stack gather into clusters with a count; click one, or zoom, to open it. The navigator below shows where the day was busiest.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-timeline id="tl-busy" show-now="false" time-zone="UTC" label="Service events" locale="en-GB" style="inline-size: 100%; --bmx-timeline-max-height: 20rem"></bmx-timeline>
<bmx-timeline-navigator for="tl-busy" bins="96" label="The whole day"></bmx-timeline-navigator>
<script>
const timeline = document.getElementById('tl-busy');
timeline.items = [ /* your items */ ];
</script>