Showcase

Five timelines the way an app would use them, each live. The home page has a sixth, a chronicle restyled entirely from outside, with a story, a camera and an editable history; these are the other shapes a timeline takes. Open The code under any of them to read and edit it.

A product launch of 313 tasks

Live demo: A product launch: 300 tasks, dependencies, the critical path, team load, undo

Loading…

The code

Code — edit it and press Run

import { createTimeline, registerPlugin } from "@temporeum/timeline-element";
import { defaultTaskColumns, ganttPlugin, mountTaskGrid } from "@temporeum/timeline-element/gantt";
import { resourcesPlugin } from "@temporeum/timeline-element/resources";
import { addWorkingMs, scheduleCommand, scheduleTasks } from "@temporeum/timeline-core/schedule";

registerPlugin(ganttPlugin, resourcesPlugin);

const hour = 3_600_000;
const day = 24 * hour;
// Office hours, Monday to Friday: durations and lags below are working time.
const calendar = { timeZone: "UTC" };
const KICKOFF = Date.UTC(2026, 0, 5, 9);
const TODAY = Date.UTC(2026, 2, 16);

// A made-up launch, the same on every load: twelve streams of 25 tasks, a milestone closing each.
function hash(n) {
  let x = Math.imul(n ^ 0x9e3779b9, 0x85ebca6b);
  x ^= x >>> 13;
  return Math.imul(x, 0xc2b2ae35) >>> 0;
}
const STREAMS = [
  ["research", "Research", ["Interviews", "Survey", "Competitor review", "Synthesis", "Personas"]],
  ["design", "Design", ["Wireframes", "Prototype", "Usability test", "Visual design", "Design review"]],
  ["backend", "Backend", ["Schema", "Auth endpoints", "Billing API", "Search index", "Rate limits"]],
  ["frontend", "Frontend", ["Routing", "Onboarding flow", "Settings", "Dashboard", "Empty states"]],
  ["mobile", "Mobile", ["iOS shell", "Android shell", "Offline sync", "Push", "Store assets"]],
  ["data", "Data", ["Event schema", "Pipelines", "Dashboards", "Backfill", "Data checks"]],
  ["infra", "Infrastructure", ["Clusters", "CI pipeline", "Monitoring", "Backups", "Load balancer"]],
  ["security", "Security", ["Threat model", "Pen test", "Secrets", "SSO", "Audit log"]],
  ["qa", "QA", ["Test plan", "Automation", "Regression", "Performance", "Accessibility"]],
  ["docs", "Docs", ["Guides", "API reference", "Tutorials", "Changelog", "Screenshots"]],
  ["marketing", "Marketing", ["Positioning", "Landing page", "Launch video", "Press kit", "Campaign"]],
  ["support", "Support", ["Help centre", "Macros", "Training", "Status page", "On-call"]],
];
const PEOPLE = ["Ada", "Ben", "Chen", "Dana", "Eli", "Fatima", "Goran", "Hana", "Ivo", "Jun"].map((label) => ({ id: label.toLowerCase(), label }));

/** @type {import("@temporeum/timeline-core").Item<any>[]} */
const items = [];
/** @type {import("@temporeum/timeline-core/schedule").Dependency[]} */
const dependencies = [];
STREAMS.forEach(([stream, streamLabel, names], s) => {
 for (let i = 0; i < 25; i += 1) {
 const h = hash(s * 100 + i);
 const id = `${stream}-${String(i + 1)}`;
 items.push({
 id,
 label: `${names[i % names.length]} ${String(Math.floor(i / names.length) + 1)}`,
 laneId: id,
 start: KICKOFF,
 end: addWorkingMs(calendar, KICKOFF, (2 + (h % 7)) * 8 * hour),
 data: { stream: streamLabel, owner: PEOPLE[(s + (h % 3)) % PEOPLE.length].id },
 });
 if (i > 0) {
 // Mostly finish-to-start; now and then a task starts with its predecessor, a day later.
 dependencies.push(h % 5 === 0 ? { from: `${stream}-${String(i)}`, to: id, type: "SS", lagMs: 8 * hour } : { from: `${stream}-${String(i)}`, to: id });
 }
 // Every sixth task waits for the stream before it.
 if (s > 0 && i % 6 === 3) dependencies.push({ from: `${STREAMS[s - 1][0]}-${String(i)}`, to: id });
 }
 items.push({ id: `${stream}-done`, label: `${streamLabel} done`, laneId: `${stream}-done`, start: KICKOFF, kind: "milestone", data: { stream: streamLabel } });
 dependencies.push({ from: `${stream}-25`, to: `${stream}-done` });
 dependencies.push({ from: `${stream}-done`, to: "launch" });
});
items.push({ id: "launch", label: "Launch", laneId: "launch", start: KICKOFF, kind: "milestone", data: { stream: "Launch" } });
const lanes = items.map(({ id, label }) => ({ id, label }));

// The first schedule is the plan: it becomes every task's baseline, and the progress is measured against today.
const plan = scheduleTasks(items, dependencies, { calendar });
const planned = items.map((item) => {
  const task = plan.tasks.get(item.id);
  const placed = { ...item, start: task.start, ...(task.end === undefined ? {} : { end: task.end }) };
  if (item.kind === "milestone") return placed;
  const progress = Math.min(1, Math.max(0, (TODAY - task.start) / (task.end - task.start)));
  return { ...placed, baseline: { start: task.start, end: task.end }, progress: Math.round(progress * 10) / 10 };
});

if (narrow) document.querySelector("#plan").classList.add("narrow");
else {
  const stream = { id: "stream", header: "Stream", width: 100, value: (row) => row.items[0]?.data?.stream ?? "" };
  const [name, start] = defaultTaskColumns({ locale: "en-GB" });
  mountTaskGrid(document.querySelector("#grid"), timeline, { columns: [stream, name, start], ariaLabel: "Launch tasks", focusTarget: element });
}

// The critical path, worked out again after every edit: red bars have no slack.
const status = document.querySelector("#status");
const finish = new Intl.DateTimeFormat("en-GB", { timeZone: "UTC", day: "numeric", month: "short", year: "numeric" });
let critical = new Set();
function markCritical() {
  const result = scheduleTasks(timeline.items, dependencies, { calendar });
  const next = new Set(result.critical);
  const changed = timeline.items.filter((item) => next.has(item.id) !== critical.has(item.id));
  critical = next;
  if (changed.length > 0) timeline.updateItems(changed.map((item) => ({ id: item.id, className: critical.has(item.id) ? "critical" : undefined })));
  const late = timeline.items.filter((item) => item.kind !== "milestone" && result.tasks.get(item.id)?.moved).length;
  status.dataset.tasks = String(timeline.items.length);
  status.textContent = `${String(timeline.items.length)} tasks · launch ${finish.format(result.finish)} · ${String(critical.size)} critical${late > 0 ? ` · ${String(late)} out of order` : ""}`;
  return result;
}

// Undo and redo: every edit, and every reschedule, is one command with an exact inverse.
const undo = [];
const redo = [];
const buttons = { undo: document.querySelector("#undo"), redo: document.querySelector("#redo") };
function refresh() {
  buttons.undo.disabled = undo.length === 0;
  buttons.redo.disabled = redo.length === 0;
  markCritical();
}
timeline.on("command", ({ command }) => {
  undo.push(command);
  redo.length = 0;
  refresh();
});
function step(from, to, apply) {
  const command = from.pop();
  if (command === undefined) return;
  timeline.applyCommand(apply(command));
  to.push(command);
  refresh();
}
buttons.undo.addEventListener("click", () => step(undo, redo, (command) => command.inverse));
buttons.redo.addEventListener("click", () => step(redo, undo, (command) => command));
addEventListener("keydown", (event) => {
  if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "z") return;
  event.preventDefault();
  if (event.shiftKey) step(redo, undo, (command) => command);
  else step(undo, redo, (command) => command.inverse);
});

// The scheduler computes; one command applies it, and Undo takes it back.
document.querySelector("#schedule").addEventListener("click", () => {
  const command = scheduleCommand(timeline.items, scheduleTasks(timeline.items, dependencies, { calendar }), "Reschedule");
  if (command === undefined) return;
  timeline.applyCommand(command);
  undo.push(command);
  redo.length = 0;
  refresh();
});

// The same tasks by owner: the resource view, drawn on demand.
const team = document.querySelector("#team");
const load = document.querySelector("#load");
let loadView;
const byOwner = () => timeline.items.filter((item) => item.kind !== "milestone").map((item) => ({ ...item, laneId: item.data.owner, className: undefined }));
team.addEventListener("click", () => {
  const show = team.getAttribute("aria-pressed") !== "true";
  team.setAttribute("aria-pressed", String(show));
  load.hidden = !show;
  if (show && loadView === undefined) {
    loadView = createTimeline(load, { items: byOwner(), resources: PEOPLE, orientation: "horizontal", density: "compact", ariaLabel: "Team load", locale: "en-GB", domain: timeline.getSnapshot().domain });
  } else if (show) loadView.setItems(byOwner());
});
timeline.on("itemsChanged", () => {
  if (loadView !== undefined && !load.hidden) loadView.setItems(byOwner());
});

refresh();
// Open on the critical path: once the first layout is there, the first red bar's row comes into view.
const first = plan.critical.find((id) => !id.endsWith("-done"));
const stop = timeline.on("layoutChanged", () => {
  stop();
  if (first === undefined) return;
  // From the bottom, revealing a row scrolls up just far enough: the row lands at the top.
  timeline.scrollLanes(Number.MAX_SAFE_INTEGER);
  timeline.revealLane(first);
  timeline.scrollTo(plan.tasks.get(first).start + 30 * day);
});

Run “A product launch: 300 tasks, dependencies, the critical path, team load, undo” on your own machine

Make an empty folder and put this example’s two files in it:

index.html — the page the code runs in, its markup and styles:

<style>
  .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid #d5d9de; }
  .bar button { padding: 3px 10px; border: 1px solid #8a939d; border-radius: 4px; background: #fff; }
  .bar button[aria-pressed="true"] { background: #1b1f24; color: #fff; }
  .bar button:disabled { opacity: 0.45; }
  .bar output { margin-left: auto; font-size: 12px; color: #444c55; }
  .plan { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: 470px; }
  .plan.narrow { grid-template-columns: minmax(0, 1fr); }
  #timeline { height: 470px; }
  #load { height: 230px; border-top: 1px solid #d5d9de; }
  /* The whole explanation, never a box that scrolls: a scrolling region would need a keyboard stop of its own. */
  #log { max-height: none; }
  #timeline .critical { --tl-item-fill: #f4a097; --tl-item-stroke: #b3261e; stroke-width: 1.5px; }
</style>
<div class="bar">
  <button type="button" id="schedule">Reschedule</button>
  <button type="button" id="undo" disabled>Undo</button>
  <button type="button" id="redo" disabled>Redo</button>
  <button type="button" id="team" aria-pressed="false" aria-controls="load">Team load</button>
  <output id="status" aria-live="polite"></output>
</div>
<div class="plan" id="plan">
  <div id="grid"></div>
  <div id="timeline"></div>
</div>
<div id="load" hidden></div>
<p class="log" id="log">Drag a task later, or focus one and press Alt + →. The bars outlined in red are the critical path: a day lost there is a day lost at launch. Reschedule pushes the successors back in order; Ctrl + Z undoes.</p>

main.js — the code, as it is in the editor now, your edits included:

In a terminal in that folder, install the library and Vite (it lets the browser follow the imports), then start it:

npm init -y
npm install @temporeum/timeline-element @temporeum/timeline-core
npm install --save-dev vite
npx vite

Open the address it prints, http://localhost:5173/.

A product launch of 313 tasks in twelve streams, drawn as a Gantt chart: dependencies, baselines, progress and milestones from the Gantt plugin, the critical path and the reschedule from the scheduler, the team's load from the resource view. Every edit is a command, so Undo is exact. On a phone it turns vertical.

A chronology across five thousand years

Live demo: Five thousand years down to the minute: one chronology, one zoom

Loading…

The code

Code — edit it and press Run

import { defaultTickLabel } from "@temporeum/timeline-core";
import { createTimeline, registerPlugin } from "@temporeum/timeline-element";
import { toolsPlugin } from "@temporeum/timeline-element/tools";

// The lanes' names, held at the start of the view, are one of the time tools.
registerPlugin(toolsPlugin);

// Date.UTC reads years 0–99 as 1900–1999; set the year explicitly instead.
function year(y) {
  const date = new Date(0);
  date.setUTCFullYear(y, 0, 1);
  return date.getTime();
}
// Known to the year (most dates before 1500 are approximate or traditional): an instant covers its year.
/** @returns {import("@temporeum/timeline-core").Item} */
const known = (id, label, laneId, from, to) => ({
  id,
  label,
  laneId,
  start: year(from),
  ...(to === undefined ? {} : { end: year(to) }),
  granularity: "year",
});
// Known to the minute, in UTC.
/** @returns {import("@temporeum/timeline-core").Item} */
const minute = (id, label, iso, endIso) => ({
  id,
  label,
  laneId: "space",
  start: Date.parse(iso),
  ...(endIso === undefined ? {} : { end: Date.parse(endIso) }),
  granularity: "minute",
});

const items = [
  known("egypt-unified", "Egypt unified", "neareast", -3100),
  known("old-kingdom", "Old Kingdom", "neareast", -2686, -2181),
  known("pyramid", "Great Pyramid of Giza", "neareast", -2560),
  known("middle-kingdom", "Middle Kingdom", "neareast", -2055, -1650),
  known("hammurabi", "Code of Hammurabi", "neareast", -1754),
  known("new-kingdom", "New Kingdom", "neareast", -1550, -1069),
  known("ramesses", "Ramesses II", "neareast", -1279, -1213),
  known("babylon", "Cyrus takes Babylon", "neareast", -539),
  known("olympics", "First Olympic Games", "med", -776),
  known("rome", "Rome founded", "med", -753),
  known("republic", "Roman Republic", "med", -509, -27),
  known("athens", "Classical Athens", "med", -480, -323),
  known("alexander", "Alexander the Great", "med", -336, -323),
  known("caesar", "Caesar assassinated", "med", -44),
  known("empire", "Roman Empire in the west", "med", -27, 476),
  known("pompeii", "Vesuvius buries Pompeii", "med", 79),
  known("constantinople", "Constantinople founded", "med", 330),
  known("byzantium", "Byzantine Empire", "med", 476, 1453),
  known("fall", "Fall of Constantinople", "med", 1453),
  known("shang", "Shang dynasty", "asia", -1600, -1046),
  known("confucius", "Confucius born", "asia", -551),
  known("qin", "Qin unifies China", "asia", -221),
  known("han", "Han dynasty", "asia", -202, 220),
  known("tang", "Tang dynasty", "asia", 618, 907),
  known("genghis", "Genghis Khan proclaimed", "asia", 1206),
  known("ming", "Ming dynasty", "asia", 1368, 1644),
  known("edo", "Edo period", "asia", 1603, 1868),
  known("meiji", "Meiji Restoration", "asia", 1868),
  known("olmec", "Olmec civilisation", "americas", -1200, -400),
  known("maya", "Classic Maya", "americas", 250, 900),
  known("tenochtitlan", "Tenochtitlan founded", "americas", 1325),
  known("inca", "Inca Empire", "americas", 1438, 1533),
  known("columbus", "Columbus reaches the Caribbean", "americas", 1492),
  known("independence", "US Declaration of Independence", "americas", 1776),
  known("charlemagne", "Charlemagne crowned", "europe", 800),
  known("hastings", "Battle of Hastings", "europe", 1066),
  known("magna-carta", "Magna Carta", "europe", 1215),
  known("black-death", "Black Death", "europe", 1347, 1351),
  known("press", "Printing press in Mainz", "europe", 1450),
  known("theses", "Luther's 95 theses", "europe", 1517),
  known("revolution", "French Revolution", "europe", 1789, 1799),
  known("wwi", "First World War", "europe", 1914, 1918),
  known("wwii", "Second World War", "europe", 1939, 1945),
  known("wall", "Berlin Wall falls", "europe", 1989),
  known("euclid", "Euclid's Elements", "science", -300),
  known("copernicus", "Copernicus: the Sun at the centre", "science", 1543),
  known("principia", "Newton's Principia", "science", 1687),
  known("origin", "On the Origin of Species", "science", 1859),
  known("relativity", "Special relativity", "science", 1905),
  known("dna", "DNA double helix", "science", 1953),
  known("sputnik", "Sputnik 1", "science", 1957),
  known("hubble", "Hubble launched", "science", 1990),
  known("web", "The World Wide Web", "science", 1991),
  minute("apollo", "Apollo 11", "1969-07-16T13:32Z", "1969-07-24T16:50Z"),
  minute("launch", "Launch from Florida", "1969-07-16T13:32Z"),
  minute("orbit", "Into lunar orbit", "1969-07-19T17:21Z"),
  minute("landing", "Eagle lands", "1969-07-20T20:17Z"),
  minute("step", "First step", "1969-07-21T02:56Z"),
  minute("eva", "Moonwalk", "1969-07-21T02:39Z", "1969-07-21T05:11Z"),
  minute("ascent", "Lift-off from the Moon", "1969-07-21T17:54Z"),
  minute("splashdown", "Splashdown", "1969-07-24T16:50Z"),
];

// The axis in BC and AD for years; the engine's own labels for months, days and hours.
const YEARS = new Set(["year", "decade", "century", "millennium"]);
function formatTick(tick, timeZone) {
 if (!YEARS.has(tick.granularity)) return defaultTickLabel(tick, timeZone);
 // A year label is the whole date: no context label at the start of the axis.
 if (tick.context) return "";
 const y = new Date(tick.time).getUTCFullYear();
 return y <= 0 ? `${String(1 - y)} BC` : `AD ${String(y)}`;
}

/** @type {Record<string, [number, number]>} */
const views = {
 all: [year(-3300), year(2050)],
 antiquity: [year(-900), year(600)],
 modern: [year(1440), year(2010)],
 apollo: [Date.parse("1969-07-15T12:00Z"), Date.parse("1969-07-25T12:00Z")],
 landing: [Date.parse("1969-07-20T18:00Z"), Date.parse("1969-07-21T06:00Z")],
};

const timeline = createTimeline(document.querySelector("#timeline"), {
  items,
  lanes: [
    { id: "neareast", label: "Egypt and the Near East" },
    { id: "med", label: "Mediterranean" },
    { id: "asia", label: "East Asia" },
    { id: "americas", label: "The Americas" },
    { id: "europe", label: "Europe" },
    { id: "science", label: "Science" },
    { id: "space", label: "Apollo 11" },
  ],
  ariaLabel: "Five thousand years of history",
  density: "comfortable",
  laneHeaders: true,
  locale: "en-GB",
  formatTick,
  domain: views.antiquity,
  // From the whole span down to a few minutes: one zoom, no second view.
  limits: { min: year(-3500), max: year(2100), minSpanMs: 10 * 60_000 },
  // Dense spans (the eight days of Apollo 11, seen from a millennium) become one marker with a count.
  cluster: true,
  decorations: [
    { kind: "era", id: "bronze", start: year(-3300), end: year(-1200), label: "Bronze Age" },
    { kind: "era", id: "antiquity", start: year(-1200), end: year(476), label: "Iron Age and antiquity" },
    { kind: "era", id: "middle-ages", start: year(476), end: year(1492), label: "Middle Ages" },
    { kind: "era", id: "modern", start: year(1492), end: year(2100), label: "Modern era" },
  ],
});

Run “Five thousand years down to the minute: one chronology, one zoom” on your own machine

Make an empty folder and put this example’s two files in it:

index.html — the page the code runs in, its markup and styles:

<style>
  .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid #d5d9de; }
  .bar button { padding: 3px 10px; border: 1px solid #8a939d; border-radius: 4px; background: #fff; }
  .bar button[aria-pressed="true"] { background: #1b1f24; color: #fff; }
  #timeline { height: 470px; }
</style>
<div class="bar" role="group" aria-label="Zoom to">
  <button type="button" data-zoom="all" aria-pressed="false">5 000 years</button>
  <button type="button" data-zoom="antiquity" aria-pressed="true">Antiquity</button>
  <button type="button" data-zoom="modern" aria-pressed="false">Since 1450</button>
  <button type="button" data-zoom="apollo" aria-pressed="false">Apollo 11, 8 days</button>
  <button type="button" data-zoom="landing" aria-pressed="false">The landing, 12 hours</button>
</div>
<div id="timeline"></div>
<p class="log" id="log" aria-live="polite">One timeline from the first pharaohs to the Moon: zoom with ctrl + wheel, a pinch or + and -, or jump with the buttons. The axis changes from millennia to minutes on the way.</p>

main.js — the code, as it is in the editor now, your edits included:

In a terminal in that folder, install the library and Vite (it lets the browser follow the imports), then start it:

npm init -y
npm install @temporeum/timeline-element @temporeum/timeline-core
npm install --save-dev vite
npx vite

Open the address it prints, http://localhost:5173/.

One timeline from the unification of Egypt to the Moon landing, zoomable from five millennia down to the minutes of Apollo 11. The axis switches from millennia to minutes on the way, in BC and AD through formatTick; eras are decorations, and the eight days of Apollo 11 become one marker with a count while you look at the whole span (clustering). The dates before 1500 are approximate or traditional.

A live log of 100 000 entries

Live demo: A live log: a new entry every second, and a day of 100 000 loaded by window

Loading…

The code

Code — edit it and press Run

import { createTimeline } from "@temporeum/timeline-element";

const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;
const SERVICES = ["api", "auth", "billing", "search", "worker"];
const MESSAGES = {
  info: ["request served", "cache warmed", "job finished", "user signed in", "index refreshed"],
  warn: ["slow query", "retrying upstream", "queue backing up", "token near expiry"],
  error: ["upstream timeout", "payment declined", "worker crashed", "disk almost full"],
};

// A stand-in for your log server: 100 000 entries over the last day, in time order, and more arriving.
const now = Date.now();
const store = [];
for (let i = 0; i < 100_000; i += 1) {
 const t = i / 100_000;
 // Busier in the afternoon, as logs are; monotonic, so the store stays sorted.
 store.push(entry(Math.round(now - 24 * HOUR + (t - 0.05 * Math.sin(t * 2 * Math.PI)) * 24 * HOUR)));
}
const firstAt = (time) => {
 let lo = 0;
 let hi = store.length;
 while (lo < hi) {
 const mid = (lo + hi) >> 1;
 if (store[mid].start < time) lo = mid + 1;
 else hi = mid;
 }
 return lo;
};

const shown = new Set(["error", "warn", "info"]);
const keep = (item) => shown.has(item.data.level);
// Live: the last hour, held by the page — new entries go in with addItems, nothing reloads.
const lastHour = () => store.slice(firstAt(Date.now() - HOUR)).filter(keep);
// The whole day: a fetched source. The timeline asks for the windows it shows and aborts the ones it leaves.
let requests = 0;
const fromServer = ([from, to], signal) =>
  new Promise((resolve, reject) => {
    requests += 1;
    const timer = setTimeout(() => resolve(store.slice(firstAt(from), firstAt(to)).filter(keep)), 80);
    signal.addEventListener("abort", () => {
      clearTimeout(timer);
      reject(signal.reason);
    });
  });

const timeline = createTimeline(document.querySelector("#timeline"), {
  items: lastHour(),
  lanes: SERVICES.map((id) => ({ id, label: id })),
  ariaLabel: "Service log",
  locale: "en-GB",
  domain: [now - 3 * MINUTE, now + 20 * SECOND],
  // A log is read, not edited; keep the zoom between ten seconds and two days.
  limits: { minSpanMs: 10 * SECOND, maxSpanMs: 48 * HOUR },
  // Entries too close to tell apart become one marker with their count.
  cluster: true,
});

// Follow: the view keeps its span and slides with the clock; a pan or a zoom by hand stops it.
const follow = document.querySelector("#follow");
follow.addEventListener("click", () => {
  following = !following;
  follow.setAttribute("aria-pressed", String(following));
});
timeline.on("viewportChanged", ({ reason }) => {
  if ((reason === "pan" || reason === "zoom") && following) {
    following = false;
    follow.setAttribute("aria-pressed", "false");
  }
});

// About one new entry a second.
setInterval(() => {
  const fresh = entry(Date.now());
  store.push(fresh);
  if (mode === "live") {
    if (keep(fresh)) timeline.addItems([fresh]);
    if (following) {
      const [from, to] = timeline.getSnapshot().domain;
      timeline.zoomTo([fresh.start - (to - from) * 0.9, fresh.start + (to - from) * 0.1]);
    }
  }
  counted();
}, SECOND);
counted();

Run “A live log: a new entry every second, and a day of 100 000 loaded by window” on your own machine

Make an empty folder and put this example’s two files in it:

index.html — the page the code runs in, its markup and styles:

<style>
  .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid #d5d9de; }
  .bar button { padding: 3px 10px; border: 1px solid #8a939d; border-radius: 4px; background: #fff; }
  .bar button[aria-pressed="true"] { background: #1b1f24; color: #fff; }
  .bar output { margin-left: auto; font-size: 12px; color: #444c55; }
  #timeline { height: 400px; }
  #timeline .level-error { --tl-item-fill: #f2b8b5; --tl-item-stroke: #b3261e; }
  #timeline .level-warn { --tl-item-fill: #f9dfa0; --tl-item-stroke: #8a5a00; }
  #timeline .level-info { --tl-item-fill: #c6dbf7; --tl-item-stroke: #2a5ca8; }
</style>
<div class="bar">
  <button type="button" data-level="error" aria-pressed="true">Errors</button>
  <button type="button" data-level="warn" aria-pressed="true">Warnings</button>
  <button type="button" data-level="info" aria-pressed="true">Info</button>
  <span role="group" aria-label="What to show">
    <button type="button" data-mode="live" aria-pressed="true">Live: the last hour</button>
    <button type="button" data-mode="day" aria-pressed="false">The whole day</button>
  </span>
  <button type="button" id="follow" aria-pressed="true">Follow</button>
  <output id="count" aria-live="off"></output>
</div>
<div id="timeline"></div>
<p class="log" id="log" aria-live="polite"></p>

main.js — the code, as it is in the editor now, your edits included:

In a terminal in that folder, install the library and Vite (it lets the browser follow the imports), then start it:
```
npm init -y
npm install @temporeum/timeline-element
npm install --save-dev vite
npx vite
```
Open the address it prints, http://localhost:5173/.

A day of a made-up service's log: 100 000 entries in five lanes, and a new one about every second through addItems — no reload, and the layout repacks only the lane an entry lands in (async and live data). Zoom out to the whole day: entries too close to tell apart cluster. The levels are filtered by the page, which hands the timeline what to draw.

An editable roadmap, by keyboard

Live demo: An editable roadmap, on a phone too, and every edit by keyboard

Loading…

The code

Code — edit it and press Run

import { createTimeline, registerPlugin } from "@temporeum/timeline-element";
import { toolsPlugin } from "@temporeum/timeline-element/tools";

// The teams' names, held at the start of the view, are one of the time tools.
registerPlugin(toolsPlugin);

const day = 86_400_000;
const week = 7 * day;
const quarter = (y, q) => Date.UTC(y, (q - 1) * 3, 1);
const TODAY = Date.UTC(2026, 4, 18);

// A made-up product's year: what shipped, what is in flight, what is planned.
/** @type {[string, string, string, [number, number], number, string][]} */
const plan = [
  ["sso", "Single sign-on", "platform", [2026, 1], 9, "done"],
  ["audit", "Audit log", "platform", [2026, 2], 10, "now"],
  ["regions", "EU data region", "platform", [2026, 3], 14, "later"],
  ["billing", "Usage-based billing", "platform", [2026, 4], 11, "later"],
  ["onboarding", "New onboarding", "product", [2026, 1], 6, "done"],
  ["search", "Search everywhere", "product", [2026, 2], 8, "now"],
  ["offline", "Offline mode", "product", [2026, 3], 13, "later"],
  ["templates", "Templates gallery", "product", [2026, 4], 7, "later"],
  ["ios", "iOS app", "mobile", [2026, 1], 12, "done"],
  ["android", "Android app", "mobile", [2026, 2], 12, "now"],
  ["widgets", "Home-screen widgets", "mobile", [2026, 4], 6, "later"],
  ["partners", "Partner API", "growth", [2026, 2], 9, "now"],
  ["pricing", "New pricing page", "growth", [2026, 3], 4, "later"],
  ["referrals", "Referrals", "growth", [2026, 3], 8, "later"],
  ["conference", "User conference", "growth", [2026, 4], 1, "later"],
];
const items = plan.map(([id, label, laneId, [y, q], weeks, status]) => ({
  id,
  label,
  laneId,
  start: quarter(y, q) + week,
  end: quarter(y, q) + week + weeks * week,
  className: `status-${status}`,
}));

/** @type {import("@temporeum/timeline-core").Decoration[]} */
const decorations = [{ kind: "now", time: TODAY, label: "Today" }];
for (let q = 1; q <= 4; q += 1) decorations.push({ kind: "era", id: `q${String(q)}`, start: quarter(2026, q), end: q === 4 ? quarter(2027, 1) : quarter(2026, q + 1), label: `Q${String(q)}` });

// On a phone the tour goes under the roadmap, and the container's width turns the roadmap vertical.
const narrow = matchMedia("(max-width: 640px)").matches;
if (narrow) document.querySelector("#wrap").classList.add("narrow");

// The tour: each step is ticked by what the timeline reports, not by which key was pressed.
const said = document.querySelector("#said");
function done(step, message) {
  const li = document.querySelector(`[data-step="${step}"]`);
  if (li.hasAttribute("data-done")) return;
  li.setAttribute("data-done", "");
  said.textContent = message;
}
element.addEventListener("focusin", () => done("focus", "The roadmap has focus: a screen reader hears its name and how many items it holds."));
const walked = new Set();
timeline.subscribe(() => {
  const id = timeline.getSnapshot().focusedId;
  if (id === null) return;
  walked.add(id);
  if (walked.size >= 3) done("walk", "Every item is reachable by key, in time order and across the rows.");
});

Run “An editable roadmap, on a phone too, and every edit by keyboard” on your own machine

Make an empty folder and put this example’s two files in it:

index.html — the page the code runs in, its markup and styles:

<style>
  .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; height: 420px; }
  .wrap.narrow { grid-template-columns: minmax(0, 1fr); grid-template-rows: 300px auto; height: auto; }
  #timeline { height: 100%; min-height: 300px; }
  .tour { border-left: 1px solid #d5d9de; padding: 8px 12px; overflow: auto; font-size: 13px; }
  .narrow .tour { border-left: 0; border-top: 1px solid #d5d9de; }
  .tour h2 { font-size: 14px; margin: 0 0 6px; }
  .tour ol { margin: 0; padding-left: 1.3em; }
  .tour li { margin: 0 0 6px; }
  .tour li[data-done]::marker { content: "✓ "; color: #1a7f37; }
  .tour li[data-done] { color: #1a7f37; }
  kbd { border: 1px solid #8a939d; border-radius: 3px; padding: 0 3px; font: 12px ui-monospace, Menlo, monospace; }
  #timeline .status-done { --tl-item-fill: #c8e6c9; }
  #timeline .status-now { --tl-item-fill: #c6dbf7; }
  #timeline .status-later { --tl-item-fill: #e4e7eb; }
</style>
<div class="wrap" id="wrap">
  <div id="timeline"></div>
  <section class="tour" aria-labelledby="tour-title">
    <h2 id="tour-title">Keyboard only — try it</h2>
    <ol id="steps">
      <li data-step="focus">Press <kbd>Tab</kbd> until the roadmap has focus.</li>
      <li data-step="walk">Walk the items with <kbd>←</kbd> <kbd>→</kbd> and <kbd>↑</kbd> <kbd>↓</kbd>.</li>
      <li data-step="move">Move one a week later with <kbd>Alt</kbd> + <kbd>→</kbd>.</li>
      <li data-step="lane">Move it to another team with <kbd>Alt</kbd> + <kbd>↓</kbd>.</li>
      <li data-step="resize">Make it longer with <kbd>Shift</kbd> + <kbd>→</kbd>.</li>
      <li data-step="undo">Take it all back with <kbd>u</kbd>, one step at a time.</li>
    </ol>
    <p id="said" aria-live="polite"></p>
  </section>
</div>

main.js — the code, as it is in the editor now, your edits included:

In a terminal in that folder, install the library and Vite (it lets the browser follow the imports), then start it:
```
npm init -y
npm install @temporeum/timeline-element
npm install --save-dev vite
npx vite
```
Open the address it prints, http://localhost:5173/.

A product's year in four teams. Drag a bar to move it, across teams too, or drag its end; the tour beside it does the same with keys only, and ticks each step off by what the timeline reports. Every edit is one command whose inverse is the undo (editing, accessibility). On a phone the roadmap turns vertical and the tour goes under it (responsive).

A story, slide by slide

Live demo: A story told slide by slide: the race to the Moon, from TimelineJS's JSON

Loading…

The code

Code — edit it and press Run

import { createTimeline, registerPlugin } from "@temporeum/timeline-element";
import { toolsPlugin } from "@temporeum/timeline-element/tools";
import { mountStory } from "@temporeum/timeline-element/story";
import { fromTimelineJS } from "@temporeum/timeline-core/story";

// The lanes' names, held at the start of the view, are one of the time tools.
registerPlugin(toolsPlugin);

// An illustration of the page's own, so the story needs no image host: an orbit, and the name under it.
function picture(name, hue) {
 const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180"><rect width="320" height="180" fill="hsl(${String(hue)} 45% 18%)"/><circle cx="160" cy="84" r="34" fill="hsl(${String(hue)} 55% 62%)"/><ellipse cx="160" cy="84" rx="92" ry="26" fill="none" stroke="#fff" stroke-opacity=".55" stroke-width="2"/><circle cx="246" cy="74" r="6" fill="#fff"/><text x="160" y="156" fill="#fff" font-family="system-ui,sans-serif" font-size="18" text-anchor="middle">${name}</text></svg>`;
 return { url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`, alt: `Illustration: ${name}` };
}
const on = (year, month, day, hour, minute) => ({ year, month, day, ...(hour === undefined ? {} : { hour, minute }) });

// TimelineJS's own format, as its Google Sheets template publishes it: the same JSON would load in TimelineJS.
const json = {
 title: {
 text: { headline: "The race to the Moon", text: "From the first satellite to the last Apollo crew, 1957–1975: nineteen moments of a race between two countries." },
 media: { ...picture("1957 – 1975", 225), caption: "Illustrations drawn by the page." },
 },
 eras: [
 { start_date: { year: 1961 }, end_date: { year: 1963 }, text: { headline: "Vostok & Mercury" } },
 { start_date: { year: 1964 }, end_date: { year: 1966 }, text: { headline: "Voskhod & Gemini" } },
 { start_date: { year: 1967 }, end_date: { year: 1972 }, text: { headline: "Apollo" } },
 ],
 events: [
 { start_date: on(1957, 10, 4), group: "Soviet Union", unique_id: "sputnik", text: { headline: "Sputnik 1", text: "The first artificial satellite: a polished sphere with four antennas, whose beep anyone with a radio could hear." }, media: picture("Sputnik 1", 0) },
 { start_date: on(1957, 11, 3), group: "Soviet Union", text: { headline: "Sputnik 2 carries Laika", text: "The first animal in orbit. She did not survive the flight." } },
 { start_date: on(1958, 1, 31), group: "United States", unique_id: "explorer", text: { headline: "Explorer 1", text: "The first American satellite finds the radiation belts named after James Van Allen." }, media: picture("Explorer 1", 210) },
 { start_date: on(1958, 10, 1), group: "United States", text: { headline: "NASA opens", text: "A civilian agency takes over the country's space programme." } },
 { start_date: on(1961, 4, 12, 6, 7), group: "Soviet Union", unique_id: "gagarin", text: { headline: "Yuri Gagarin, Vostok 1", text: "The first person in space: one orbit, 108 minutes from launch to landing." }, media: picture("Vostok 1", 10) },
 { start_date: on(1961, 5, 5), group: "United States", text: { headline: "Alan Shepard, Freedom 7", text: "The first American in space, on a fifteen-minute flight up and down." } },
 { start_date: on(1961, 5, 25), group: "United States", unique_id: "kennedy", text: { headline: "“Before this decade is out”", text: "President Kennedy asks Congress to land a man on the Moon and return him safely to the Earth." } },
 { start_date: on(1962, 2, 20), group: "United States", text: { headline: "John Glenn orbits the Earth", text: "Three orbits in Friendship 7." } },
 { start_date: on(1963, 6, 16), group: "Soviet Union", unique_id: "tereshkova", text: { headline: "Valentina Tereshkova, Vostok 6", text: "The first woman in space: three days and 48 orbits." }, media: picture("Vostok 6", 330) },
 { start_date: on(1965, 3, 18), group: "Soviet Union", text: { headline: "Alexei Leonov walks in space", text: "Twelve minutes outside Voskhod 2; his suit swelled so much he barely got back in." } },
 { start_date: on(1966, 2, 3), group: "Soviet Union", text: { headline: "Luna 9 lands softly", text: "The first spacecraft to land on the Moon intact, and the first pictures from its surface." } },
 { start_date: on(1967, 1, 27), group: "United States", text: { headline: "The Apollo 1 fire", text: "Gus Grissom, Ed White and Roger Chaffee die in a fire during a test on the pad. The spacecraft is redesigned." } },
 { start_date: on(1968, 12, 21), end_date: on(1968, 12, 27), group: "United States", unique_id: "apollo-8", text: { headline: "Apollo 8 orbits the Moon", text: "The first people to leave the Earth's orbit; on Christmas Eve they photograph the Earth rising over the Moon." }, media: picture("Apollo 8", 200) },
 { start_date: on(1969, 7, 16), end_date: on(1969, 7, 24), group: "United States", unique_id: "apollo-11", text: { headline: "Apollo 11", text: "Neil Armstrong, Buzz Aldrin and Michael Collins: eight days, from the launch in Florida to the splashdown in the Pacific." }, media: { url: "https://en.wikipedia.org/wiki/Apollo_11", title: "Apollo 11 on Wikipedia" } },
 { start_date: on(1969, 7, 20, 20, 17), group: "United States", unique_id: "eagle", text: { headline: "The Eagle has landed", text: "The lunar module touches down in the Sea of Tranquillity, with seconds of fuel to spare. Zoom in: the timeline knows the minute." }, media: picture("Tranquillity Base", 45) },
 { start_date: on(1970, 4, 11), end_date: on(1970, 4, 17), group: "United States", text: { headline: "Apollo 13", text: "An oxygen tank bursts on the way out; the crew loops around the Moon and comes home in the lunar module." } },
 { start_date: on(1971, 4, 19), group: "Soviet Union", text: { headline: "Salyut 1", text: "The first space station." } },
 { start_date: on(1972, 12, 7), end_date: on(1972, 12, 19), group: "United States", unique_id: "apollo-17", text: { headline: "Apollo 17, the last landing", text: "Gene Cernan is, so far, the last person to have walked on the Moon." }, media: picture("Apollo 17", 30) },
 { start_date: on(1975, 7, 17), group: "Together", unique_id: "apollo-soyuz", text: { headline: "Apollo and Soyuz dock", text: "A handshake in orbit ends the race." }, media: picture("Apollo–Soyuz", 160) },
 ],
};

const story = fromTimelineJS(json);
const timeline = createTimeline(document.querySelector("#timeline"), {
  items: story.items,
  lanes: story.lanes,
  decorations: story.decorations,
  density: "compact",
  // Under a story the timeline stays a strip across, on a phone too.
  orientation: "horizontal",
  laneHeaders: true,
  locale: "en-GB",
  ariaLabel: "The race to the Moon, 1957–1975",
  domain: [Date.UTC(1956, 6, 1), Date.UTC(1976, 6, 1)],
});

Run “A story told slide by slide: the race to the Moon, from TimelineJS's JSON” on your own machine

Make an empty folder and put this example’s two files in it:

index.html — the page the code runs in, its markup and styles:

<style>
  .stage { display: grid; grid-template-rows: 390px 214px; height: 618px; }
  #story { min-height: 0; }
  #timeline { height: 100%; border-top: 1px solid #d5d9de; }
  @media (max-width: 640px) {
    .stage { grid-template-rows: 430px 174px; }
  }
</style>
<div class="stage">
  <div id="story"></div>
  <div id="timeline"></div>
</div>
<p class="log" id="status" aria-live="polite">Page with Previous and Next, ← and →, or pick an event on the timeline.</p>

main.js — the code, as it is in the editor now, your edits included:

In a terminal in that folder, install the library and Vite (it lets the browser follow the imports), then start it:

npm init -y
npm install @temporeum/timeline-element @temporeum/timeline-core
npm install --save-dev vite
npx vite

Open the address it prints, http://localhost:5173/.

The race to the Moon in nineteen moments, written in TimelineJS's own JSON and loaded as it is (fromTimelineJS): a slide at a time above, the timeline under it, in a lane per country and three eras. Previous and Next — or ← and → — move the timeline to the slide; picking an event on the timeline opens its slide. Zoom in on July 1969 and the landing is at its minute (storytelling, migrating from TimelineJS).