ExamplesNodes

Add Node On Edge Drop

You can create a new node when you drop the connection line on the pane by using the onConnectionStart and onConnectionStop handlers.

<script lang="ts">
  import { SvelteFlowProvider } from '@xyflow/svelte';
  import Flow from './Flow.svelte';
</script>
 
<!-- You need the SvelteFlowProvider so you can useSvelteFlow  -->
<SvelteFlowProvider>
  <Flow />
</SvelteFlowProvider>