A fast, zero-dependency, canvas-rendered timeline library.
Handles thousands of items, touch & keyboard input, RTL, image export, and more.
🔷 Virtualised Canvas Rendering – no DOM nodes per item, smooth performance for thousands of items
🔷 Range & Point-in-Time Items – horizontal bars and milestone markers with automatic stacking
🔷 Categories & Interactive Legend – colour-code items, filter on click, highlight on hover
🔷 Collapsible Groups – click headers to collapse swimlanes, programmatic control via API
🔷 Item Dependencies – finish-to-start connector arrows with automatic routing and styling
🔷 Per-Item Styling – override colours, borders, dash patterns, and radius on individual items
🔷 Progress Indicator – show completion as a fill bar inside range items
🔷 Custom Tooltips – rich HTML templates with overflow handling and conditional display
🔷 Selection Modes – none, single, or multi-select with controlled and uncontrolled patterns
🔷 Animated Focus – pan and zoom to any item, date, or range with configurable easing
🔷 Touch & Keyboard – pinch-to-zoom, arrow key navigation, and full accessibility support
🔷 Timeline Bands – highlight time ranges or mark deadlines with background regions and lines
🔷 Minimap – compact overview bar with click/drag navigation for large timelines
🔷 RTL Layout – full right-to-left support for Arabic, Hebrew, and other RTL languages
🔷 Image Export – download as PNG, JPEG, or WebP with DPR and background colour control
🔷 Date Adapters – plug in Luxon, Day.js, or any library for timezone and locale support
🔷 React Wrapper – declarative props, reactive data, imperative ref API, automatic cleanup
🔷 Accessibility – keyboard navigation, ARIA attributes, and automatic reduced motion support
🔷 TypeScript-First – full type definitions, IntelliSense, and typed callbacks out of the box
| Package | Description |
|---|---|
@tempis/timeline |
Core timeline library — canvas rendering, interactions, adapters |
@tempis/react |
React wrapper with declarative props, reactive data, and imperative ref API |
npm install @tempis/timelineimport { TempisTimeline } from '@tempis/timeline';
const timeline = new TempisTimeline('#canvas', {
responsive: true,
items: [
{ id: 1, label: 'Design', start: '2026-01-05', end: '2026-01-15', grouping: 'Frontend' },
{ id: 2, label: 'Build', start: '2026-01-12', end: '2026-01-28', grouping: 'Frontend' },
{ id: 3, label: 'Launch', start: '2026-01-30', grouping: 'Frontend' },
{ id: 4, label: 'API', start: '2026-01-08', end: '2026-01-25', grouping: 'Backend' },
],
range: { start: '2026-01-01', end: '2026-02-01', position: 'bottom' }
});Or via CDN:
<script src="https://unpkg.com/@tempis/timeline/dist/tempis_timeline.min.js"></script>
<script>
new tempis_timeline.TempisTimeline('#canvas', { /* ... */ });
</script>tempis/
├── packages/
│ ├── tempis-timeline/ Core library
│ └── tempis-react/ React wrapper
├── examples/ Interactive HTML demos
├── site/ Documentation site
├── scripts/ Build tooling
├── lib/ Dev build output (gitignored)
└── dist/ Distribution output (gitignored)
npm install
npm run dev # Watch + dev server on :8080
npm run build # Build all packages
npm run build:site # Build the documentation site
npm test # Lint + unit testsThe examples/ directory has 35+ interactive demos covering basic usage, dashboards, dependencies, progress indicators, real-time streaming, custom tooltips, RTL, image export, and more. Run npm run dev and browse them at http://localhost:8080/examples/.
Free for personal projects, education, and evaluation. A paid licence is required for commercial use where revenue is generated. See LICENSE for full terms.
Do you have a question or have you found a bug? Open an issue or start a discussion on the Tempis GitHub repository.