remotion-dev/remotion · error · Error

PlaybackRateContext is not available. This hook must be used

Error message

PlaybackRateContext is not available. This hook must be used inside a <Player> or the Remotion Studio.

What it means

usePlaybackRate() reads Remotion's PlaybackRate React context, which is only provided inside <Player> or the Remotion Studio. When the context is null the hook throws, because playback rate is meaningless without a Player-driven timeline.

Source

Thrown at packages/core/src/timeline-position-state.ts:90

	return clampFrameToCompositionRange(unclamped, videoConfig.durationInFrames);
};

export const useTimelineContext = (): TimelineContextValue => {
	const state = useContext(TimelineContext);
	if (state === null) {
		throw new Error(
			'TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.',
		);
	}

	return state;
};

export const usePlaybackRate = (): PlaybackRateContextValue => {
	const state = useContext(PlaybackRateContext);
	if (state === null) {
		throw new Error(
			'PlaybackRateContext is not available. This hook must be used inside a <Player> or the Remotion Studio.',
		);
	}

	return state;
};

export const useTimelinePosition = (): number => {
	const state = useTimelineContext();
	return useTimelinePositionFromContext(state);
};

export const useAbsoluteTimelinePosition = (): number => {
	const state = useContext(AbsoluteTimeContext);
	if (state === null) {
		throw new Error(
			'AbsoluteTimeContext is not available. This hook must be used inside a <Player> or the Remotion Studio.',
		);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Only call usePlaybackRate() from components that are guaranteed to render inside <Player> or a <Composition>.
2. Split the component so the playback-rate-dependent logic lives in a child rendered only within the Player tree.
3. Run `npx remotion versions` to align package versions.

Example fix

// before
function Controls({standalone}) {
  const rate = usePlaybackRate();
  return <Toolbar rate={rate} />;
}

// after
function Controls() {
  return <Toolbar />;
}
function PlayerControls() {
  const rate = usePlaybackRate();
  return <Toolbar rate={rate} />;
}

// Only call inside components guaranteed to be Player/Composition children
const useOptionalPlaybackRate = () => {
  try {
    return usePlaybackRate();
  } catch {
    return 1;
  }
};

try {
  return usePlaybackRate();
} catch (e) {
  if (/PlaybackRateContext/.test((e as Error).message)) return 1;
  throw e;
}

When it happens

Trigger: Calling usePlaybackRate() from a component rendered outside <Player>/Studio, or from a component that is sometimes mounted standalone (e.g. in a thumbnail or preview).

Common situations: Sharing a component between the Player and a static preview; calling the hook at the top level of a module instead of inside the rendered tree; version mismatch between Player and core.

Related errors

• TimelineContext is not available. This hook must be used ins
• AbsoluteTimeContext is not available. This hook must be used
• Tried to enable the buffering state, but a Remotion context
• useCurrentFrame can only be called inside a component that w
• useCurrentScale() was called outside of a Remotion context.

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/c00d530f7abf3773. Report an issue: GitHub.