Tempis Timeline — Canvas-powered timeline for the web

Home<br>Get Started<br>Examples<br>API<br>Pricing

A simple, flexible<br>timeline for

Lightweight canvas-rendered timelines with smooth interactions, touch support, and no dependencies.

Get Started

GitHub

Built for large datasets

Canvas rendering with virtual scrolling means only visible items are drawn. Load thousands of items and pan through them smoothly.

Animated focus

Smoothly navigate to any item, date, or range with configurable easing and duration. Click the buttons to see it in action.

Script<br>Principal<br>Editing<br>Premiere

Pluggable date adapters

Use the built-in native Date adapter, or bring your own. Luxon, Day.js, date-fns — whatever your stack uses. Full control over formatting and timezone handling.

Fully responsive

The timeline redraws seamlessly as its container resizes. Resize a sidebar, collapse a panel, go fullscreen — it just works.

Perfect for live data

Stream events in real time and the timeline keeps up. New data appears instantly with smooth animated transitions — no flicker, no jank.

Show item dependencies

Define source/target item relationships and the timeline renders connector arrows automatically.

Export to image

One call and you've got a PNG, JPEG, or WebP. Control DPR for crisp retina output.

Download PNG

1,000s<br>Of items with virtual rendering

Runtime dependencies

Minified + gzipped

100%<br>TypeScript

Everything else you'd expect

📱

Touch & gesture support

Pinch-to-zoom, smooth panning, and responsive layouts on every device.

🏷️

Categories & legend

Color-coded categories with an interactive legend. Filter on click, highlight on hover.

React support

Drop-in React component with reactive data, callbacks, and a full imperative ref API.

🔀

RTL support

Full right-to-left layout for Arabic, Hebrew, and other RTL languages.

💬

Custom tooltips

Rich tooltip templates with delay, overflow handling, and per-item control.

📊

Timeline bands

Highlight time periods with vertical bands, maintenance windows, shifts, deadlines.

Accessibility

Keyboard navigation, ARIA attributes, and automatic reduced motion support.

TypeScript-first

Full type definitions, IntelliSense, and typed callbacks out of the box.

📐

Smart stacking

Compact and stable stack modes for overlapping items. No clipping, no manual row management.

Get started in seconds

Core canvas library — works with any framework

$ npm install @tempis/timeline

React wrapper — drop-in component for React apps

$ npm install @tempis/react @tempis/timeline

Or grab the CDN script tag and drop it straight into your HTML.