useCanvasController()v4.0.527

Creates one CanvasController for a React component and returns the same object on later renders.

warning

Experimental API: This package is not stable. Its public API may change without a major version bump.

Preview.tsx
import {Canvas, useCanvasController} from '@remotion/canvas';
import {Video} from './Video';

export const Preview = () => {
  const controller = useCanvasController();
  return <Canvas controller={controller} component={Video} compositionWidth={1920} compositionHeight={1080} durationInFrames={150} fps={30} />;
};

The hook takes no arguments. Share its returned controller with your layer list and other editor controls. Mount one <Canvas> per controller: the Canvas owns that controller's timeline snapshot and clears it on unmount.

Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

See also

• createCanvasController()
• <Canvas>