Timeline · activity

Activity feeds, order journeys and changelogs: icons, avatars or status dots on a line, day headers, “5 min ago” times that stay current, items that fade in as they scroll into view, live arrivals and a pending step.

An order's journey · horizontal

  1. Ordered
  2. Packed
  3. Shipped

    Istanbul hub

  4. Out for delivery
  5. Delivered

A live feed · grouped by day · times keep themselves current · new events slide in

  1. Ada merged “Tree view” into main

    3 commits · 12 files changed

  2. Build #482 passed
  3. Grace commented on “Kanban limits”
    Can a column refuse cards when it's full? A flag would do.
  4. Deploy to production

    v2.3.0 · deck.kartex.net

  5. Alan opened “Tour on mobile”
  6. Waiting for the next build…

A changelog · both sides of the line · they fade in as you scroll

  1. v2.4 · Components

    Tree view, sortable lists, kanban and tours.

  2. v2.3 · Forms

    OTP, rating, time picker and file upload.

  3. v2.2 · Reports

    A banded report designer and viewer.

  4. v2.1 · Grid

    Grouping, pivots and charts in the grid.

Usage

JavaScript
import { signal } from "./index.js";import { Timeline } from "./components/timeline.js"; Timeline({ items: [{ title: "Shipped", time: "Sep 20", status: "done" }, { title: "Out for delivery", status: "current" }],           mode: "horizontal" }) const feed = signal([{ id: 1, title: "Build passed", icon: "✓", tone: "success", time: new Date() }]);Timeline({ items: feed, groupBy: "day", limit: 5, pending: "Waiting for the next build…" })feed.update((l) => [{ id: 2, title: "Deployed", time: new Date() }, ...l]);   // slides in at the top Timeline({ items: releases, mode: "alternate" })     // "left" (default) | "alternate" | "horizontal"