remotion-dev/remotion · error · Error

Creating canvas capture compositions is not supported in Bro

Error message

Creating canvas capture compositions is not supported in Browser Studio

What it means

applyCodemod rejects 'new-composition' codemods that carry a non-null canvasCapture payload. Canvas Capture compositions are produced by the Remotion Chrome extension recording flow and require a native project; Browser Studio cannot create them, so the codemod is refused with a structured error.

Source

Thrown at packages/browser-studio/src/browser-studio-operations.ts:1456

	};

	const applyCodemod: BrowserStudioOperations['applyCodemod'] = async ({
		codemod,
		dryRun,
		symbolicatedStack,
	}) => {
		try {
			if (codemod.type === 'apply-visual-control') {
				throw new Error(
					'Applying visual controls is not supported in Browser Studio',
				);
			}

			if (
				codemod.type === 'new-composition' &&
				codemod.canvasCapture !== null
			) {
				throw new Error(
					'Creating canvas capture compositions is not supported in Browser Studio',
				);
			}

			const project = getProject();
			const absolutePath = resolveCodemodTargetFile({
				codemod,
				project,
				symbolicatedStack,
			});
			const input = project.files[absolutePath];
			const {newContents} = parseAndApplyCodemod({input, codeMod: codemod});
			const {output} = await formatCodemodFile({contents: newContents});
			const files: Record<string, string> = {
				...project.files,
				[absolutePath]: output,
			};

View on GitHub (pinned to b2f4e34732)

Solutions

Set canvasCapture: null on new-composition codemods sent to Browser Studio.
Gate the canvas capture flow on host capabilities and show it only where it is supported.
Create the composition first without canvasCapture, then handle capture separately in a supported host.

Example fix

// before
const codemod = {type: 'new-composition', canvasCapture, ...};
await operations.applyCodemod({codemod, dryRun: false, symbolicatedStack: null});

// after
const codemod = {type: 'new-composition', canvasCapture: null, ...};
await operations.applyCodemod({codemod, dryRun: false, symbolicatedStack: null});

Defensive patterns

Strategy: type-guard

Validate before calling

if (!(codemod.type === 'new-composition' && codemod.canvasCapture !== null)) {
  await operations.applyCodemod({codemod, dryRun, symbolicatedStack});
}

Type guard

const isBrowserStudioSupportedNewComposition = (
  codemod: RecastCodemod,
): boolean =>
  codemod.type !== 'new-composition' || codemod.canvasCapture === null;

Try / catch

try {
  await operations.applyCodemod({codemod, dryRun, symbolicatedStack});
} catch (error) {
  if (
    error instanceof Error &&
    error.message ===
      'Creating canvas capture compositions is not supported in Browser Studio'
  ) {
    // retry with canvasCapture: null or route the capture flow to a supported host
  }
}

Prevention

Strip canvasCapture from new-composition codemods destined for Browser Studio.
Gate canvas capture UI on a host capability check.
Create plain compositions first; run capture in a host that supports the extension flow.

When it happens

Trigger: Calling applyCodemod with {type: 'new-composition', canvasCapture: {...}, ...} — i.e. a new-composition codemod whose canvasCapture field is anything other than null.

Common situations: Replaying Studio-created canvas capture workflows in the browser embed; sharing composition-creation code paths between Studio and Browser Studio without gating the canvasCapture option.

Understand the failure class

Background: UnsupportedOperationException and "is not supported" errors: when a library deliberately refuses a call — this error's family across 30 libraries.

Related errors

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-08-22). Data as JSON: /api/errors/7b34651f99d85682. Report an issue: GitHub.