getRemotionEnvironment()v4.0.25

With the getRemotionEnvironment() function, you can retrieve information about the current Remotion 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.
isPlayer: Whether a <Player> is mounted on the current page.
isReadOnlyStudio: Whether in a statically deployed studio, where the @remotion/studio APIs cannot be used (available from v4.0.238)

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

Example

tsx
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>;
};

tsx
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

Example​

See also​

Example

See also