@remotion/studio 4.0.446 → 4.0.447

package/dist/components/NewComposition/MenuContent.js

@@ -10,6 +10,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const MenuDivider_1 = require("../Menu/MenuDivider");
 const MenuSubItem_1 = require("../Menu/MenuSubItem");
 const styles_1 = require("../Menu/styles");
+const menu_typeahead_1 = require("./menu-typeahead");
 const BORDER_SIZE = 1;
 const container = {
     paddingTop: styles_1.MENU_VERTICAL_PADDING,
@@ -26,6 +27,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     const containerRef = (0, react_1.useRef)(null);
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
+    const typeaheadQueryRef = (0, react_1.useRef)('');
+    const typeaheadTimeoutRef = (0, react_1.useRef)(null);
     if (values[0].type === 'divider') {
         throw new Error('first value cant be divide');
     }
@@ -38,6 +41,13 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     const onItemSelected = (0, react_1.useCallback)((id) => {
         setSelectedItem(id);
     }, []);
+    const clearTypeahead = (0, react_1.useCallback)(() => {
+        typeaheadQueryRef.current = '';
+        if (typeaheadTimeoutRef.current !== null) {
+            window.clearTimeout(typeaheadTimeoutRef.current);
+            typeaheadTimeoutRef.current = null;
+        }
+    }, []);
     const isItemSelectable = (0, react_1.useCallback)((v) => {
         return v.type !== 'divider' && !v.disabled;
     }, []);
@@ -114,6 +124,35 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         }
         setSubMenuActivated('without-mouse');
     }, [onNextMenu, selectedItem, values]);
+    const onTypeahead = (0, react_1.useCallback)((event) => {
+        if (event.ctrlKey ||
+            event.metaKey ||
+            event.altKey ||
+            event.key.length !== 1 ||
+            event.key.trim().length === 0) {
+            return;
+        }
+        const { activeElement } = document;
+        if (activeElement instanceof HTMLInputElement ||
+            activeElement instanceof HTMLTextAreaElement) {
+            return;
+        }
+        typeaheadQueryRef.current = `${typeaheadQueryRef.current}${event.key}`;
+        const matchedId = (0, menu_typeahead_1.findTypeaheadMenuItem)({
+            query: typeaheadQueryRef.current,
+            values,
+        });
+        if (matchedId !== null) {
+            setSelectedItem(matchedId);
+        }
+        if (typeaheadTimeoutRef.current !== null) {
+            window.clearTimeout(typeaheadTimeoutRef.current);
+        }
+        typeaheadTimeoutRef.current = window.setTimeout(() => {
+            typeaheadQueryRef.current = '';
+            typeaheadTimeoutRef.current = null;
+        }, 700);
+    }, [values]);
     const containerWithHeight = (0, react_1.useMemo)(() => {
         const containerStyles = { ...container };
         if (fixedHeight === null) {
@@ -127,6 +166,25 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         }
         return containerStyles;
     }, [fixedHeight, isMobileLayout]);
+    (0, react_1.useEffect)(() => {
+        if (!keybindings.isHighestContext ||
+            !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+            return;
+        }
+        const onKeyDown = (event) => {
+            onTypeahead(event);
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+            clearTypeahead();
+        };
+    }, [clearTypeahead, keybindings.isHighestContext, onTypeahead]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clearTypeahead();
+        };
+    }, [clearTypeahead]);
     (0, react_1.useEffect)(() => {
         const escapeBinding = keybindings.registerKeybinding({
             event: 'keydown',

package/dist/components/NewComposition/menu-typeahead.d.ts

@@ -0,0 +1,5 @@
+import type { ComboboxValue } from './ComboBox';
+export declare const findTypeaheadMenuItem: ({ query, values, }: {
+    query: string;
+    values: ComboboxValue[];
+}) => string | null;

package/dist/components/NewComposition/menu-typeahead.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findTypeaheadMenuItem = void 0;
+const getLabelToMatch = (value) => {
+    if (value.type === 'divider' || value.disabled) {
+        return null;
+    }
+    if (typeof value.label === 'string') {
+        return value.label;
+    }
+    return null;
+};
+const findTypeaheadMenuItem = ({ query, values, }) => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (normalizedQuery.length === 0) {
+        return null;
+    }
+    const matched = values.find((value) => {
+        const label = getLabelToMatch(value);
+        return label ? label.toLowerCase().startsWith(normalizedQuery) : false;
+    });
+    if (!matched || matched.type === 'divider') {
+        return null;
+    }
+    return matched.id;
+};
+exports.findTypeaheadMenuItem = findTypeaheadMenuItem;

package/dist/components/RenderButton.js

@@ -262,6 +262,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
             initialTransparent: null,
             initialMuted: null,
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
+            initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas,
         });
     }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
     const onClick = (0, react_1.useCallback)(() => {

package/dist/components/RenderModal/OptionExplainer.js

@@ -19,8 +19,9 @@ const padding = {
 const title = {
     fontSize: 14,
 };
+const DESCRIPTION_FONT_SIZE_PX = 14;
 const description = {
-    fontSize: 14,
+    fontSize: DESCRIPTION_FONT_SIZE_PX,
     maxWidth: 400,
 };
 const link = {
@@ -56,7 +57,14 @@ const OptionExplainer = ({ option }) => {
                     jsx_runtime_1.jsxs("div", { children: [
                             jsx_runtime_1.jsx("strong", { style: title, children: option.name }), option.docLink ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })
-                                ] })) : null] }), jsx_runtime_1.jsx("div", { style: description, children: option.description('ssr') })
+                                ] })) : null] }), jsx_runtime_1.jsxs("div", { style: description, children: [
+                            jsx_runtime_1.jsx("style", { children: `
+							.__remotion-option-explainer-description a,
+							.__remotion-option-explainer-description code {
+								font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
+							}
+						` }), jsx_runtime_1.jsx("div", { className: "__remotion-option-explainer-description", children: option.description('ssr') })
+                        ] })
                 ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsxs("div", { children: [
                     jsx_runtime_1.jsxs("div", { style: infoRow, children: [
                             jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "CLI flag" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsxs("code", { children: ["--", option.cliFlag] }), jsx_runtime_1.jsx("div", { style: copyWrapper, children: jsx_runtime_1.jsx(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })

package/dist/components/RenderModal/WebRenderModal.js

@@ -80,7 +80,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
-const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, }) => {
+const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialAllowHtmlInCanvas, }) => {
     var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -124,6 +124,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const [muted, setMuted] = (0, react_1.useState)(initialMuted !== null && initialMuted !== void 0 ? initialMuted : false);
     const [scale, setScale] = (0, react_1.useState)(initialScale !== null && initialScale !== void 0 ? initialScale : 1);
     const [licenseKey, setLicenseKey] = (0, react_1.useState)(initialLicenseKey);
+    const [allowHtmlInCanvas, setAllowHtmlInCanvas] = (0, react_1.useState)(initialAllowHtmlInCanvas !== null && initialAllowHtmlInCanvas !== void 0 ? initialAllowHtmlInCanvas : false);
     const encodableAudioCodecs = (0, use_encodable_audio_codecs_1.useEncodableAudioCodecs)(container);
     const encodableVideoCodecs = (0, use_encodable_video_codecs_1.useEncodableVideoCodecs)(container);
     const effectiveAudioCodec = (0, react_1.useMemo)(() => {
@@ -336,6 +337,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 logLevel,
                 licenseKey,
                 scale,
+                allowHtmlInCanvas,
             }, compositionRef);
         }
         else {
@@ -362,6 +364,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 logLevel,
                 licenseKey,
                 scale,
+                allowHtmlInCanvas,
             }, compositionRef);
         }
         setSidebarCollapsedState({ left: null, right: 'expanded' });
@@ -402,6 +405,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         addClientStillJob,
         addClientVideoJob,
         scale,
+        allowHtmlInCanvas,
     ]);
     return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
@@ -426,7 +430,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,
-                            } })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { renderMode: renderMode, muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
+                            } })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { renderMode: renderMode, muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, allowHtmlInCanvas: allowHtmlInCanvas, setAllowHtmlInCanvas: setAllowHtmlInCanvas })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/WebRenderModalAdvanced.d.ts

@@ -8,6 +8,8 @@ type WebRenderModalAdvancedProps = {
     readonly setMediaCacheSizeInBytes: React.Dispatch<React.SetStateAction<number | null>>;
     readonly hardwareAcceleration: 'no-preference' | 'prefer-hardware' | 'prefer-software';
     readonly setHardwareAcceleration: (value: 'no-preference' | 'prefer-hardware' | 'prefer-software') => void;
+    readonly allowHtmlInCanvas: boolean;
+    readonly setAllowHtmlInCanvas: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export declare const WebRenderModalAdvanced: React.FC<WebRenderModalAdvancedProps>;
 export {};

package/dist/components/RenderModal/WebRenderModalAdvanced.js

@@ -13,7 +13,7 @@ const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const tabContainer = {
     flex: 1,
 };
-const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, }) => {
+const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, allowHtmlInCanvas, setAllowHtmlInCanvas, }) => {
     const toggleCustomMediaCacheSizeInBytes = (0, react_1.useCallback)(() => {
         setMediaCacheSizeInBytes((previous) => {
             if (previous === null) {
@@ -22,6 +22,9 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
             return null;
         });
     }, [setMediaCacheSizeInBytes]);
+    const toggleAllowHtmlInCanvas = (0, react_1.useCallback)(() => {
+        setAllowHtmlInCanvas((prev) => !prev);
+    }, [setAllowHtmlInCanvas]);
     const changeMediaCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
         setMediaCacheSizeInBytes((prev) => {
             if (prev === null) {
@@ -77,6 +80,11 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })
                 ] }), mediaCacheSizeInBytes === null ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, min: 0, max: 10000000000, step: 10 * 1024 * 1024, value: mediaCacheSizeInBytes, onValueChanged: changeMediaCacheSizeInBytes })), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Hardware Acceleration" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, title: "Hardware Acceleration" }) })
-                ] })) : null] }));
+                ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Allow HTML-in-canvas ",
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "allowHtmlInCanvasOption" })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: allowHtmlInCanvas, onChange: toggleAllowHtmlInCanvas, name: "allow-html-in-canvas" }) })
+                ] })
+        ] }));
 };
 exports.WebRenderModalAdvanced = WebRenderModalAdvanced;

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -25,7 +25,7 @@ const ClientRenderQueueProcessor = () => {
         if (!compositionRef) {
             throw new Error(`Composition not found for job ${job.id}`);
         }
-        const { blob } = await (0, web_renderer_1.renderStillOnWeb)({
+        const blob = await (await (0, web_renderer_1.renderStillOnWeb)({
             composition: {
                 component: compositionRef.component,
                 width: compositionRef.width,
@@ -37,7 +37,6 @@ const ClientRenderQueueProcessor = () => {
                 id: job.compositionId,
             },
             frame: job.frame,
-            imageFormat: job.imageFormat,
             inputProps: job.inputProps,
             delayRenderTimeoutInMilliseconds: job.delayRenderTimeout,
             mediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
@@ -45,7 +44,8 @@ const ClientRenderQueueProcessor = () => {
             licenseKey: (_b = job.licenseKey) !== null && _b !== void 0 ? _b : undefined,
             scale: job.scale,
             signal,
-        });
+            allowHtmlInCanvas: job.allowHtmlInCanvas,
+        })).blob({ format: job.imageFormat });
         return {
             getBlob: () => Promise.resolve(blob),
             width: compositionRef.width,
@@ -97,6 +97,7 @@ const ClientRenderQueueProcessor = () => {
             },
             outputTarget: 'web-fs',
             licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
+            allowHtmlInCanvas: job.allowHtmlInCanvas,
         });
         return {
             getBlob,

package/dist/components/RenderQueue/client-side-render-types.d.ts

@@ -40,6 +40,7 @@ type ClientRenderJobBase = {
     logLevel: LogLevel;
     licenseKey: string | null;
     scale: number;
+    allowHtmlInCanvas: boolean;
 };
 export type ClientStillRenderJob = ClientRenderJobBase & {
     type: 'client-still';

package/dist/esm/{chunk-2dkkw8x5.js → chunk-ase93hmz.js}

@@ -2440,6 +2440,34 @@ var MenuSubItem = ({
   });
 };
 
+// src/components/NewComposition/menu-typeahead.ts
+var getLabelToMatch = (value) => {
+  if (value.type === "divider" || value.disabled) {
+    return null;
+  }
+  if (typeof value.label === "string") {
+    return value.label;
+  }
+  return null;
+};
+var findTypeaheadMenuItem = ({
+  query,
+  values
+}) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (normalizedQuery.length === 0) {
+    return null;
+  }
+  const matched = values.find((value) => {
+    const label = getLabelToMatch(value);
+    return label ? label.toLowerCase().startsWith(normalizedQuery) : false;
+  });
+  if (!matched || matched.type === "divider") {
+    return null;
+  }
+  return matched.id;
+};
+
 // src/components/NewComposition/MenuContent.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
 var BORDER_SIZE = 1;
@@ -2467,6 +2495,8 @@ var MenuContent = ({
   const containerRef = useRef8(null);
   const isMobileLayout = useMobileLayout();
   const [subMenuActivated, setSubMenuActivated] = useState12(false);
+  const typeaheadQueryRef = useRef8("");
+  const typeaheadTimeoutRef = useRef8(null);
   if (values[0].type === "divider") {
     throw new Error("first value cant be divide");
   }
@@ -2477,6 +2507,13 @@ var MenuContent = ({
   const onItemSelected = useCallback11((id) => {
     setSelectedItem(id);
   }, []);
+  const clearTypeahead = useCallback11(() => {
+    typeaheadQueryRef.current = "";
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+      typeaheadTimeoutRef.current = null;
+    }
+  }, []);
   const isItemSelectable = useCallback11((v) => {
     return v.type !== "divider" && !v.disabled;
   }, []);
@@ -2550,6 +2587,30 @@ var MenuContent = ({
     }
     setSubMenuActivated("without-mouse");
   }, [onNextMenu, selectedItem, values]);
+  const onTypeahead = useCallback11((event) => {
+    if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1 || event.key.trim().length === 0) {
+      return;
+    }
+    const { activeElement } = document;
+    if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
+      return;
+    }
+    typeaheadQueryRef.current = `${typeaheadQueryRef.current}${event.key}`;
+    const matchedId = findTypeaheadMenuItem({
+      query: typeaheadQueryRef.current,
+      values
+    });
+    if (matchedId !== null) {
+      setSelectedItem(matchedId);
+    }
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+    }
+    typeaheadTimeoutRef.current = window.setTimeout(() => {
+      typeaheadQueryRef.current = "";
+      typeaheadTimeoutRef.current = null;
+    }, 700);
+  }, [values]);
   const containerWithHeight = useMemo15(() => {
     const containerStyles = { ...container6 };
     if (fixedHeight === null) {
@@ -2562,6 +2623,24 @@ var MenuContent = ({
     }
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
+  useEffect10(() => {
+    if (!keybindings.isHighestContext || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      onTypeahead(event);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      clearTypeahead();
+    };
+  }, [clearTypeahead, keybindings.isHighestContext, onTypeahead]);
+  useEffect10(() => {
+    return () => {
+      clearTypeahead();
+    };
+  }, [clearTypeahead]);
   useEffect10(() => {
     const escapeBinding = keybindings.registerKeybinding({
       event: "keydown",
@@ -16214,7 +16293,7 @@ var ClientRenderQueueProcessor = () => {
     if (!compositionRef) {
       throw new Error(`Composition not found for job ${job.id}`);
     }
-    const { blob } = await renderStillOnWeb({
+    const blob = await (await renderStillOnWeb({
       composition: {
         component: compositionRef.component,
         width: compositionRef.width,
@@ -16226,15 +16305,15 @@ var ClientRenderQueueProcessor = () => {
         id: job.compositionId
       },
       frame: job.frame,
-      imageFormat: job.imageFormat,
       inputProps: job.inputProps,
       delayRenderTimeoutInMilliseconds: job.delayRenderTimeout,
       mediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       logLevel: job.logLevel,
       licenseKey: job.licenseKey ?? undefined,
       scale: job.scale,
-      signal
-    });
+      signal,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
+    })).blob({ format: job.imageFormat });
     return {
       getBlob: () => Promise.resolve(blob),
       width: compositionRef.width,
@@ -16284,7 +16363,8 @@ var ClientRenderQueueProcessor = () => {
         });
       },
       outputTarget: "web-fs",
-      licenseKey: job.licenseKey ?? undefined
+      licenseKey: job.licenseKey ?? undefined,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
     });
     return {
       getBlob,
@@ -16962,7 +17042,8 @@ var makeClientRetryPayload = (job) => {
     initialStillImageFormat: job.type === "client-still" ? job.imageFormat : "png",
     initialKeyframeIntervalInSeconds: job.type === "client-video" ? job.keyframeIntervalInSeconds : null,
     initialMuted: job.type === "client-video" ? job.muted : null,
-    initialTransparent: job.type === "client-video" ? job.transparent : null
+    initialTransparent: job.type === "client-video" ? job.transparent : null,
+    initialAllowHtmlInCanvas: job.allowHtmlInCanvas
   };
 };
 
@@ -18820,7 +18901,8 @@ var RenderButton = ({
       initialKeyframeIntervalInSeconds: null,
       initialTransparent: null,
       initialMuted: null,
-      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes
+      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
+      initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback93(() => {
@@ -28253,8 +28335,9 @@ var padding3 = {
 var title6 = {
   fontSize: 14
 };
+var DESCRIPTION_FONT_SIZE_PX = 14;
 var description = {
-  fontSize: 14,
+  fontSize: DESCRIPTION_FONT_SIZE_PX,
   maxWidth: 400
 };
 var link2 = {
@@ -28313,9 +28396,22 @@ var OptionExplainer = ({ option }) => {
               }) : null
             ]
           }),
-          /* @__PURE__ */ jsx250("div", {
+          /* @__PURE__ */ jsxs126("div", {
             style: description,
-            children: option.description("ssr")
+            children: [
+              /* @__PURE__ */ jsx250("style", {
+                children: `
+							.__remotion-option-explainer-description a,
+							.__remotion-option-explainer-description code {
+								font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
+							}
+						`
+              }),
+              /* @__PURE__ */ jsx250("div", {
+                className: "__remotion-option-explainer-description",
+                children: option.description("ssr")
+              })
+            ]
           })
         ]
       }),
@@ -32433,7 +32529,9 @@ var WebRenderModalAdvanced = ({
   mediaCacheSizeInBytes,
   setMediaCacheSizeInBytes,
   hardwareAcceleration,
-  setHardwareAcceleration
+  setHardwareAcceleration,
+  allowHtmlInCanvas,
+  setAllowHtmlInCanvas
 }) => {
   const toggleCustomMediaCacheSizeInBytes = useCallback142(() => {
     setMediaCacheSizeInBytes((previous) => {
@@ -32443,6 +32541,9 @@ var WebRenderModalAdvanced = ({
       return null;
     });
   }, [setMediaCacheSizeInBytes]);
+  const toggleAllowHtmlInCanvas = useCallback142(() => {
+    setAllowHtmlInCanvas((prev) => !prev);
+  }, [setAllowHtmlInCanvas]);
   const changeMediaCacheSizeInBytes = useCallback142((cb) => {
     setMediaCacheSizeInBytes((prev) => {
       if (prev === null) {
@@ -32554,7 +32655,32 @@ var WebRenderModalAdvanced = ({
             })
           })
         ]
-      }) : null
+      }) : null,
+      /* @__PURE__ */ jsxs145("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsxs145("div", {
+            style: label5,
+            children: [
+              "Allow HTML-in-canvas ",
+              /* @__PURE__ */ jsx275(Spacing, {
+                x: 0.5
+              }),
+              /* @__PURE__ */ jsx275(OptionExplainerBubble, {
+                id: "allowHtmlInCanvasOption"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx275("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx275(Checkbox, {
+              checked: allowHtmlInCanvas,
+              onChange: toggleAllowHtmlInCanvas,
+              name: "allow-html-in-canvas"
+            })
+          })
+        ]
+      })
     ]
   });
 };
@@ -33571,7 +33697,8 @@ var WebRenderModal = ({
   initialHardwareAcceleration,
   initialKeyframeIntervalInSeconds,
   initialTransparent,
-  initialMuted
+  initialMuted,
+  initialAllowHtmlInCanvas
 }) => {
   const context = useContext95(ResolvedCompositionContext);
   const { setSelectedModal } = useContext95(ModalsContext);
@@ -33611,6 +33738,7 @@ var WebRenderModal = ({
   const [muted, setMuted] = useState95(initialMuted ?? false);
   const [scale, setScale] = useState95(initialScale ?? 1);
   const [licenseKey, setLicenseKey] = useState95(initialLicenseKey);
+  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState95(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
   const effectiveAudioCodec = useMemo147(() => {
@@ -33803,7 +33931,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     } else {
       addClientVideoJob({
@@ -33826,7 +33955,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     }
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -33866,7 +33996,8 @@ var WebRenderModal = ({
     setSelectedModal,
     addClientStillJob,
     addClientVideoJob,
-    scale
+    scale,
+    allowHtmlInCanvas
   ]);
   return /* @__PURE__ */ jsxs151("div", {
     style: outerModalStyle,
@@ -34061,7 +34192,9 @@ var WebRenderModal = ({
               mediaCacheSizeInBytes,
               setMediaCacheSizeInBytes,
               hardwareAcceleration,
-              setHardwareAcceleration
+              setHardwareAcceleration,
+              allowHtmlInCanvas,
+              setAllowHtmlInCanvas
             }) : /* @__PURE__ */ jsx283(WebRenderModalLicense, {
               licenseKey,
               setLicenseKey,

package/dist/esm/internals.mjs

@@ -2459,6 +2459,34 @@ var MenuSubItem = ({
   });
 };
 
+// src/components/NewComposition/menu-typeahead.ts
+var getLabelToMatch = (value) => {
+  if (value.type === "divider" || value.disabled) {
+    return null;
+  }
+  if (typeof value.label === "string") {
+    return value.label;
+  }
+  return null;
+};
+var findTypeaheadMenuItem = ({
+  query,
+  values
+}) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (normalizedQuery.length === 0) {
+    return null;
+  }
+  const matched = values.find((value) => {
+    const label = getLabelToMatch(value);
+    return label ? label.toLowerCase().startsWith(normalizedQuery) : false;
+  });
+  if (!matched || matched.type === "divider") {
+    return null;
+  }
+  return matched.id;
+};
+
 // src/components/NewComposition/MenuContent.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
 var BORDER_SIZE = 1;
@@ -2486,6 +2514,8 @@ var MenuContent = ({
   const containerRef = useRef8(null);
   const isMobileLayout = useMobileLayout();
   const [subMenuActivated, setSubMenuActivated] = useState12(false);
+  const typeaheadQueryRef = useRef8("");
+  const typeaheadTimeoutRef = useRef8(null);
   if (values[0].type === "divider") {
     throw new Error("first value cant be divide");
   }
@@ -2496,6 +2526,13 @@ var MenuContent = ({
   const onItemSelected = useCallback11((id) => {
     setSelectedItem(id);
   }, []);
+  const clearTypeahead = useCallback11(() => {
+    typeaheadQueryRef.current = "";
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+      typeaheadTimeoutRef.current = null;
+    }
+  }, []);
   const isItemSelectable = useCallback11((v) => {
     return v.type !== "divider" && !v.disabled;
   }, []);
@@ -2569,6 +2606,30 @@ var MenuContent = ({
     }
     setSubMenuActivated("without-mouse");
   }, [onNextMenu, selectedItem, values]);
+  const onTypeahead = useCallback11((event) => {
+    if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1 || event.key.trim().length === 0) {
+      return;
+    }
+    const { activeElement } = document;
+    if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
+      return;
+    }
+    typeaheadQueryRef.current = `${typeaheadQueryRef.current}${event.key}`;
+    const matchedId = findTypeaheadMenuItem({
+      query: typeaheadQueryRef.current,
+      values
+    });
+    if (matchedId !== null) {
+      setSelectedItem(matchedId);
+    }
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+    }
+    typeaheadTimeoutRef.current = window.setTimeout(() => {
+      typeaheadQueryRef.current = "";
+      typeaheadTimeoutRef.current = null;
+    }, 700);
+  }, [values]);
   const containerWithHeight = useMemo15(() => {
     const containerStyles = { ...container6 };
     if (fixedHeight === null) {
@@ -2581,6 +2642,24 @@ var MenuContent = ({
     }
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
+  useEffect10(() => {
+    if (!keybindings.isHighestContext || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      onTypeahead(event);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      clearTypeahead();
+    };
+  }, [clearTypeahead, keybindings.isHighestContext, onTypeahead]);
+  useEffect10(() => {
+    return () => {
+      clearTypeahead();
+    };
+  }, [clearTypeahead]);
   useEffect10(() => {
     const escapeBinding = keybindings.registerKeybinding({
       event: "keydown",
@@ -16233,7 +16312,7 @@ var ClientRenderQueueProcessor = () => {
     if (!compositionRef) {
       throw new Error(`Composition not found for job ${job.id}`);
     }
-    const { blob } = await renderStillOnWeb({
+    const blob = await (await renderStillOnWeb({
       composition: {
         component: compositionRef.component,
         width: compositionRef.width,
@@ -16245,15 +16324,15 @@ var ClientRenderQueueProcessor = () => {
         id: job.compositionId
       },
       frame: job.frame,
-      imageFormat: job.imageFormat,
       inputProps: job.inputProps,
       delayRenderTimeoutInMilliseconds: job.delayRenderTimeout,
       mediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       logLevel: job.logLevel,
       licenseKey: job.licenseKey ?? undefined,
       scale: job.scale,
-      signal
-    });
+      signal,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
+    })).blob({ format: job.imageFormat });
     return {
       getBlob: () => Promise.resolve(blob),
       width: compositionRef.width,
@@ -16303,7 +16382,8 @@ var ClientRenderQueueProcessor = () => {
         });
       },
       outputTarget: "web-fs",
-      licenseKey: job.licenseKey ?? undefined
+      licenseKey: job.licenseKey ?? undefined,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
     });
     return {
       getBlob,
@@ -16981,7 +17061,8 @@ var makeClientRetryPayload = (job) => {
     initialStillImageFormat: job.type === "client-still" ? job.imageFormat : "png",
     initialKeyframeIntervalInSeconds: job.type === "client-video" ? job.keyframeIntervalInSeconds : null,
     initialMuted: job.type === "client-video" ? job.muted : null,
-    initialTransparent: job.type === "client-video" ? job.transparent : null
+    initialTransparent: job.type === "client-video" ? job.transparent : null,
+    initialAllowHtmlInCanvas: job.allowHtmlInCanvas
   };
 };
 
@@ -18839,7 +18920,8 @@ var RenderButton = ({
       initialKeyframeIntervalInSeconds: null,
       initialTransparent: null,
       initialMuted: null,
-      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes
+      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
+      initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback93(() => {
@@ -28272,8 +28354,9 @@ var padding3 = {
 var title6 = {
   fontSize: 14
 };
+var DESCRIPTION_FONT_SIZE_PX = 14;
 var description = {
-  fontSize: 14,
+  fontSize: DESCRIPTION_FONT_SIZE_PX,
   maxWidth: 400
 };
 var link2 = {
@@ -28332,9 +28415,22 @@ var OptionExplainer = ({ option }) => {
               }) : null
             ]
           }),
-          /* @__PURE__ */ jsx250("div", {
+          /* @__PURE__ */ jsxs126("div", {
             style: description,
-            children: option.description("ssr")
+            children: [
+              /* @__PURE__ */ jsx250("style", {
+                children: `
+							.__remotion-option-explainer-description a,
+							.__remotion-option-explainer-description code {
+								font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
+							}
+						`
+              }),
+              /* @__PURE__ */ jsx250("div", {
+                className: "__remotion-option-explainer-description",
+                children: option.description("ssr")
+              })
+            ]
           })
         ]
       }),
@@ -32452,7 +32548,9 @@ var WebRenderModalAdvanced = ({
   mediaCacheSizeInBytes,
   setMediaCacheSizeInBytes,
   hardwareAcceleration,
-  setHardwareAcceleration
+  setHardwareAcceleration,
+  allowHtmlInCanvas,
+  setAllowHtmlInCanvas
 }) => {
   const toggleCustomMediaCacheSizeInBytes = useCallback142(() => {
     setMediaCacheSizeInBytes((previous) => {
@@ -32462,6 +32560,9 @@ var WebRenderModalAdvanced = ({
       return null;
     });
   }, [setMediaCacheSizeInBytes]);
+  const toggleAllowHtmlInCanvas = useCallback142(() => {
+    setAllowHtmlInCanvas((prev) => !prev);
+  }, [setAllowHtmlInCanvas]);
   const changeMediaCacheSizeInBytes = useCallback142((cb) => {
     setMediaCacheSizeInBytes((prev) => {
       if (prev === null) {
@@ -32573,7 +32674,32 @@ var WebRenderModalAdvanced = ({
             })
           })
         ]
-      }) : null
+      }) : null,
+      /* @__PURE__ */ jsxs145("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsxs145("div", {
+            style: label5,
+            children: [
+              "Allow HTML-in-canvas ",
+              /* @__PURE__ */ jsx275(Spacing, {
+                x: 0.5
+              }),
+              /* @__PURE__ */ jsx275(OptionExplainerBubble, {
+                id: "allowHtmlInCanvasOption"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx275("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx275(Checkbox, {
+              checked: allowHtmlInCanvas,
+              onChange: toggleAllowHtmlInCanvas,
+              name: "allow-html-in-canvas"
+            })
+          })
+        ]
+      })
     ]
   });
 };
@@ -33590,7 +33716,8 @@ var WebRenderModal = ({
   initialHardwareAcceleration,
   initialKeyframeIntervalInSeconds,
   initialTransparent,
-  initialMuted
+  initialMuted,
+  initialAllowHtmlInCanvas
 }) => {
   const context = useContext95(ResolvedCompositionContext);
   const { setSelectedModal } = useContext95(ModalsContext);
@@ -33630,6 +33757,7 @@ var WebRenderModal = ({
   const [muted, setMuted] = useState95(initialMuted ?? false);
   const [scale, setScale] = useState95(initialScale ?? 1);
   const [licenseKey, setLicenseKey] = useState95(initialLicenseKey);
+  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState95(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
   const effectiveAudioCodec = useMemo147(() => {
@@ -33822,7 +33950,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     } else {
       addClientVideoJob({
@@ -33845,7 +33974,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     }
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -33885,7 +34015,8 @@ var WebRenderModal = ({
     setSelectedModal,
     addClientStillJob,
     addClientVideoJob,
-    scale
+    scale,
+    allowHtmlInCanvas
   ]);
   return /* @__PURE__ */ jsxs151("div", {
     style: outerModalStyle,
@@ -34080,7 +34211,9 @@ var WebRenderModal = ({
               mediaCacheSizeInBytes,
               setMediaCacheSizeInBytes,
               hardwareAcceleration,
-              setHardwareAcceleration
+              setHardwareAcceleration,
+              allowHtmlInCanvas,
+              setAllowHtmlInCanvas
             }) : /* @__PURE__ */ jsx283(WebRenderModalLicense, {
               licenseKey,
               setLicenseKey,

package/dist/esm/previewEntry.mjs

@@ -4689,6 +4689,34 @@ var MenuSubItem = ({
   });
 };
 
+// src/components/NewComposition/menu-typeahead.ts
+var getLabelToMatch = (value) => {
+  if (value.type === "divider" || value.disabled) {
+    return null;
+  }
+  if (typeof value.label === "string") {
+    return value.label;
+  }
+  return null;
+};
+var findTypeaheadMenuItem = ({
+  query,
+  values
+}) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (normalizedQuery.length === 0) {
+    return null;
+  }
+  const matched = values.find((value) => {
+    const label2 = getLabelToMatch(value);
+    return label2 ? label2.toLowerCase().startsWith(normalizedQuery) : false;
+  });
+  if (!matched || matched.type === "divider") {
+    return null;
+  }
+  return matched.id;
+};
+
 // src/components/NewComposition/MenuContent.tsx
 import { jsx as jsx46 } from "react/jsx-runtime";
 var BORDER_SIZE = 1;
@@ -4716,6 +4744,8 @@ var MenuContent = ({
   const containerRef = useRef10(null);
   const isMobileLayout = useMobileLayout();
   const [subMenuActivated, setSubMenuActivated] = useState19(false);
+  const typeaheadQueryRef = useRef10("");
+  const typeaheadTimeoutRef = useRef10(null);
   if (values[0].type === "divider") {
     throw new Error("first value cant be divide");
   }
@@ -4726,6 +4756,13 @@ var MenuContent = ({
   const onItemSelected = useCallback20((id) => {
     setSelectedItem(id);
   }, []);
+  const clearTypeahead = useCallback20(() => {
+    typeaheadQueryRef.current = "";
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+      typeaheadTimeoutRef.current = null;
+    }
+  }, []);
   const isItemSelectable = useCallback20((v) => {
     return v.type !== "divider" && !v.disabled;
   }, []);
@@ -4799,6 +4836,30 @@ var MenuContent = ({
     }
     setSubMenuActivated("without-mouse");
   }, [onNextMenu, selectedItem, values]);
+  const onTypeahead = useCallback20((event) => {
+    if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1 || event.key.trim().length === 0) {
+      return;
+    }
+    const { activeElement } = document;
+    if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
+      return;
+    }
+    typeaheadQueryRef.current = `${typeaheadQueryRef.current}${event.key}`;
+    const matchedId = findTypeaheadMenuItem({
+      query: typeaheadQueryRef.current,
+      values
+    });
+    if (matchedId !== null) {
+      setSelectedItem(matchedId);
+    }
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+    }
+    typeaheadTimeoutRef.current = window.setTimeout(() => {
+      typeaheadQueryRef.current = "";
+      typeaheadTimeoutRef.current = null;
+    }, 700);
+  }, [values]);
   const containerWithHeight = useMemo20(() => {
     const containerStyles = { ...container11 };
     if (fixedHeight === null) {
@@ -4811,6 +4872,24 @@ var MenuContent = ({
     }
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
+  useEffect18(() => {
+    if (!keybindings.isHighestContext || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      onTypeahead(event);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      clearTypeahead();
+    };
+  }, [clearTypeahead, keybindings.isHighestContext, onTypeahead]);
+  useEffect18(() => {
+    return () => {
+      clearTypeahead();
+    };
+  }, [clearTypeahead]);
   useEffect18(() => {
     const escapeBinding = keybindings.registerKeybinding({
       event: "keydown",
@@ -16825,7 +16904,7 @@ var ClientRenderQueueProcessor = () => {
     if (!compositionRef) {
       throw new Error(`Composition not found for job ${job.id}`);
     }
-    const { blob } = await renderStillOnWeb({
+    const blob = await (await renderStillOnWeb({
       composition: {
         component: compositionRef.component,
         width: compositionRef.width,
@@ -16837,15 +16916,15 @@ var ClientRenderQueueProcessor = () => {
         id: job.compositionId
       },
       frame: job.frame,
-      imageFormat: job.imageFormat,
       inputProps: job.inputProps,
       delayRenderTimeoutInMilliseconds: job.delayRenderTimeout,
       mediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       logLevel: job.logLevel,
       licenseKey: job.licenseKey ?? undefined,
       scale: job.scale,
-      signal
-    });
+      signal,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
+    })).blob({ format: job.imageFormat });
     return {
       getBlob: () => Promise.resolve(blob),
       width: compositionRef.width,
@@ -16895,7 +16974,8 @@ var ClientRenderQueueProcessor = () => {
         });
       },
       outputTarget: "web-fs",
-      licenseKey: job.licenseKey ?? undefined
+      licenseKey: job.licenseKey ?? undefined,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
     });
     return {
       getBlob,
@@ -17573,7 +17653,8 @@ var makeClientRetryPayload = (job) => {
     initialStillImageFormat: job.type === "client-still" ? job.imageFormat : "png",
     initialKeyframeIntervalInSeconds: job.type === "client-video" ? job.keyframeIntervalInSeconds : null,
     initialMuted: job.type === "client-video" ? job.muted : null,
-    initialTransparent: job.type === "client-video" ? job.transparent : null
+    initialTransparent: job.type === "client-video" ? job.transparent : null,
+    initialAllowHtmlInCanvas: job.allowHtmlInCanvas
   };
 };
 
@@ -19431,7 +19512,8 @@ var RenderButton = ({
       initialKeyframeIntervalInSeconds: null,
       initialTransparent: null,
       initialMuted: null,
-      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes
+      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
+      initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback94(() => {
@@ -28864,8 +28946,9 @@ var padding3 = {
 var title6 = {
   fontSize: 14
 };
+var DESCRIPTION_FONT_SIZE_PX = 14;
 var description = {
-  fontSize: 14,
+  fontSize: DESCRIPTION_FONT_SIZE_PX,
   maxWidth: 400
 };
 var link3 = {
@@ -28924,9 +29007,22 @@ var OptionExplainer = ({ option }) => {
               }) : null
             ]
           }),
-          /* @__PURE__ */ jsx253("div", {
+          /* @__PURE__ */ jsxs127("div", {
             style: description,
-            children: option.description("ssr")
+            children: [
+              /* @__PURE__ */ jsx253("style", {
+                children: `
+							.__remotion-option-explainer-description a,
+							.__remotion-option-explainer-description code {
+								font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
+							}
+						`
+              }),
+              /* @__PURE__ */ jsx253("div", {
+                className: "__remotion-option-explainer-description",
+                children: option.description("ssr")
+              })
+            ]
           })
         ]
       }),
@@ -33044,7 +33140,9 @@ var WebRenderModalAdvanced = ({
   mediaCacheSizeInBytes,
   setMediaCacheSizeInBytes,
   hardwareAcceleration,
-  setHardwareAcceleration
+  setHardwareAcceleration,
+  allowHtmlInCanvas,
+  setAllowHtmlInCanvas
 }) => {
   const toggleCustomMediaCacheSizeInBytes = useCallback143(() => {
     setMediaCacheSizeInBytes((previous) => {
@@ -33054,6 +33152,9 @@ var WebRenderModalAdvanced = ({
       return null;
     });
   }, [setMediaCacheSizeInBytes]);
+  const toggleAllowHtmlInCanvas = useCallback143(() => {
+    setAllowHtmlInCanvas((prev) => !prev);
+  }, [setAllowHtmlInCanvas]);
   const changeMediaCacheSizeInBytes = useCallback143((cb) => {
     setMediaCacheSizeInBytes((prev) => {
       if (prev === null) {
@@ -33165,7 +33266,32 @@ var WebRenderModalAdvanced = ({
             })
           })
         ]
-      }) : null
+      }) : null,
+      /* @__PURE__ */ jsxs146("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsxs146("div", {
+            style: label6,
+            children: [
+              "Allow HTML-in-canvas ",
+              /* @__PURE__ */ jsx278(Spacing, {
+                x: 0.5
+              }),
+              /* @__PURE__ */ jsx278(OptionExplainerBubble, {
+                id: "allowHtmlInCanvasOption"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx278("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx278(Checkbox, {
+              checked: allowHtmlInCanvas,
+              onChange: toggleAllowHtmlInCanvas,
+              name: "allow-html-in-canvas"
+            })
+          })
+        ]
+      })
     ]
   });
 };
@@ -34182,7 +34308,8 @@ var WebRenderModal = ({
   initialHardwareAcceleration,
   initialKeyframeIntervalInSeconds,
   initialTransparent,
-  initialMuted
+  initialMuted,
+  initialAllowHtmlInCanvas
 }) => {
   const context = useContext95(ResolvedCompositionContext);
   const { setSelectedModal } = useContext95(ModalsContext);
@@ -34222,6 +34349,7 @@ var WebRenderModal = ({
   const [muted, setMuted] = useState97(initialMuted ?? false);
   const [scale, setScale] = useState97(initialScale ?? 1);
   const [licenseKey, setLicenseKey] = useState97(initialLicenseKey);
+  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState97(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container62);
   const encodableVideoCodecs = useEncodableVideoCodecs(container62);
   const effectiveAudioCodec = useMemo147(() => {
@@ -34414,7 +34542,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     } else {
       addClientVideoJob({
@@ -34437,7 +34566,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     }
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -34477,7 +34607,8 @@ var WebRenderModal = ({
     setSelectedModal,
     addClientStillJob,
     addClientVideoJob,
-    scale
+    scale,
+    allowHtmlInCanvas
   ]);
   return /* @__PURE__ */ jsxs152("div", {
     style: outerModalStyle,
@@ -34672,7 +34803,9 @@ var WebRenderModal = ({
               mediaCacheSizeInBytes,
               setMediaCacheSizeInBytes,
               hardwareAcceleration,
-              setHardwareAcceleration
+              setHardwareAcceleration,
+              allowHtmlInCanvas,
+              setAllowHtmlInCanvas
             }) : /* @__PURE__ */ jsx286(WebRenderModalLicense, {
               licenseKey,
               setLicenseKey,

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/retry-payload.js

@@ -196,6 +196,7 @@ const makeClientRetryPayload = (job) => {
         initialKeyframeIntervalInSeconds: job.type === 'client-video' ? job.keyframeIntervalInSeconds : null,
         initialMuted: job.type === 'client-video' ? job.muted : null,
         initialTransparent: job.type === 'client-video' ? job.transparent : null,
+        initialAllowHtmlInCanvas: job.allowHtmlInCanvas,
     };
 };
 exports.makeClientRetryPayload = makeClientRetryPayload;

package/dist/state/modals.d.ts

@@ -31,6 +31,7 @@ export type WebRenderModalState = {
     initialMuted: boolean | null;
     initialLicenseKey: string | null;
     initialMediaCacheSizeInBytes: number | null;
+    initialAllowHtmlInCanvas: boolean;
 };
 export type RenderModalState = {
     type: 'server-render';

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.446",
+	"version": "4.0.447",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,13 +26,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.446",
-		"@remotion/player": "4.0.446",
-		"@remotion/media-utils": "4.0.446",
-		"@remotion/renderer": "4.0.446",
-		"@remotion/web-renderer": "4.0.446",
-		"@remotion/studio-shared": "4.0.446",
-		"@remotion/zod-types": "4.0.446",
+		"remotion": "4.0.447",
+		"@remotion/player": "4.0.447",
+		"@remotion/media-utils": "4.0.447",
+		"@remotion/renderer": "4.0.447",
+		"@remotion/web-renderer": "4.0.447",
+		"@remotion/studio-shared": "4.0.447",
+		"@remotion/zod-types": "4.0.447",
 		"mediabunny": "1.39.2",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.446",
+		"@remotion/eslint-config-internal": "4.0.447",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},