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>