> ## Documentation Index
> Fetch the complete documentation index at: https://flowdrop.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CodeGroup>
  ```bash npm theme={null}
  npm install @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
  ```

  ```bash pnpm theme={null}
  pnpm add @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
  ```

  ```bash yarn theme={null}
  yarn add @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
  ```
</CodeGroup>

## 2. Drop in the editor

```svelte theme={null}
<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:

```svelte theme={null}
<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}
```

<Note>
  **FlowDrop needs a backend.**

  It serves nodes and stores workflows. Point `endpointConfig` at your API, or
  [run a ready-made server](/server-implementations/overview).
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="What is a workflow?" icon="diagram-project" href="/concepts/what-is-a-workflow">
    The mental model behind the editor.
  </Card>

  <Card title="Connect a backend" icon="server" href="/guides/integration/backend-implementation">
    The REST endpoints FlowDrop calls.
  </Card>
</CardGroup>