Getting Started

Trailvine draws a curved SVG route through a list of milestones — a framework-agnostic core, with thin bindings for React and plain JavaScript.

Install

Install whichever package matches your stack. All three share the same underlying core.

Core

The framework-agnostic engine. Install this if you're building your own binding, or just want the raw path/layout functions.

npm install @trailvine/core

React

A <Timeline /> component and a useTimelineLayout hook.

npm install @trailvine/react

Vanilla

renderTimelineSVG and mountTimeline for plain JS/DOM projects.

npm install @trailvine/vanilla

Quickstart

The smallest working example, in both bindings.

React

import { Timeline } from '@trailvine/react';

const points = [
  { date: '2019', title: 'Started as a web engineer' },
  { date: '2022', title: 'Became a frontend architect' },
  { date: '2024', title: 'Started building open source tools' },
];

export default function MyTimeline() {
  return (
    <Timeline
      points={points}
      layout={{ width: 700, marginX: 20, bands: [70, 20] }}
      path={{ curveType: 'elbow', radius: 8 }}
    />
  );
}

Vanilla

import { mountTimeline } from '@trailvine/vanilla';

const points = [
  { date: '2019', title: 'Started as a web engineer' },
  { date: '2022', title: 'Became a frontend architect' },
  { date: '2024', title: 'Started building open source tools' },
];

const container = document.getElementById('timeline');

mountTimeline(container, {
  points,
  layout: { width: 700, marginX: 20, bands: [70, 20] },
  path: { curveType: 'elbow', radius: 8 },
});

Next steps