@remotion/studio 4.0.488 → 4.0.489

package/dist/components/Canvas.js

@@ -611,11 +611,12 @@ const Canvas = ({ canvasContent, size }) => {
     (0, react_1.useEffect)(() => {
         fetchMetadata();
     }, [fetchMetadata]);
-    const updateElementInstallTarget = (0, react_1.useCallback)(() => {
+    const updateElementInstallTarget = (0, react_1.useCallback)((requestId) => {
         if (previewServerClientId === null) {
             return;
         }
         (0, call_api_1.callApi)('/api/update-element-install-target', {
+            requestId,
             clientId: previewServerClientId,
             compositionFile: canInstallElements ? compositionFile : null,
             compositionId: canInstallElements ? currentCompositionId : null,
@@ -629,17 +630,9 @@ const Canvas = ({ canvasContent, size }) => {
         currentCompositionId,
         previewServerClientId,
     ]);
-    (0, react_1.useEffect)(() => {
-        updateElementInstallTarget();
-        const interval = window.setInterval(updateElementInstallTarget, 2000);
-        return () => {
-            window.clearInterval(interval);
-        };
-    }, [updateElementInstallTarget]);
     (0, react_1.useEffect)(() => {
         const markFocused = () => {
             lastFocusedAtRef.current = Date.now();
-            updateElementInstallTarget();
         };
         window.addEventListener('focus', markFocused);
         document.addEventListener('pointerdown', markFocused, { capture: true });
@@ -647,7 +640,15 @@ const Canvas = ({ canvasContent, size }) => {
             window.removeEventListener('focus', markFocused);
             document.removeEventListener('pointerdown', markFocused, { capture: true });
         };
-    }, [updateElementInstallTarget]);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return subscribeToEvent('request-element-install-target', (event) => {
+            if (event.type !== 'request-element-install-target') {
+                return;
+            }
+            updateElementInstallTarget(event.requestId);
+        });
+    }, [subscribeToEvent, updateElementInstallTarget]);
     (0, react_1.useEffect)(() => {
         if (installingElementName === null) {
             return;

package/dist/components/Editor.js

@@ -40,6 +40,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
+const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const canvas_ref_1 = require("../state/canvas-ref");
 const scale_lock_1 = require("../state/scale-lock");
 const timeline_zoom_1 = require("../state/timeline-zoom");
@@ -61,11 +62,7 @@ const background = {
     flexDirection: 'column',
     position: 'absolute',
 };
-const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
-exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === 'undefined' ||
-    process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === null
-    ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS
-    : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
+exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = (0, studio_runtime_config_1.getStudioBufferStateDelayInMilliseconds)();
 const Editor = ({ Root, readOnlyStudio }) => {
     const [drawElement, setDrawElement] = (0, react_1.useState)(null);
     const size = player_1.PlayerInternals.useElementSize(drawElement, {

package/dist/components/GlobalKeybindings.js

@@ -6,6 +6,7 @@ const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const client_id_1 = require("../helpers/client-id");
 const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
+const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
@@ -134,7 +135,7 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
             commandCtrlKey: true,
             preventDefault: true,
         });
-        const cmdIKey = process.env.ASK_AI_ENABLED
+        const cmdIKey = (0, studio_runtime_config_1.getStudioAskAIEnabled)()
             ? keybindings.registerKeybinding({
                 event: 'keydown',
                 key: 'i',

package/dist/components/KeyboardShortcutsExplainer.js

@@ -4,6 +4,7 @@ exports.KeyboardShortcutsExplainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../helpers/colors");
+const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const keys_1 = require("../icons/keys");
 const layout_1 = require("./layout");
@@ -174,7 +175,7 @@ const KeyboardShortcutsExplainer = () => {
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
                                             jsx_runtime_1.jsx("kbd", { style: key, children: "Del" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "\u232B" })
                                         ] }), jsx_runtime_1.jsx("div", { style: right, children: "Delete / reset selection" })
-                                ] }), process.env.ASK_AI_ENABLED && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                ] }), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "AI" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                             jsx_runtime_1.jsxs("div", { style: left, children: [
                                                     jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "I" })

package/dist/components/Modals.js

@@ -7,6 +7,7 @@ exports.Modals = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
+const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
@@ -34,6 +35,6 @@ const Modals = ({ readOnlyStudio }) => {
         'connected';
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/MenuContent.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const mobile_layout_1 = require("../../helpers/mobile-layout");
+const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const MenuDivider_1 = require("../Menu/MenuDivider");
@@ -168,8 +169,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         return containerStyles;
     }, [fixedHeight, isMobileLayout]);
     (0, react_1.useEffect)(() => {
-        if (!keybindings.isHighestContext ||
-            !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+        if (!keybindings.isHighestContext || !(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
             return;
         }
         const onKeyDown = (event) => {

package/dist/components/Timeline/MaxTimelineTracks.js

@@ -2,13 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const colors_1 = require("../../helpers/colors");
+const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined' ||
-    process.env.MAX_TIMELINE_TRACKS === null
-    ? studio_shared_1.DEFAULT_TIMELINE_TRACKS
-    : Number(process.env.MAX_TIMELINE_TRACKS);
+exports.MAX_TIMELINE_TRACKS = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {
     height: exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -41,6 +41,7 @@ const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
@@ -558,7 +559,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         await saveName(name);
     }, [saveName]);
     react_1.default.useEffect(() => {
-        if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+        if (!canRenameSelectedSequence || !(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
             setIsRenaming(false);
             return;
         }

package/dist/esm/{chunk-nn36hyt1.js → chunk-jrta3xaf.js}

@@ -123,6 +123,42 @@ var noop = () => {
   return;
 };
 
+// src/helpers/studio-runtime-config.ts
+import { DEFAULT_TIMELINE_TRACKS } from "@remotion/studio-shared";
+var DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
+var defaultStudioRuntimeConfig = {
+  askAIEnabled: false,
+  bufferStateDelayInMilliseconds: null,
+  experimentalClientSideRenderingEnabled: false,
+  interactivityEnabled: true,
+  keyboardShortcutsEnabled: true,
+  maxTimelineTracks: null
+};
+var getStudioRuntimeConfig = () => {
+  if (typeof window === "undefined") {
+    return defaultStudioRuntimeConfig;
+  }
+  return window.remotion_studioConfig ?? defaultStudioRuntimeConfig;
+};
+var getStudioAskAIEnabled = () => {
+  return getStudioRuntimeConfig().askAIEnabled;
+};
+var getStudioInteractivityEnabled = () => {
+  return getStudioRuntimeConfig().interactivityEnabled;
+};
+var getStudioKeyboardShortcutsEnabled = () => {
+  return getStudioRuntimeConfig().keyboardShortcutsEnabled;
+};
+var getStudioExperimentalClientSideRenderingEnabled = () => {
+  return getStudioRuntimeConfig().experimentalClientSideRenderingEnabled;
+};
+var getStudioMaxTimelineTracks = () => {
+  return getStudioRuntimeConfig().maxTimelineTracks ?? DEFAULT_TIMELINE_TRACKS;
+};
+var getStudioBufferStateDelayInMilliseconds = () => {
+  return getStudioRuntimeConfig().bufferStateDelayInMilliseconds ?? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS;
+};
+
 // src/state/canvas-ref.ts
 import { createRef } from "react";
 var canvasRef = createRef();
@@ -942,18 +978,18 @@ var KeybindingContextProvider = ({ children }) => {
 };
 
 // src/helpers/use-keybinding.ts
-if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+if (!getStudioKeyboardShortcutsEnabled()) {
   console.warn("Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.");
 }
 var areKeyboardShortcutsDisabled = () => {
-  return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
+  return !getStudioKeyboardShortcutsEnabled();
 };
 var useKeybinding = () => {
   const [paneId] = useState3(() => String(Math.random()));
   const context = useContext4(KeybindingContext);
   const { isHighestContext } = useZIndex();
   const registerKeybinding = useCallback4((options) => {
-    if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!getStudioKeyboardShortcutsEnabled()) {
       return {
         unregister: () => {
           return;
@@ -1989,7 +2025,7 @@ var PreviewServerConnection = ({ children, readOnlyStudio }) => {
 };
 
 // src/helpers/show-browser-rendering.ts
-var SHOW_BROWSER_RENDERING = Boolean(process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED);
+var SHOW_BROWSER_RENDERING = getStudioExperimentalClientSideRenderingEnabled();
 
 // src/helpers/timeline-node-path-key.ts
 import { stringifySequenceExpandedRowKey } from "@remotion/studio-shared";
@@ -3734,7 +3770,7 @@ var MenuContent = ({
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
   useEffect11(() => {
-    if (!keybindings.isHighestContext || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!keybindings.isHighestContext || !getStudioKeyboardShortcutsEnabled()) {
       return;
     }
     const onKeyDown = (event) => {
@@ -6090,8 +6126,7 @@ import {
 } from "remotion";
 
 // src/helpers/interactivity-enabled.ts
-var interactivityEnabled = process.env.INTERACTIVITY_ENABLED;
-var studioInteractivityEnabled = interactivityEnabled === undefined || interactivityEnabled === null ? true : interactivityEnabled !== false && interactivityEnabled !== "false";
+var studioInteractivityEnabled = getStudioInteractivityEnabled();
 
 // src/components/ExpandedTracksProvider.tsx
 import { createContext as createContext13, useCallback as useCallback24, useMemo as useMemo24, useState as useState20 } from "react";
@@ -10092,7 +10127,7 @@ var GlobalKeybindings = ({ readOnlyStudio }) => {
       commandCtrlKey: true,
       preventDefault: true
     });
-    const cmdIKey = process.env.ASK_AI_ENABLED ? keybindings.registerKeybinding({
+    const cmdIKey = getStudioAskAIEnabled() ? keybindings.registerKeybinding({
       event: "keydown",
       key: "i",
       callback: () => {
@@ -11717,7 +11752,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
         label: "Tools",
         leaveLeftPadding: false,
         items: [
-          process.env.ASK_AI_ENABLED ? {
+          getStudioAskAIEnabled() ? {
             id: "ask-ai",
             value: "ask-ai",
             label: "Ask AI",
@@ -24739,11 +24774,12 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   useEffect42(() => {
     fetchMetadata();
   }, [fetchMetadata]);
-  const updateElementInstallTarget = useCallback51(() => {
+  const updateElementInstallTarget = useCallback51((requestId) => {
     if (previewServerClientId === null) {
       return;
     }
     callApi("/api/update-element-install-target", {
+      requestId,
       clientId: previewServerClientId,
       compositionFile: canInstallElements ? compositionFile : null,
       compositionId: canInstallElements ? currentCompositionId : null,
@@ -24759,17 +24795,9 @@ var Canvas = ({ canvasContent, size: size2 }) => {
     currentCompositionId,
     previewServerClientId
   ]);
-  useEffect42(() => {
-    updateElementInstallTarget();
-    const interval = window.setInterval(updateElementInstallTarget, 2000);
-    return () => {
-      window.clearInterval(interval);
-    };
-  }, [updateElementInstallTarget]);
   useEffect42(() => {
     const markFocused = () => {
       lastFocusedAtRef.current = Date.now();
-      updateElementInstallTarget();
     };
     window.addEventListener("focus", markFocused);
     document.addEventListener("pointerdown", markFocused, { capture: true });
@@ -24777,7 +24805,15 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       window.removeEventListener("focus", markFocused);
       document.removeEventListener("pointerdown", markFocused, { capture: true });
     };
-  }, [updateElementInstallTarget]);
+  }, []);
+  useEffect42(() => {
+    return subscribeToEvent("request-element-install-target", (event) => {
+      if (event.type !== "request-element-install-target") {
+        return;
+      }
+      updateElementInstallTarget(event.requestId);
+    });
+  }, [subscribeToEvent, updateElementInstallTarget]);
   useEffect42(() => {
     if (installingElementName === null) {
       return;
@@ -47715,9 +47751,8 @@ import React207, { useCallback as useCallback166, useContext as useContext120, u
 import { Internals as Internals98 } from "remotion";
 
 // src/components/Timeline/MaxTimelineTracks.tsx
-import { DEFAULT_TIMELINE_TRACKS } from "@remotion/studio-shared";
 import { jsxs as jsxs128 } from "react/jsx-runtime";
-var MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === "undefined" || process.env.MAX_TIMELINE_TRACKS === null ? DEFAULT_TIMELINE_TRACKS : Number(process.env.MAX_TIMELINE_TRACKS);
+var MAX_TIMELINE_TRACKS = getStudioMaxTimelineTracks();
 var MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 var container39 = {
   height: MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
@@ -49734,7 +49769,7 @@ var TimelineSequenceItem = ({
     await saveName(name);
   }, [saveName]);
   React194.useEffect(() => {
-    if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!canRenameSelectedSequence || !getStudioKeyboardShortcutsEnabled()) {
       setIsRenaming(false);
       return;
     }
@@ -57007,7 +57042,7 @@ var KeyboardShortcutsExplainer = () => {
                   })
                 ]
               }),
-              process.env.ASK_AI_ENABLED && /* @__PURE__ */ jsxs164(Fragment57, {
+              getStudioAskAIEnabled() && /* @__PURE__ */ jsxs164(Fragment57, {
                 children: [
                   /* @__PURE__ */ jsx304("br", {}),
                   /* @__PURE__ */ jsx304("div", {
@@ -65586,7 +65621,7 @@ var Modals = ({ readOnlyStudio }) => {
       modalContextType && modalContextType.type === "confirmation-dialog" && /* @__PURE__ */ jsx360(ConfirmationDialog, {
         state: modalContextType
       }),
-      process.env.ASK_AI_ENABLED && /* @__PURE__ */ jsx360(AskAiModal, {})
+      getStudioAskAIEnabled() && /* @__PURE__ */ jsx360(AskAiModal, {})
     ]
   });
 };
@@ -65674,8 +65709,7 @@ var background = {
   flexDirection: "column",
   position: "absolute"
 };
-var DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
-var BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === "undefined" || process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === null ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
+var BUFFER_STATE_DELAY_IN_MILLISECONDS = getStudioBufferStateDelayInMilliseconds();
 var Editor = ({ Root, readOnlyStudio }) => {
   const [drawElement, setDrawElement] = useState125(null);
   const size3 = PlayerInternals23.useElementSize(drawElement, {

package/dist/esm/index.mjs

@@ -584,8 +584,28 @@ import {
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ZodContext = createContext(null);
 
+// src/helpers/studio-runtime-config.ts
+import { DEFAULT_TIMELINE_TRACKS } from "@remotion/studio-shared";
+var defaultStudioRuntimeConfig = {
+  askAIEnabled: false,
+  bufferStateDelayInMilliseconds: null,
+  experimentalClientSideRenderingEnabled: false,
+  interactivityEnabled: true,
+  keyboardShortcutsEnabled: true,
+  maxTimelineTracks: null
+};
+var getStudioRuntimeConfig = () => {
+  if (typeof window === "undefined") {
+    return defaultStudioRuntimeConfig;
+  }
+  return window.remotion_studioConfig ?? defaultStudioRuntimeConfig;
+};
+var getStudioInteractivityEnabled = () => {
+  return getStudioRuntimeConfig().interactivityEnabled;
+};
+
 // src/helpers/interactivity-enabled.ts
-var interactivityEnabled = process.env.INTERACTIVITY_ENABLED;
+var studioInteractivityEnabled = getStudioInteractivityEnabled();
 
 // src/visual-controls/VisualControls.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";

package/dist/esm/internals.mjs

@@ -176,6 +176,42 @@ var noop = () => {
   return;
 };
 
+// src/helpers/studio-runtime-config.ts
+import { DEFAULT_TIMELINE_TRACKS } from "@remotion/studio-shared";
+var DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
+var defaultStudioRuntimeConfig = {
+  askAIEnabled: false,
+  bufferStateDelayInMilliseconds: null,
+  experimentalClientSideRenderingEnabled: false,
+  interactivityEnabled: true,
+  keyboardShortcutsEnabled: true,
+  maxTimelineTracks: null
+};
+var getStudioRuntimeConfig = () => {
+  if (typeof window === "undefined") {
+    return defaultStudioRuntimeConfig;
+  }
+  return window.remotion_studioConfig ?? defaultStudioRuntimeConfig;
+};
+var getStudioAskAIEnabled = () => {
+  return getStudioRuntimeConfig().askAIEnabled;
+};
+var getStudioInteractivityEnabled = () => {
+  return getStudioRuntimeConfig().interactivityEnabled;
+};
+var getStudioKeyboardShortcutsEnabled = () => {
+  return getStudioRuntimeConfig().keyboardShortcutsEnabled;
+};
+var getStudioExperimentalClientSideRenderingEnabled = () => {
+  return getStudioRuntimeConfig().experimentalClientSideRenderingEnabled;
+};
+var getStudioMaxTimelineTracks = () => {
+  return getStudioRuntimeConfig().maxTimelineTracks ?? DEFAULT_TIMELINE_TRACKS;
+};
+var getStudioBufferStateDelayInMilliseconds = () => {
+  return getStudioRuntimeConfig().bufferStateDelayInMilliseconds ?? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS;
+};
+
 // src/state/canvas-ref.ts
 import { createRef } from "react";
 var canvasRef = createRef();
@@ -995,18 +1031,18 @@ var KeybindingContextProvider = ({ children }) => {
 };
 
 // src/helpers/use-keybinding.ts
-if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+if (!getStudioKeyboardShortcutsEnabled()) {
   console.warn("Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.");
 }
 var areKeyboardShortcutsDisabled = () => {
-  return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
+  return !getStudioKeyboardShortcutsEnabled();
 };
 var useKeybinding = () => {
   const [paneId] = useState3(() => String(Math.random()));
   const context = useContext4(KeybindingContext);
   const { isHighestContext } = useZIndex();
   const registerKeybinding = useCallback4((options) => {
-    if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!getStudioKeyboardShortcutsEnabled()) {
       return {
         unregister: () => {
           return;
@@ -2042,7 +2078,7 @@ var PreviewServerConnection = ({ children, readOnlyStudio }) => {
 };
 
 // src/helpers/show-browser-rendering.ts
-var SHOW_BROWSER_RENDERING = Boolean(process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED);
+var SHOW_BROWSER_RENDERING = getStudioExperimentalClientSideRenderingEnabled();
 
 // src/helpers/timeline-node-path-key.ts
 import { stringifySequenceExpandedRowKey } from "@remotion/studio-shared";
@@ -3787,7 +3823,7 @@ var MenuContent = ({
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
   useEffect11(() => {
-    if (!keybindings.isHighestContext || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!keybindings.isHighestContext || !getStudioKeyboardShortcutsEnabled()) {
       return;
     }
     const onKeyDown = (event) => {
@@ -6143,8 +6179,7 @@ import {
 } from "remotion";
 
 // src/helpers/interactivity-enabled.ts
-var interactivityEnabled = process.env.INTERACTIVITY_ENABLED;
-var studioInteractivityEnabled = interactivityEnabled === undefined || interactivityEnabled === null ? true : interactivityEnabled !== false && interactivityEnabled !== "false";
+var studioInteractivityEnabled = getStudioInteractivityEnabled();
 
 // src/components/ExpandedTracksProvider.tsx
 import { createContext as createContext13, useCallback as useCallback24, useMemo as useMemo24, useState as useState20 } from "react";
@@ -10145,7 +10180,7 @@ var GlobalKeybindings = ({ readOnlyStudio }) => {
       commandCtrlKey: true,
       preventDefault: true
     });
-    const cmdIKey = process.env.ASK_AI_ENABLED ? keybindings.registerKeybinding({
+    const cmdIKey = getStudioAskAIEnabled() ? keybindings.registerKeybinding({
       event: "keydown",
       key: "i",
       callback: () => {
@@ -11770,7 +11805,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
         label: "Tools",
         leaveLeftPadding: false,
         items: [
-          process.env.ASK_AI_ENABLED ? {
+          getStudioAskAIEnabled() ? {
             id: "ask-ai",
             value: "ask-ai",
             label: "Ask AI",
@@ -24792,11 +24827,12 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   useEffect42(() => {
     fetchMetadata();
   }, [fetchMetadata]);
-  const updateElementInstallTarget = useCallback51(() => {
+  const updateElementInstallTarget = useCallback51((requestId) => {
     if (previewServerClientId === null) {
       return;
     }
     callApi("/api/update-element-install-target", {
+      requestId,
       clientId: previewServerClientId,
       compositionFile: canInstallElements ? compositionFile : null,
       compositionId: canInstallElements ? currentCompositionId : null,
@@ -24812,17 +24848,9 @@ var Canvas = ({ canvasContent, size: size2 }) => {
     currentCompositionId,
     previewServerClientId
   ]);
-  useEffect42(() => {
-    updateElementInstallTarget();
-    const interval = window.setInterval(updateElementInstallTarget, 2000);
-    return () => {
-      window.clearInterval(interval);
-    };
-  }, [updateElementInstallTarget]);
   useEffect42(() => {
     const markFocused = () => {
       lastFocusedAtRef.current = Date.now();
-      updateElementInstallTarget();
     };
     window.addEventListener("focus", markFocused);
     document.addEventListener("pointerdown", markFocused, { capture: true });
@@ -24830,7 +24858,15 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       window.removeEventListener("focus", markFocused);
       document.removeEventListener("pointerdown", markFocused, { capture: true });
     };
-  }, [updateElementInstallTarget]);
+  }, []);
+  useEffect42(() => {
+    return subscribeToEvent("request-element-install-target", (event) => {
+      if (event.type !== "request-element-install-target") {
+        return;
+      }
+      updateElementInstallTarget(event.requestId);
+    });
+  }, [subscribeToEvent, updateElementInstallTarget]);
   useEffect42(() => {
     if (installingElementName === null) {
       return;
@@ -47768,9 +47804,8 @@ import React207, { useCallback as useCallback166, useContext as useContext120, u
 import { Internals as Internals98 } from "remotion";
 
 // src/components/Timeline/MaxTimelineTracks.tsx
-import { DEFAULT_TIMELINE_TRACKS } from "@remotion/studio-shared";
 import { jsxs as jsxs128 } from "react/jsx-runtime";
-var MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === "undefined" || process.env.MAX_TIMELINE_TRACKS === null ? DEFAULT_TIMELINE_TRACKS : Number(process.env.MAX_TIMELINE_TRACKS);
+var MAX_TIMELINE_TRACKS = getStudioMaxTimelineTracks();
 var MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 var container39 = {
   height: MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
@@ -49787,7 +49822,7 @@ var TimelineSequenceItem = ({
     await saveName(name);
   }, [saveName]);
   React194.useEffect(() => {
-    if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!canRenameSelectedSequence || !getStudioKeyboardShortcutsEnabled()) {
       setIsRenaming(false);
       return;
     }
@@ -57060,7 +57095,7 @@ var KeyboardShortcutsExplainer = () => {
                   })
                 ]
               }),
-              process.env.ASK_AI_ENABLED && /* @__PURE__ */ jsxs164(Fragment57, {
+              getStudioAskAIEnabled() && /* @__PURE__ */ jsxs164(Fragment57, {
                 children: [
                   /* @__PURE__ */ jsx304("br", {}),
                   /* @__PURE__ */ jsx304("div", {
@@ -65639,7 +65674,7 @@ var Modals = ({ readOnlyStudio }) => {
       modalContextType && modalContextType.type === "confirmation-dialog" && /* @__PURE__ */ jsx360(ConfirmationDialog, {
         state: modalContextType
       }),
-      process.env.ASK_AI_ENABLED && /* @__PURE__ */ jsx360(AskAiModal, {})
+      getStudioAskAIEnabled() && /* @__PURE__ */ jsx360(AskAiModal, {})
     ]
   });
 };
@@ -65727,8 +65762,7 @@ var background = {
   flexDirection: "column",
   position: "absolute"
 };
-var DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
-var BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === "undefined" || process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === null ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
+var BUFFER_STATE_DELAY_IN_MILLISECONDS = getStudioBufferStateDelayInMilliseconds();
 var Editor = ({ Root, readOnlyStudio }) => {
   const [drawElement, setDrawElement] = useState125(null);
   const size3 = PlayerInternals23.useElementSize(drawElement, {

package/dist/esm/previewEntry.mjs

@@ -447,19 +447,55 @@ var KeybindingContextProvider = ({ children }) => {
   });
 };
 
+// src/helpers/studio-runtime-config.ts
+import { DEFAULT_TIMELINE_TRACKS } from "@remotion/studio-shared";
+var DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
+var defaultStudioRuntimeConfig = {
+  askAIEnabled: false,
+  bufferStateDelayInMilliseconds: null,
+  experimentalClientSideRenderingEnabled: false,
+  interactivityEnabled: true,
+  keyboardShortcutsEnabled: true,
+  maxTimelineTracks: null
+};
+var getStudioRuntimeConfig = () => {
+  if (typeof window === "undefined") {
+    return defaultStudioRuntimeConfig;
+  }
+  return window.remotion_studioConfig ?? defaultStudioRuntimeConfig;
+};
+var getStudioAskAIEnabled = () => {
+  return getStudioRuntimeConfig().askAIEnabled;
+};
+var getStudioInteractivityEnabled = () => {
+  return getStudioRuntimeConfig().interactivityEnabled;
+};
+var getStudioKeyboardShortcutsEnabled = () => {
+  return getStudioRuntimeConfig().keyboardShortcutsEnabled;
+};
+var getStudioExperimentalClientSideRenderingEnabled = () => {
+  return getStudioRuntimeConfig().experimentalClientSideRenderingEnabled;
+};
+var getStudioMaxTimelineTracks = () => {
+  return getStudioRuntimeConfig().maxTimelineTracks ?? DEFAULT_TIMELINE_TRACKS;
+};
+var getStudioBufferStateDelayInMilliseconds = () => {
+  return getStudioRuntimeConfig().bufferStateDelayInMilliseconds ?? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS;
+};
+
 // src/helpers/use-keybinding.ts
-if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+if (!getStudioKeyboardShortcutsEnabled()) {
   console.warn("Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.");
 }
 var areKeyboardShortcutsDisabled = () => {
-  return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
+  return !getStudioKeyboardShortcutsEnabled();
 };
 var useKeybinding = () => {
   const [paneId] = useState3(() => String(Math.random()));
   const context = useContext(KeybindingContext);
   const { isHighestContext } = useZIndex();
   const registerKeybinding = useCallback2((options) => {
-    if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!getStudioKeyboardShortcutsEnabled()) {
       return {
         unregister: () => {
           return;
@@ -2278,7 +2314,7 @@ var MenuContent = ({
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
   useEffect8(() => {
-    if (!keybindings.isHighestContext || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!keybindings.isHighestContext || !getStudioKeyboardShortcutsEnabled()) {
       return;
     }
     const onKeyDown = (event) => {
@@ -4168,7 +4204,7 @@ var pickColor = () => {
 };
 
 // src/helpers/show-browser-rendering.ts
-var SHOW_BROWSER_RENDERING = Boolean(process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED);
+var SHOW_BROWSER_RENDERING = getStudioExperimentalClientSideRenderingEnabled();
 
 // src/helpers/use-menu-structure.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -4812,7 +4848,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
         label: "Tools",
         leaveLeftPadding: false,
         items: [
-          process.env.ASK_AI_ENABLED ? {
+          getStudioAskAIEnabled() ? {
             id: "ask-ai",
             value: "ask-ai",
             label: "Ask AI",
@@ -8591,8 +8627,7 @@ import {
 } from "remotion";
 
 // src/helpers/interactivity-enabled.ts
-var interactivityEnabled = process.env.INTERACTIVITY_ENABLED;
-var studioInteractivityEnabled = interactivityEnabled === undefined || interactivityEnabled === null ? true : interactivityEnabled !== false && interactivityEnabled !== "false";
+var studioInteractivityEnabled = getStudioInteractivityEnabled();
 
 // src/helpers/timeline-node-path-key.ts
 import { stringifySequenceExpandedRowKey } from "@remotion/studio-shared";
@@ -23117,11 +23152,12 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   useEffect40(() => {
     fetchMetadata();
   }, [fetchMetadata]);
-  const updateElementInstallTarget = useCallback43(() => {
+  const updateElementInstallTarget = useCallback43((requestId) => {
     if (previewServerClientId === null) {
       return;
     }
     callApi("/api/update-element-install-target", {
+      requestId,
       clientId: previewServerClientId,
       compositionFile: canInstallElements ? compositionFile : null,
       compositionId: canInstallElements ? currentCompositionId : null,
@@ -23137,17 +23173,9 @@ var Canvas = ({ canvasContent, size: size2 }) => {
     currentCompositionId,
     previewServerClientId
   ]);
-  useEffect40(() => {
-    updateElementInstallTarget();
-    const interval = window.setInterval(updateElementInstallTarget, 2000);
-    return () => {
-      window.clearInterval(interval);
-    };
-  }, [updateElementInstallTarget]);
   useEffect40(() => {
     const markFocused = () => {
       lastFocusedAtRef.current = Date.now();
-      updateElementInstallTarget();
     };
     window.addEventListener("focus", markFocused);
     document.addEventListener("pointerdown", markFocused, { capture: true });
@@ -23155,7 +23183,15 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       window.removeEventListener("focus", markFocused);
       document.removeEventListener("pointerdown", markFocused, { capture: true });
     };
-  }, [updateElementInstallTarget]);
+  }, []);
+  useEffect40(() => {
+    return subscribeToEvent("request-element-install-target", (event) => {
+      if (event.type !== "request-element-install-target") {
+        return;
+      }
+      updateElementInstallTarget(event.requestId);
+    });
+  }, [subscribeToEvent, updateElementInstallTarget]);
   useEffect40(() => {
     if (installingElementName === null) {
       return;
@@ -48286,7 +48322,7 @@ var GlobalKeybindings = ({ readOnlyStudio }) => {
       commandCtrlKey: true,
       preventDefault: true
     });
-    const cmdIKey = process.env.ASK_AI_ENABLED ? keybindings.registerKeybinding({
+    const cmdIKey = getStudioAskAIEnabled() ? keybindings.registerKeybinding({
       event: "keydown",
       key: "i",
       callback: () => {
@@ -48384,9 +48420,8 @@ import React208, { useCallback as useCallback166, useContext as useContext120, u
 import { Internals as Internals98 } from "remotion";
 
 // src/components/Timeline/MaxTimelineTracks.tsx
-import { DEFAULT_TIMELINE_TRACKS } from "@remotion/studio-shared";
 import { jsxs as jsxs129 } from "react/jsx-runtime";
-var MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === "undefined" || process.env.MAX_TIMELINE_TRACKS === null ? DEFAULT_TIMELINE_TRACKS : Number(process.env.MAX_TIMELINE_TRACKS);
+var MAX_TIMELINE_TRACKS = getStudioMaxTimelineTracks();
 var MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 var container40 = {
   height: MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
@@ -50403,7 +50438,7 @@ var TimelineSequenceItem = ({
     await saveName(name);
   }, [saveName]);
   React195.useEffect(() => {
-    if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    if (!canRenameSelectedSequence || !getStudioKeyboardShortcutsEnabled()) {
       setIsRenaming(false);
       return;
     }
@@ -57676,7 +57711,7 @@ var KeyboardShortcutsExplainer = () => {
                   })
                 ]
               }),
-              process.env.ASK_AI_ENABLED && /* @__PURE__ */ jsxs165(Fragment57, {
+              getStudioAskAIEnabled() && /* @__PURE__ */ jsxs165(Fragment57, {
                 children: [
                   /* @__PURE__ */ jsx306("br", {}),
                   /* @__PURE__ */ jsx306("div", {
@@ -66255,7 +66290,7 @@ var Modals = ({ readOnlyStudio }) => {
       modalContextType && modalContextType.type === "confirmation-dialog" && /* @__PURE__ */ jsx362(ConfirmationDialog, {
         state: modalContextType
       }),
-      process.env.ASK_AI_ENABLED && /* @__PURE__ */ jsx362(AskAiModal, {})
+      getStudioAskAIEnabled() && /* @__PURE__ */ jsx362(AskAiModal, {})
     ]
   });
 };
@@ -66343,8 +66378,7 @@ var background = {
   flexDirection: "column",
   position: "absolute"
 };
-var DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
-var BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === "undefined" || process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === null ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
+var BUFFER_STATE_DELAY_IN_MILLISECONDS = getStudioBufferStateDelayInMilliseconds();
 var Editor = ({ Root, readOnlyStudio }) => {
   const [drawElement, setDrawElement] = useState126(null);
   const size3 = PlayerInternals23.useElementSize(drawElement, {

package/dist/esm/renderEntry.mjs

@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-nn36hyt1.js").then(({ StudioInternals }) => {
+    import("./chunk-jrta3xaf.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/interactivity-enabled.js

@@ -1,7 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.studioInteractivityEnabled = void 0;
-const interactivityEnabled = process.env.INTERACTIVITY_ENABLED;
-exports.studioInteractivityEnabled = interactivityEnabled === undefined || interactivityEnabled === null
-    ? true
-    : interactivityEnabled !== false && interactivityEnabled !== 'false';
+const studio_runtime_config_1 = require("./studio-runtime-config");
+exports.studioInteractivityEnabled = (0, studio_runtime_config_1.getStudioInteractivityEnabled)();

package/dist/helpers/show-browser-rendering.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SHOW_BROWSER_RENDERING = void 0;
-exports.SHOW_BROWSER_RENDERING = Boolean(process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED);
+const studio_runtime_config_1 = require("./studio-runtime-config");
+exports.SHOW_BROWSER_RENDERING = (0, studio_runtime_config_1.getStudioExperimentalClientSideRenderingEnabled)();

package/dist/helpers/studio-runtime-config.d.ts

@@ -0,0 +1,7 @@
+export declare const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
+export declare const getStudioAskAIEnabled: () => boolean;
+export declare const getStudioInteractivityEnabled: () => boolean;
+export declare const getStudioKeyboardShortcutsEnabled: () => boolean;
+export declare const getStudioExperimentalClientSideRenderingEnabled: () => boolean;
+export declare const getStudioMaxTimelineTracks: () => number;
+export declare const getStudioBufferStateDelayInMilliseconds: () => number;

package/dist/helpers/studio-runtime-config.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStudioBufferStateDelayInMilliseconds = exports.getStudioMaxTimelineTracks = exports.getStudioExperimentalClientSideRenderingEnabled = exports.getStudioKeyboardShortcutsEnabled = exports.getStudioInteractivityEnabled = exports.getStudioAskAIEnabled = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
+const defaultStudioRuntimeConfig = {
+    askAIEnabled: false,
+    bufferStateDelayInMilliseconds: null,
+    experimentalClientSideRenderingEnabled: false,
+    interactivityEnabled: true,
+    keyboardShortcutsEnabled: true,
+    maxTimelineTracks: null,
+};
+const getStudioRuntimeConfig = () => {
+    var _a;
+    if (typeof window === 'undefined') {
+        return defaultStudioRuntimeConfig;
+    }
+    return (_a = window.remotion_studioConfig) !== null && _a !== void 0 ? _a : defaultStudioRuntimeConfig;
+};
+const getStudioAskAIEnabled = () => {
+    return getStudioRuntimeConfig().askAIEnabled;
+};
+exports.getStudioAskAIEnabled = getStudioAskAIEnabled;
+const getStudioInteractivityEnabled = () => {
+    return getStudioRuntimeConfig().interactivityEnabled;
+};
+exports.getStudioInteractivityEnabled = getStudioInteractivityEnabled;
+const getStudioKeyboardShortcutsEnabled = () => {
+    return getStudioRuntimeConfig().keyboardShortcutsEnabled;
+};
+exports.getStudioKeyboardShortcutsEnabled = getStudioKeyboardShortcutsEnabled;
+const getStudioExperimentalClientSideRenderingEnabled = () => {
+    return getStudioRuntimeConfig().experimentalClientSideRenderingEnabled;
+};
+exports.getStudioExperimentalClientSideRenderingEnabled = getStudioExperimentalClientSideRenderingEnabled;
+const getStudioMaxTimelineTracks = () => {
+    var _a;
+    return (_a = getStudioRuntimeConfig().maxTimelineTracks) !== null && _a !== void 0 ? _a : studio_shared_1.DEFAULT_TIMELINE_TRACKS;
+};
+exports.getStudioMaxTimelineTracks = getStudioMaxTimelineTracks;
+const getStudioBufferStateDelayInMilliseconds = () => {
+    var _a;
+    return ((_a = getStudioRuntimeConfig().bufferStateDelayInMilliseconds) !== null && _a !== void 0 ? _a : exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS);
+};
+exports.getStudioBufferStateDelayInMilliseconds = getStudioBufferStateDelayInMilliseconds;

package/dist/helpers/use-keybinding.js

@@ -4,12 +4,13 @@ exports.useKeybinding = exports.areKeyboardShortcutsDisabled = void 0;
 const react_1 = require("react");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
-if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+const studio_runtime_config_1 = require("./studio-runtime-config");
+if (!(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
     // eslint-disable-next-line no-console
     console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
 }
 const areKeyboardShortcutsDisabled = () => {
-    return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
+    return !(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)();
 };
 exports.areKeyboardShortcutsDisabled = areKeyboardShortcutsDisabled;
 const useKeybinding = () => {
@@ -17,7 +18,7 @@ const useKeybinding = () => {
     const context = (0, react_1.useContext)(keybindings_1.KeybindingContext);
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const registerKeybinding = (0, react_1.useCallback)((options) => {
-        if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+        if (!(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
             return {
                 unregister: () => undefined,
             };

package/dist/helpers/use-menu-structure.js

@@ -32,6 +32,7 @@ const mobile_layout_1 = require("./mobile-layout");
 const open_in_editor_1 = require("./open-in-editor");
 const pick_color_1 = require("./pick-color");
 const show_browser_rendering_1 = require("./show-browser-rendering");
+const studio_runtime_config_1 = require("./studio-runtime-config");
 const use_keybinding_1 = require("./use-keybinding");
 const openExternal = (link) => {
     window.open(link, '_blank');
@@ -682,7 +683,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                 label: 'Tools',
                 leaveLeftPadding: false,
                 items: [
-                    process.env.ASK_AI_ENABLED
+                    (0, studio_runtime_config_1.getStudioAskAIEnabled)()
                         ? {
                             id: 'ask-ai',
                             value: 'ask-ai',

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.488",
+	"version": "4.0.489",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,15 +25,15 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.488",
-		"@remotion/canvas-capture": "4.0.488",
-		"@remotion/player": "4.0.488",
-		"@remotion/media-utils": "4.0.488",
-		"@remotion/renderer": "4.0.488",
-		"@remotion/web-renderer": "4.0.488",
-		"@remotion/studio-shared": "4.0.488",
-		"@remotion/timeline-utils": "4.0.488",
-		"@remotion/zod-types": "4.0.488",
+		"remotion": "4.0.489",
+		"@remotion/canvas-capture": "4.0.489",
+		"@remotion/player": "4.0.489",
+		"@remotion/media-utils": "4.0.489",
+		"@remotion/renderer": "4.0.489",
+		"@remotion/web-renderer": "4.0.489",
+		"@remotion/studio-shared": "4.0.489",
+		"@remotion/timeline-utils": "4.0.489",
+		"@remotion/zod-types": "4.0.489",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.50.8",
 		"memfs": "3.4.3",
@@ -44,7 +44,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.488",
+		"@remotion/eslint-config-internal": "4.0.489",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},