Skip to main content

Copy and Paste in the Editor Starter

The Remotion Editor Starter implements copying and pasting from layers.

Considerations​

When reading the browser's Clipboard API, only the following MIME types are supported:

  • text/plain
  • text/html
  • image/png

None of these are the ideal MIME types for copying items.

We are therefore using a workaround that is used by Figma and tldraw: The items are serialized, put into a <div> and then copied to the clipboard with the MIME type text/html. This prevents overwriting the text/plain slot.

Ways of copy-pasting​

Copy and pasting works by right-clicking on an item, or using the standard keyboard shortcuts:

  • Cmd/Ctrl+X to cut
  • Cmd/Ctrl+C to copy
  • Cmd/Ctrl+V to paste

Pasting​

When pasting contents, the Editor Starter first checks if the clipboard data has the MIME type text/html and deserializes the contents of the <div> into items.

Items are being copied and assigned a new unique ID before being added to the top of the timeline.

Customizing​

The logic for copy-paste can be found under src/editor/clipboard.

See also​