Chapter 380: setStudioDragData()

Core Idea

Writes an Element payload and its preview metadata to a browser DataTransfer object.

Key Concepts

• Example
• When to use drag-and-drop
• Arguments
• dataTransfer
• payload
• Drag preview
• Compatibility
• See also

Code Examples

import {
  createElementPayload,
  setStudioDragData,
} from '@remotion/studio-protocol';

const elementSourceCode = `
export const MyElement = () => {
  return <div>Hello world</div>;
};
`;

const payload = createElementPayload({
  displayName: 'My Element',
  slug: 'my-element',
  sourceCode: elementSourceCode,
  dependencies: [],
  dimensions: {width: 900, height: 260},
  durationInFrames: 90,
});

export const DraggableElement = () => (
  <button
    draggable
    onDragStart={(event) => {
      setStudioDragData({
        dataTransfer: event.dataTransfer,
        payload,
      });
    }}
  >
    Drag into Studio
  </button>
);

• What it demonstrates: Usage pattern for setStudioDragData() from the official docs.

Key Takeaways

1. Understand example when working with setStudioDragData().
2. Understand when to use drag-and-drop when working with setStudioDragData().
3. Understand arguments when working with setStudioDragData().
4. Understand datatransfer when working with setStudioDragData().
5. Understand payload when working with setStudioDragData().

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.