packages/docs/docs/studio-protocol/is-inside-studio.mdx
Returns whether the current website is loaded in the Element library modal in Remotion Studio.
Use it to adapt library UI that is redundant inside Studio, such as a "Drag into Studio" handle.
import {isInsideStudio} from '@remotion/studio-protocol';
import {useLayoutEffect, useState} from 'react';
export const ElementActions = () => {
const [insideStudio, setInsideStudio] = useState<boolean | null>(null);
useLayoutEffect(() => {
setInsideStudio(isInsideStudio());
}, []);
return insideStudio === false ? <button>Drag into Studio</button> : null;
};
Starting with null prevents the action from briefly appearing before the browser check runs. On a top-level website, the action appears after the check.
A boolean. It is true when the page has Studio's URL marker or is inside an iframe. The iframe check keeps the result true if client-side navigation removes the URL marker.
It returns false outside a browser, including during server-side rendering.
The result is a UI hint, not proof of Studio identity. Do not use it as a security boundary.