Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.
ExamplesInteractionDrag and Drop

Drag and Drop

A drag and drop user interface is very common for node-based workflow editors. The drag and drop behavior outside of the Svelte Flow pane is not built in but can be implemented with the native HTML Drag and Drop API  (used in this example) or a third party library like svelte-draggable .

<script> import { SvelteFlowProvider } from '@xyflow/svelte'; import Flow from './Flow.svelte'; import DnDProvider from './DnDProvider.svelte'; </script> <SvelteFlowProvider> <DnDProvider> <Flow /> </DnDProvider> </SvelteFlowProvider>
Last updated on