Svelte

Use FlowDrop as a native Svelte 5 component.

FlowDrop is built with Svelte 5, so in a Svelte app you use its components directly — no mount API needed.

1. Install

npm

npm install @flowdrop/flowdrop @iconify/svelte @xyflow/svelte

2. Drop in the editor

<script>
  import { App } from '@flowdrop/flowdrop/editor';
  import { createEndpointConfig } from '@flowdrop/flowdrop/core';
  import '@flowdrop/flowdrop/styles';

  const endpointConfig = createEndpointConfig('/api/flowdrop');
</script>

<App
  {endpointConfig}
  onAfterSave={async (workflow) => console.log('Saved:', workflow.id)}
/>

SvelteKit

FlowDrop is browser-only. In SvelteKit, guard the editor so it never renders during SSR:

<script>
  import { browser } from '$app/environment';
  import { App } from '@flowdrop/flowdrop/editor';
  import { createEndpointConfig } from '@flowdrop/flowdrop/core';
  import '@flowdrop/flowdrop/styles';

  const endpointConfig = createEndpointConfig('/api/flowdrop');
</script>

{#if browser}
  <App {endpointConfig} />
{/if}

FlowDrop needs a backend.

It serves nodes and stores workflows. Point endpointConfig at your API, or run a ready-made server.

Next steps

What is a workflow?

The mental model behind the editor.

Connect a backend

The REST endpoints FlowDrop calls.