Canvas Timeline
Package

Timeline Math & Time Utilities

Rational time and shared math helpers.

Use the utility package when you need stable time conversions or math helpers without importing editor layers.

Overview

The utility package contains rational-time helpers and small shared math functions. It is intentionally light so apps, tests, server export code, and package internals can agree on timeline time math without importing React or the engine.

Use these helpers at the edges of your app when converting from seconds, frame counts, timecode strings, or UI input into the rational time values expected by Canvas Timeline.

Install

pnpm
pnpm add @techsquidtv/canvas-timeline-utils

Use the utilities for

  • You need exact RationalTime values instead of floating-point seconds.
  • You are formatting or parsing timeline time outside the React components.
  • You want shared clamp, rounding, and arithmetic helpers without editor dependencies.

Usage

Convert at the app boundary

Keep timeline state in rational time. Convert from seconds or timecode when data enters the timeline, then convert back only for display, media APIs, or export code that requires decimal seconds.

  1. 1Use fromSeconds when creating timeline state from ordinary media durations or UI values.
  2. 2Use toSeconds when passing playhead or clip times to browser media APIs.
  3. 3Use formatting helpers for readouts and editable timecode fields.

Example

Rational time helpers
import {
  addRational,
  formatTime,
  fromSeconds,
  toSeconds,
} from '@techsquidtv/canvas-timeline-utils';


const start = fromSeconds(12);
const duration = fromSeconds(3.5);
const end = addRational(start, duration);


console.log(formatTime(end));
console.log(toSeconds(end));