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.

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.
isReadOnlyStudio: Whether in a statically deployed studio, where the @remotion/studio APIs cannot be used (available from v4.0.238)
isClientSideRendering: Whether the function got called in a client-side rendering context (available from v4.0.344)

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

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