Skip to main content

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
import type {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';
export const App = () => {
const playerRef = useRef<PlayerRef>(null);
const timelineContainerRef = useRef<HTMLDivElement>(null);
const timelineContainerSize = useElementSize(timelineContainerRef);
const timelineContainerWidth = timelineContainerSize?.width;
return (
<TimelineProvider
onChange={(newState) => {
console.log('New timeline state:', newState);
}}
initialState={initialState}
>
<TimelineZoomProvider initialZoom={1}>
<PreviewContainer>
<VideoPreview loop playerRef={playerRef} />
<ActionRow playerRef={playerRef} />
</PreviewContainer>
<TimelineContainer timelineContainerRef={timelineContainerRef}>
{timelineContainerWidth ? (
<TimelineSizeProvider containerWidth={timelineContainerWidth}>
<Timeline playerRef={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
function VideoEditor() {
const saveToServer = async (state: TimelineState) => {
try {
await fetch('/api/save-timeline', {
method: 'POST',
body: JSON.stringify(state),
});
} catch (error) {
console.error('Failed to save timeline state:', error);
}
};
return (
<TimelineProvider onChange={saveToServer} initialState={initialState}>
<div className="video-editor">
<VideoPreview playerRef={playerRef} />
<ActionRow playerRef={playerRef} />
<TimelineRoot playerRef={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