---
title: "Quick start"
description: "Get a live FlowDrop editor running in your app in minutes — Svelte, React, Vue, vanilla JS, or Drupal."
source: https://flowdrop.io/docs/start/quickstart
site: FlowDrop documentation
---
# Quick start
You're three steps from a working workflow editor: install the package, point it
at a backend, and mount it. Pick your framework below for copy‑paste setup, or
follow the universal path underneath.

## Choose your framework

<CardGroup cols={3}>
  <Card title="Svelte" icon="svelte" href="/editor/frameworks/svelte">
    Use FlowDrop as a native Svelte 5 component.
  </Card>
  <Card title="React" icon="react" href="/editor/frameworks/react">
    Mount into a `useEffect` with a container ref.
  </Card>
  <Card title="Vue" icon="vuejs" href="/editor/frameworks/vue">
    Mount on `onMounted`, tear down on unmount.
  </Card>
  <Card title="Vanilla JS" icon="square-js" href="/editor/frameworks/vanilla">
    Drop into any element — no framework needed.
  </Card>
  <Card title="Drupal" icon="drupal" href="/drupal/install">
    Install the module; the editor ships with it.
  </Card>
</CardGroup>

## 1. Install

<CodeGroup>

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

```bash pnpm
pnpm add @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
```

```bash yarn
yarn add @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
```

```bash bun
bun add @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
```

</CodeGroup>

<Note>
  **No Svelte required in your app.**

  FlowDrop is built with Svelte 5 internally, but you don't need to write Svelte
  to use it. The mount API works in React, Vue, vanilla JS, or any framework.
</Note>

## 2. Mount the editor

This is the universal path — it works anywhere. Drop the editor into any element
and point it at your backend:

```javascript
import { mountFlowDropApp } from '@flowdrop/flowdrop/editor';
import { createEndpointConfig } from '@flowdrop/flowdrop/core';
import '@flowdrop/flowdrop/styles';

const app = await mountFlowDropApp(document.getElementById('editor'), {
  endpointConfig: createEndpointConfig('/api/flowdrop'),
});
```

```html
<div id="editor" style="height: 100vh"></div>
```

That's the happy path — you now have a live editor wired to your backend. For
framework‑idiomatic setup (Svelte components, React refs, Vue lifecycle), use the
tiles above.

## 3. Connect a backend

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

  As a **frontend editor**, it relies on a backend to serve node definitions,
  store workflows, and run executions. Until one is connected, the canvas loads
  but has no nodes to place.
</Note>

You have two ways to get there:

<CardGroup cols={2}>
  <Card title="Run a ready-made server" icon="server" href="/start">
    Skip the backend work — run a server that already speaks the FlowDrop API,
    like the Drupal module.
  </Card>
  <Card title="Build your own" icon="screwdriver-wrench" href="/editor/integration/backend-implementation">
    Implement the REST contract on your own stack — the guide lists every
    endpoint FlowDrop calls.
  </Card>
</CardGroup>

## Going further

The happy path above is all most apps need. Expand the sections below when you
hit a specific case.

<AccordionGroup>
  <Accordion title="Peer dependencies" icon="cube">
    Install these alongside `@flowdrop/flowdrop`:

    | Package           | Version  | Required                |
    | ----------------- | -------- | ----------------------- |
    | `svelte`          | `^5.0.0` | Yes (internal runtime)  |
    | `@xyflow/svelte`  | `^1.2`   | Yes (for editor module) |
    | `@iconify/svelte` | `^5.0.0` | Yes (for icons)         |
  </Accordion>

  <Accordion title="Entry points (keep your bundle small)" icon="boxes-stacked">
    Import from the most specific entry point you need — the main entry is a slim
    front door, so form fields, display components, and the playground live in
    their own sub‑modules.

    | Entry point                        | Description                                       |
    | ---------------------------------- | ------------------------------------------------- |
    | `@flowdrop/flowdrop`               | Bootstrap front door — `App`, mount functions, instances, config helpers, auth providers |
    | `@flowdrop/flowdrop/core`          | Types and utilities (zero heavy dependencies)     |
    | `@flowdrop/flowdrop/editor`        | Visual workflow editor components                 |
    | `@flowdrop/flowdrop/form`          | Dynamic form field components                     |
    | `@flowdrop/flowdrop/form/code`     | Code and JSON editor fields (requires CodeMirror) |
    | `@flowdrop/flowdrop/form/markdown` | Markdown editor field (requires CodeMirror)       |
    | `@flowdrop/flowdrop/form/full`     | All form components pre-bundled                   |
    | `@flowdrop/flowdrop/display`       | Display-only components (MarkdownDisplay)         |
    | `@flowdrop/flowdrop/playground`    | Interactive workflow playground                   |
    | `@flowdrop/flowdrop/settings`      | Settings UI components and stores                 |
    | `@flowdrop/flowdrop/styles`        | Base CSS styles and design tokens                 |
  </Accordion>

  <Accordion title="Optional: CodeMirror (code & markdown editors)" icon="code">
    Only needed if you use the `form/code` or `form/markdown` entry points:

    ```bash
    npm install codemirror @codemirror/state @codemirror/view @codemirror/commands \
      @codemirror/language @codemirror/theme-one-dark @codemirror/autocomplete \
      @codemirror/lang-json @codemirror/lang-markdown @codemirror/lint
    ```
  </Accordion>

  <Accordion title="Running multiple editors on one page" icon="layer-group">
    Multiple FlowDrop editors can run on the same page. Each mount gets its own
    isolated `FlowDropInstance` (workflow, history, playground, and panel state).
    When mounting more than one editor with drafts enabled, pass an `instanceId`
    so their stored drafts don't collide. See the [multiple instances
    guide](/editor/multiple-instances).
  </Accordion>

  <Accordion title="Bundler setup (Vite, React, Vue, vanilla)" icon="triangle-exclamation">
    FlowDrop ships its UI as Svelte 5 components, so a bundler needs the Svelte
    plugin to compile them — even in React, Vue, or vanilla-JS apps. You still
    don't write any Svelte yourself. With Vite:

    ```bash
    npm install -D @sveltejs/vite-plugin-svelte svelte
    ```

    ```javascript
    // vite.config.js
    import { defineConfig } from 'vite';
    import { svelte } from '@sveltejs/vite-plugin-svelte';

    export default defineConfig({
      plugins: [svelte()],
      // The mountFlowDropApp examples use top-level await.
      build: { target: 'es2022' }
    });
    ```

    **SvelteKit** already configures the Svelte plugin — no extra setup needed.

    Still seeing `Failed to resolve import`? Exclude FlowDrop from Vite's
    dependency pre-bundling:

    ```javascript
    optimizeDeps: { exclude: ['@flowdrop/flowdrop', '@xyflow/svelte'] }
    ```
  </Accordion>

  <Accordion title="Verify your installation" icon="circle-check">
    Confirm the package resolved correctly:

    ```javascript
    import { createEndpointConfig } from '@flowdrop/flowdrop/core';
    const config = createEndpointConfig('/api/flowdrop');
    console.log(config); // EndpointConfig object
    ```

    If you see `Cannot find module '@flowdrop/flowdrop'`, check that the install
    finished without errors, that your bundler supports ES modules (Vite 5+,
    webpack 5+), and that you aren't importing in a server-side context.
  </Accordion>

  <Accordion title="Requirements & browser support" icon="circle-info">
    - **Node.js** v20 or later.
    - A bundler that handles ES modules (Vite, webpack, esbuild, Rollup, Next.js,
      Nuxt, SvelteKit, or similar).
    - **Svelte 5 internally** — FlowDrop uses Svelte 5 runes under the hood; your
      app does not need to be written in Svelte.
    - **Modern browsers only** — targets ES2020+ with no bundled polyfills.
  </Accordion>
</AccordionGroup>