Where to Find Remotion Core Components Source Code: A Complete Guide

The source code for Remotion core components is located in the packages/core/src directory of the remotion-dev/remotion repository, with all public APIs exported from packages/core/src/index.ts.

If you are building programmatic video content with Remotion, understanding where the core components live helps you debug timing issues, extend functionality, or contribute to the framework. This guide maps the exact file locations for essential components like Composition, Sequence, and Video, and explains how the architecture connects them.

Where Remotion Core Components Live

All foundational React components and context providers reside under packages/core/src. This directory acts as the heart of the Remotion framework, containing the implementation details for timeline management, media rendering, and composition registration.

The entry point packages/core/src/index.ts aggregates and re-exports every public component, ensuring you can import them via standard syntax:

import { Composition, Sequence, Video } from 'remotion';

Key Components and Their Source Files

The following sections break down the most critical components by category, linking directly to their implementation files in the repository.

Composition and Sequence

These components define the structure and timing of your video.

• Composition – Located at packages/core/src/Composition.tsx. This is the top-level container that registers a video with specific dimensions, frame rate, and duration. It acts as the entry point that the Remotion renderer targets.
• Sequence – Located at packages/core/src/Sequence.tsx. This component offsets or truncates its children based on frame ranges, allowing you to create loops, delays, or timed sections without manually calculating frame positions.

Media Components

These wrappers handle video, audio, and animated images with Remotion-specific timeline synchronization.

• Video – Located at packages/core/src/video/Video.tsx. Wraps the HTML5 <video> element, adding props for playback rate control and timeline scrubbing.
• Audio – Located at packages/core/src/audio/Audio.tsx. Wraps the HTML5 <audio> element with Remotion-aware buffering and volume controls.
• AnimatedImage – Located at packages/core/src/animated-image/AnimatedImage.tsx. Handles animated GIF and WebP sources, synchronizing their frame progression with the Remotion timeline.

Layout and Utility Components

Helper components for positioning, static assets, and embedding.

• AbsoluteFill – Located at packages/core/src/AbsoluteFill.tsx. A layout primitive that absolutely positions children to fill the parent container, commonly used as a root layout layer.
• Img – Located at packages/core/src/Img.tsx. An optimized image component that preloads assets and handles display timing.
• IFrame – Located at packages/core/src/IFrame.tsx. Embeds external web pages and synchronizes their visibility with the video timeline.
• Still – Located at packages/core/src/Still.tsx. Renders a single static frame for thumbnail or image export purposes.
• Folder – Located at packages/core/src/Folder.tsx. A logical grouping component for the Remotion Studio UI that does not render DOM elements but provides nesting context.

Context Providers and Hooks

Internal state management exposed via React Context.

• TimelineContext – Located at packages/core/src/TimelineContext.tsx. Provides the current frame, playback direction, and time to all descendants.
• CompositionManager – Located at packages/core/src/CompositionManager.tsx. Registers and resolves all Composition declarations, acting as a registry for the renderer.
• SequenceManager – Located at packages/core/src/SequenceManager.tsx. Tracks nested sequences for rendering optimization and visibility calculations.
• useDelayRender – Located at packages/core/src/use-delay-render.tsx. A hook allowing components to suspend rendering until asynchronous data is ready.
• Buffering Provider – Located at packages/core/src/buffering.tsx. Manages loading states for remote media assets.
• Prefetch Provider – Located at packages/core/src/prefetch-state.tsx. Enables pre-loading of assets before they appear on the timeline.

How the Core Architecture Fits Together

Understanding the relationship between these files helps you navigate the codebase effectively.

The entry point at packages/core/src/index.ts exposes the public API. When you import remotion, you are importing from this file.

The context layer sits at the top of the React tree. TimelineContext, CompositionManager, and Buffering Provider wrap your application and propagate state downward. These contexts enable the timeline scrubbing and composition registration that make Remotion work.

The media components—Video, Audio, and AnimatedImage—consume these contexts to synchronize playback with the current frame. They rely on the buffering context to handle network latency and the timeline context to determine which frame to display.

Finally, layout utilities like AbsoluteFill and Sequence handle positioning and timing without requiring heavy context consumption, making them lightweight primitives for structuring your video.

Practical Example: Using Core Components

Below is a complete example demonstrating how these core components work together in a typical Remotion project. This imports directly from the remotion package, which exports everything defined in packages/core/src/index.ts.

import {
  Composition,
  Sequence,
  AbsoluteFill,
  Video,
  Audio,
} from 'remotion';

// A component that uses core building blocks
export const MyVideo = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#1a1a1a' }}>
      {/* Video plays from frame 0 to 90 */}
      <Sequence from={0} durationInFrames={90}>
        <Video src="/assets/background.mp4" />
      </Sequence>
      
      {/* Audio starts at frame 30, plays for 120 frames */}
      <Sequence from={30} durationInFrames={120}>
        <Audio src="/assets/narration.mp3" volume={0.8} />
      </Sequence>
    </AbsoluteFill>
  );
};

// Register the composition
export const RemotionRoot = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      width={1920}
      height={1080}
      fps={30}
      durationInFrames={150}
    />
  );
};

In this example:

• Composition (from packages/core/src/Composition.tsx) registers the video metadata.
• Sequence (from packages/core/src/Sequence.tsx) controls the timing of media elements.
• AbsoluteFill (from packages/core/src/AbsoluteFill.tsx) provides the full-screen layout container.
• Video and Audio (from packages/core/src/video/Video.tsx and packages/core/src/audio/Audio.tsx) handle the media playback synchronized to the timeline.

Summary

• Primary Location: All Remotion core components source code resides in packages/core/src within the remotion-dev/remotion repository.
• Entry Point: Public APIs are exported from packages/core/src/index.ts, enabling imports from the remotion package.
• Key Components: Essential building blocks like Composition (src/Composition.tsx), Sequence (src/Sequence.tsx), and media wrappers (src/video/Video.tsx, src/audio/Audio.tsx) live alongside layout utilities (src/AbsoluteFill.tsx) and context providers (src/TimelineContext.tsx).
• Architecture: The codebase uses a context-based architecture where TimelineContext and CompositionManager propagate state to media components and sequences.

Frequently Asked Questions

Where is the Composition component defined in the Remotion source code?

The Composition component is defined in packages/core/src/Composition.tsx. This file contains the implementation for the top-level container that registers video dimensions, frame rate, and duration with the Remotion renderer.

How do I find the source code for Remotion's timeline management?

Timeline state management is implemented in packages/core/src/TimelineContext.tsx, which provides the current frame, playback direction, and time to all descendant components. The SequenceManager in packages/core/src/SequenceManager.tsx handles nested sequence tracking for rendering optimization.

What is the difference between the Video and Audio component implementations?

Both components wrap HTML5 media elements but reside in different subdirectories. The Video component is located at packages/core/src/video/Video.tsx and handles visual media synchronization, while the Audio component is at packages/core/src/audio/Audio.tsx and manages audio buffering and volume controls with Remotion-specific timing.

Where can I find utility components like AbsoluteFill and Img in the repository?

Layout utilities are located directly in the src root. AbsoluteFill is defined in packages/core/src/AbsoluteFill.tsx and provides absolute positioning to fill the parent container. The Img component is in packages/core/src/Img.tsx and offers optimized image preloading for the timeline.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}