Canvas Timeline
Function

useTimelineClips

Provides the canonical clip collection and clip metadata for React editor UI.

Usage notes

`useTimelineClips` is the broad clip-domain hook. It is appropriate for product chrome that needs clip read state, selection metadata, geometry helpers, and presentation updates, such as a clip inspector, project panel, or timeline command palette. It does not subscribe to per-frame playback ticks; geometry helpers read from the engine when a command or render path asks for them. Use useTimelineEditCommands for structural timeline edits such as move, trim, split, insert, overwrite, and delete.

Signature

Type Definition
useTimelineClips(): UseTimelineClipsResult<TrackKind>

Type parameters

NameConstraintDefaultDescription
TrackKindNonestringApp-defined track kind values carried by returned track entries, such as `"visual" | "audio"`.

Returns

UseTimelineClipsResult<TrackKind>

Flattened clips, selected clip metadata, clip lookups, and presentation commands.

Examples

tsx Example
import { useTimelineClips } from '#react/hooks';


export function ClipLabelEditor() {
  const { selectedClip, updateClip } = useTimelineClips();


  if (!selectedClip) {
    return null;
  }


  return (
    <input
      value={selectedClip.label ?? ''}
      onChange={(event) => updateClip(selectedClip.id, { label: event.target.value })}
    />
  );
}
tsx Example
import { toSeconds } from '@techsquidtv/canvas-timeline-utils';
import { useTimelineClips } from '#react/hooks';


export function ClipInspector() {
  const { selectedClip, selectedClipTrackId, timelineTimeToSourceTime } = useTimelineClips();


  if (!selectedClip) {
    return <p>No clip selected</p>;
  }


  const sourceTime = timelineTimeToSourceTime(selectedClip, selectedClip.timelineStart);


  return (
    <dl>
      <dt>Track</dt>
      <dd>{selectedClipTrackId}</dd>
      <dt>Source start</dt>
      <dd>{toSeconds(sourceTime).toFixed(2)}s</dd>
    </dl>
  );
}

Related links