Timeline Usage

Component Integration

Import and use the timeline components in your React application.

For optimal performance and proper functionality, structure your components like this:

tsx
importtype {PlayerRef} from'@remotion/player';
import {Timeline, TimelineContainer} from'./timeline/remotion-timeline/components/timeline';
import {TimelineProvider} from'./timeline/remotion-timeline/context/provider';
import {TimelineSizeProvider} from'./timeline/remotion-timeline/context/timeline-size-provider';
import {TimelineZoomProvider} from'./timeline/remotion-timeline/context/timeline-zoom-provider';
import {PreviewContainer} from'./layout';
exportconstApp= () => {
constplayerRef=useRef<PlayerRef>(null);
consttimelineContainerRef=useRef<HTMLDivElement>(null);
consttimelineContainerSize=useElementSize(timelineContainerRef);
consttimelineContainerWidth= timelineContainerSize?.width;
return (
 <TimelineProvider
onChange={(newState) => {
 console.log('New timeline state:', newState);
 }}
initialState={initialState}
>
 <TimelineZoomProviderinitialZoom={1}>
 <PreviewContainer>
 <VideoPreviewloopplayerRef={playerRef} />
 <ActionRowplayerRef={playerRef} />
 </PreviewContainer>
 <TimelineContainertimelineContainerRef={timelineContainerRef}>
 {timelineContainerWidth ? (
 <TimelineSizeProvidercontainerWidth={timelineContainerWidth}>
 <TimelineplayerRef={playerRef} />
 </TimelineSizeProvider>
 ) :null}
 </TimelineContainer>
 </TimelineZoomProvider>
 </TimelineProvider>
 );
};

This structure ensures:

Timeline state management through TimelineProvider
Zoom functionality with TimelineZoomProvider
Proper sizing calculations with TimelineSizeProvider
Responsive timeline container with TimelineContainer

Default state structure

The project includes a predefined state structure for timeline tracks and items. You can check TimelineProvider component for the state structure.

Video Preview

This project includes a CanvasComposition, a Remotion composition that renders the timeline state in the Remotion Player.

You can:

Use the provided composition as-is for quick prototyping
Adapt it to your needs
Replace it with your own composition while keeping the timeline functionality

Check video-preview.tsx and App.tsx for implementation examples.

State Persistence

The TimelineProvider includes an onChange callback that fires whenever the timeline state changes (adding/removing tracks, moving items, etc.). Use this to save the editor state to your backend:

tsx
functionVideoEditor() {
constsaveToServer=async (state:TimelineState) => {
try {
awaitfetch('/api/save-timeline', {
 method: 'POST',
 body: JSON.stringify(state),
 });
 } catch (error) {
 console.error('Failed to save timeline state:', error);
 }
 };
return (
 <TimelineProvideronChange={saveToServer} initialState={initialState}>
 <divclassName="video-editor">
 <VideoPreviewplayerRef={playerRef} />
 <ActionRowplayerRef={playerRef} />
 <TimelineRootplayerRef={playerRef} />
 </div>
 </TimelineProvider>
 );
}

Example Project Structure

In App.tsx, you can see the complete implementation of the timeline component.

The example project demonstrates:

Importing the timeline components
Using the ActionRow component to use timeline zoom and add clips
Using the TimelineRoot component to render the timeline

Component Integration​

Default state structure​

Video Preview​

State Persistence​

Example Project Structure​

Component Integration

Default state structure

Video Preview

State Persistence

Example Project Structure