🕒 Lifecycle Timeline

January 12, 2026 · View on GitHub

A premium, interactive Vanilla JS component for visualizing product lifecycles, including OSS support, Enterprise support, and EOL (End-Of-Life) dates.

🚀 View Live Demo

Lifecycle Timeline Screenshot

✨ Features

Interactive Table: A clear data table between the filter and tracks for quick reference.
Smart Filtering: Real-time search to filter versions across both table and timeline.
Dark Mode: Native support with a persistent toggle.
Rich Legend: Detailed explanation of support states.
Responsive Design: Works on all screen sizes with horizontal scroll support.
Sticky Labels: Version names stay visible while scrolling through time.
Interactive Tooltips: Detailed date information on hover.
Live Indicator: Pulsing badge showing the current date line.
Fully Typed: Includes TypeScript definitions out of the box.

🚀 Installation

Via NPM

npm install lifecycle-timeline

Tip

Using Angular? Check out our Angular Integration Guide.

Manual Installation

Download the files from the dist folder: timeline.js (ESM), timeline.umd.cjs (UMD), and timeline.css.

🛠 Usage

Modern JavaScript (ESM)

import Timeline from 'lifecycle-timeline';
import 'lifecycle-timeline/style.css';

const data = [
  {
    version: "6.0.x",
    ossStart: "2025-01-01",
    ossEnd: "2026-08-20",
    enterpriseEnd: "2027-02-15",
    releaseNotesUrl: "https://example.com/notes"
  }
];

new Timeline('timeline-root', data, { visibleCount: 3 });

Browser (UMD)

<link rel="stylesheet" href="https://unpkg.com/lifecycle-timeline/dist/timeline.css">
<div id="timeline-root"></div>

<script src="https://unpkg.com/lifecycle-timeline/dist/timeline.umd.cjs"></script>
<script>
  const data = [...];
  new Timeline('timeline-root', data);
</script>

⚙️ Configuration & API

Constructor

new Timeline(elementId, data, options)

`options` Object

Property	Type	Default	Description
`visibleCount`	`number`	`3`	Initial versions shown before "Show More" appears.
`locale`	`string`	`auto`	UI language (`'en'`, `'fr'`).
`i18n`	`object`	`{}`	Custom translations or new languages.
`showTable`	`boolean`	`true`	Shows/hides the summary data table.
`showLegend`	`boolean`	`true`	Shows/hides the legend below the timeline.
`filterVersions`	`boolean`	`true`	Shows/hides the version filter input.
`splitSupport`	`boolean`	`false`	If `true`, Ent. starts after OSS end. If `false`, overlaps.
`compactMode`	`boolean`	`false`	Reduces vertical spacing for a denser view.
`showMajorFilter`	`boolean`	`false`	Adds a checkbox to filter for major versions only.

🌐 Internationalization (i18n)

You can easily override existing labels or add new languages:

new Timeline('timeline-root', data, {
  locale: 'fr',
  i18n: {
    fr: {
      filter: "Rechercher une version...",
      more: "Afficher {n} de plus"
    }
  }
});

🛡️ Data Validation

The component automatically validates your data. If required fields (version, ossStart, ossEnd) are missing or if date formats are invalid, a warning is logged in the browser console.

🎨 Theming

The component uses CSS variables for easy customization:

:root {
  --accent-oss: #99e67d;     /* Community support color */
  --accent-ent: #ffe88e;     /* Enterprise support color */
  --current-date: #086dc3;   /* Today's indicator color */
  --accent-eol: #ef4444;     /* End of life color */
}

🧪 Testing

We use Vitest for unit testing.

npm test

🛠 Development

npm install
npm run dev
npm run build
npm run release (Build + Publish)