Timescope

Getting Started ​

Installation ​

bash
npm install timescope

Using a coding agent?

Install the Timescope skill for your coding agent:

bash
npx skills add xenodrive/timescope

See the skill documentation for details.

Create your first Timescope ​

html
<div id="timescope"></div>
ts
import { Timescope } from 'timescope';

const timescope = new Timescope({ target: '#timescope' });

Accessing the selected time ​

Read the selected time directly, or subscribe to changes:

ts
console.log(timescope.time); // Decimal | null

timescope.on('timechanged', ({ value }) => {
  console.log(value);
});

View control ​

Changing the initial view ​

Set an initial time and zoom, or fit a whole interval:

ts
new Timescope({ target: '#timescope', time: 15, zoom: 3 });
ts
new Timescope({ target: '#timescope', fit: [0, 30] });

Programmatic control ​

Time inputs accept numbers (seconds by default), date strings, and Date objects. Use null to follow the wall clock.

ts
timescope.setTime(15);
timescope.setTime('2026-01-15T10:00:00Z');
timescope.setTime(new Date());
timescope.setTime(null);
timescope.setZoom(2);
timescope.fitTo([0, 30]);

Method reference

Next steps ​