Rail
A horizontal rail of dates over a progress line. One slide at a time, navigated with arrows, clicks or keys.
TypeScript Zero dependencies Accessible Framework-agnostic
Timelines. Made simple.
A lightweight, accessible timeline slider for the modern web. Drop it into any project — no framework required.
One component. Five ways to tell the story.
Same timeline data. Different presentation. Pick the layout that fits your content.
Stack
A vertical timeline with a fixed-height stage. The dates column scrolls beside the active slide — built for tall, narrow layouts.
Tabs
Date pills behave as tabs for quick navigation across points in time, with scroll buttons when the strip overflows.
List
Every entry on screen at once — one row per point in time, with the active row highlighted. Reads as a list, because it is one.
Alternating
The list with a central rail: entries alternate sides of the timeline. Falls back to the plain list on narrow screens.
See them all live in the playground ↓
Why timelinr?
Framework-agnostic
Use it with plain HTML, your existing JavaScript stack, or the framework you already use.
Zero runtime dependencies
One self-registering custom element with a small browser footprint.
Accessible by default
ARIA semantics, keyboard navigation, current-state announcements, and reduced-motion support.
Built for real content
Horizontal and vertical layouts, multiple visual variants, themes, autoplay, and responsive behaviour.
Playground.
Choose a layout or theme. The component below is the same <timelinr-slider> you can install in your own project.
Just HTML.
No framework. No glue code. Describe your timeline in markup and let timelinr handle the interaction — the documentation covers every attribute, variant and theme.
<link rel="stylesheet" href="node_modules/timelinr-ts/dist/timelinr.css" />
<script type="module" src="node_modules/timelinr-ts/dist/timelinr.element.js" />
<timelinr-slider
data-timelinr-variant="rail"
data-timelinr-arrow-keys>
<div data-timelinr-dates>
<ul>
<li><a href="#1900">1900</a></li>
<li><a href="#1930">1930</a></li>
</ul>
</div>
<div data-timelinr-issues>
<ul>
<li>
<img src="1900.jpg" alt="" />
<h3>1900 — A new century</h3>
<p>...</p>
</li>
<li>
<img src="1930.jpg" alt="" />
<h3>1930 — Hard times</h3>
<p>...</p>
</li>
</ul>
</div>
<button type="button" data-timelinr-prev
aria-label="Previous">‹</button>
<button type="button" data-timelinr-next
aria-label="Next">›</button>
</timelinr-slider>