Skip to main content

getRemotionEnvironment()

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.

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

See also​