Chapter 4: Build a timeline-based video editor

Core Idea

This document describes on a high-level how the Remotion Player can be synchronized with a timeline.

Key Concepts

• Get the <Timeline> component
• Watch the "Build a video editor in React" talk
• Build your own timeline
• See also

Code Examples

type BaseItem = {
  from: number;
  durationInFrames: number;
  id: string;
};

export type SolidItem = BaseItem & {
  type: 'solid';
  color: string;
};

export type TextItem = BaseItem & {
  type: 'text';
  text: string;
  color: string;
};

export type VideoItem = BaseItem & {
  type: 'video';
  src: string;
};

export type Item = SolidItem | TextItem | VideoItem;

export type Track = {
  name: string;
  items: Item[];
};

• What it demonstrates: Usage pattern for Build a timeline-based video editor from the official docs.

Key Takeaways

1. Understand get the <timeline> component when working with Build a timeline-based video editor.
2. Understand watch the "build a video editor in react" talk when working with Build a timeline-based video editor.
3. Understand build your own timeline when working with Build a timeline-based video editor.
4. Understand see also when working with Build a timeline-based video editor.

Connects To

• Absolute Fill: related page in the Fundamentals & Core Concepts section.
• Animating Properties: related page in the Fundamentals & Core Concepts section.
• Animation Math: related page in the Fundamentals & Core Concepts section.