Drag & Drop

Build a node palette by using native HTML drag-and-drop with the Canvas instance helpers.

View source

How It Works

function handleDrop(event) {
  event.preventDefault();

  const position = canvasRef.clientToCanvas(
    event.clientX,
    event.clientY
  );

  canvasRef.getFlow().addNode({
    id: crypto.randomUUID(),
    type: 'custom',
    position,
    data: { label: 'Dropped node' }
  });
}
Try it: Drag a palette item onto the canvas. Click a palette item to add it to the current viewport center.
Drop nodes anywhere on the canvas
Input 1
Processor 1
Output 1