getRemotionEnvironment()v4.0.25

With the getRemotionEnvironment() function, you can retrieve information about the current Remotion Environment.

info

Consider using the useRemotionEnvironment() hook instead, as it is future-proof for browser rendering scenarios.

This can be useful if you want components or functions to behave differently depending on the environment.

It returns an object with the following properties:

isStudio

Whether the function got called in the Remotion Studio.

isRendering

Whether the function got called in a render. Also available in the calculateMetadata() function.

isPlayer

Whether a <Player> is mounted on the current page.

isReadOnlyStudiov4.0.238

Whether in a statically deployed studio, where the @remotion/studio APIs cannot be used.

isClientSideRenderingv4.0.344

Always false when using getRemotionEnvironment(). Use useRemotionEnvironment() to detect a client-side rendering context.

Example

import React from 'react';
import {getRemotionEnvironment} from 'remotion';

export const MyComp: React.FC = () => {
  const {isStudio, isPlayer, isRendering} = getRemotionEnvironment();

  if (isStudio) {
    return <div>I'm in the Studio!</div>;
  }

  if (isPlayer) {
    return <div>I'm in the Player!</div>;
  }

  if (isRendering) {
    return <div>I'm Rendering</div>;
  }

  return <div>Hello World!</div>;
};

A more realistic use case: You might want to debounce a request during editing in the Remotion Studio, but not during rendering. See: debouncing requests

Compatibility

Browsers			Servers			Environments
Chrome	Firefox	Safari	Node.js	Bun	Serverless Functions	Client-side rendering	Server-side rendering	Player	Studio
			All false	All false	All false	Use useRemotionEnvironment()

See also

• Source code for this function
• useRemotionEnvironment() - a new preferred way to get the environment information
• useVideoConfig()
• Using a different tag in preview and rendering