Getting Started

Install the core library and render your first timeline.

Install

$ npm install @tempis/timeline

CDN

<script src="https://unpkg.com/@tempis/timeline/dist/tempis_timeline.min.js"></script>
The CDN build exposes a global tempis_timeline object. Access the constructor via tempis_timeline.TempisTimeline.

Minimal Example

import { TempisTimeline } from '@tempis/timeline';

const timeline = new TempisTimeline('#canvas', {
  responsive: true,
  items: [
    { id: 1, label: 'Item 1',  start: '2026-01-05', end: '2026-01-15', grouping: 'Group 1' },
    { id: 2, label: 'Item 2',   start: '2026-01-12', end: '2026-01-28', grouping: 'Group 1' },
    { id: 3, label: 'Event 1',  start: '2026-01-30', grouping: 'Group 1' },
    { id: 4, label: 'Item 3',     start: '2026-01-08', end: '2026-01-25', grouping: 'Group 2' },
  ],
  range: { start: '2026-01-01', end: '2026-02-01', position: 'bottom' }
});
When using responsive: true, the canvas must be inside a container with explicit dimensions. The timeline resizes to fill its parent — if the parent has no width or height, the canvas will collapse to zero.

Script Tag Usage

<canvas id="my-timeline"></canvas>
<script src="https://unpkg.com/@tempis/timeline/dist/tempis_timeline.min.js"></script>
<script>
  new tempis_timeline.TempisTimeline('#my-timeline', {
    responsive: true,
    items: [
      { id: 1, label: 'Item 1', start: '2026-01-05', end: '2026-01-15' }
    ],
    range: { start: '2026-01-01', end: '2026-02-01', position: 'bottom' }
  });
</script>

What's Next

Now that you have a basic timeline rendering, explore these pages to build on it: