remotion-dev/remotion · error · Error

Applying visual controls is not supported in Browser Studio

Error message

Applying visual controls is not supported in Browser Studio

What it means

applyCodemod explicitly rejects codemod.type === 'apply-visual-control'. Visual controls (Visual Mode's drag-to-update control flows) depend on Studio-only infrastructure that Browser Studio does not implement, so the codemod is refused up front and returned as a structured error.

Source

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

			return {success: true, nodePathMutation};
		} catch (error) {
			return {
				success: false,
				reason: error instanceof Error ? error.message : String(error),
				stack: error instanceof Error && error.stack ? error.stack : '',
			};
		}
	};

	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,

View on GitHub (pinned to b2f4e34732)

Solutions

  1. Gate on codemod.type before calling applyCodemod and handle 'apply-visual-control' with a user-facing 'not supported here' message.
  2. Express the intended change with supported prop-update codemods instead.
  3. Feature-detect host capabilities rather than assuming Studio and Browser Studio accept the same codemod set.

Example fix

// before
await operations.applyCodemod({codemod, dryRun: false, symbolicatedStack: null});

// after
if (codemod.type !== 'apply-visual-control') {
  await operations.applyCodemod({codemod, dryRun: false, symbolicatedStack: null});
} else {
  showUnsupportedMessage('Visual controls are not available in Browser Studio');
}
Defensive patterns

Strategy: type-guard

Validate before calling

const supportedCodemodTypes = new Set([
  'new-composition',
  'delete-composition',
  'rename-composition',
  'duplicate-composition',
  'update-composition-metadata',
  'move-composition-to-folder',
  'rename-folder',
  'delete-folder',
  // ... other supported types; deliberately excludes 'apply-visual-control'
]);

if (supportedCodemodTypes.has(codemod.type)) {
  await operations.applyCodemod({codemod, dryRun, symbolicatedStack});
}

Type guard

const isBrowserStudioSupportedCodemod = (
  codemod: RecastCodemod,
): boolean => codemod.type !== 'apply-visual-control';

Try / catch

try {
  await operations.applyCodemod({codemod, dryRun, symbolicatedStack});
} catch (error) {
  if (
    error instanceof Error &&
    error.message === 'Applying visual controls is not supported in Browser Studio'
  ) {
    // fall back to a supported prop-update codemod or inform the user
  }
}

Prevention

When it happens

Trigger: Routing a Studio-generated 'apply-visual-control' codemod (from Visual Mode editing flows) into BrowserStudioOperations.applyCodemod.

Common situations: Sharing codemod pipelines or agents between desktop Remotion Studio and the browser embed; replaying recorded Studio editing sessions against Browser Studio; assuming full codemod parity between the two hosts.

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/149328708626f034. Report an issue: GitHub.