---
title: "Embedding the editor"
description: "Mount the FlowDrop visual workflow editor in any web page."
source: https://flowdrop.io/docs/tutorials/01-embedding-the-editor
site: FlowDrop documentation
---
# Embedding the editor
<Info>
  **What you'll learn**

  How to install FlowDrop and mount a blank workflow editor canvas in your
  application.
</Info>

{/* TODO: live demo — interactive empty editor (step="empty-editor"); omitted in the initial port. */}

The most minimal FlowDrop setup is just the editor itself: an empty canvas with
no nodes in the sidebar and no workflow loaded. Even empty, you can zoom (scroll
wheel) and pan (click and drag the background).

## Set up a project

FlowDrop's UI is built with Svelte 5, so your bundler needs the Svelte plugin to
compile it — even though you won't write any Svelte yourself. Here's a complete,
working [Vite](https://vite.dev/) setup; it's exactly what the runnable example
(`apps/tutorials/01-embedding-the-editor` in the FlowDrop repo) uses.

<Steps>
  <Step title="Install">
    <CodeGroup>

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

    ```bash pnpm
    pnpm add @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
    pnpm add -D vite @sveltejs/vite-plugin-svelte svelte
    ```

    </CodeGroup>
  </Step>

  <Step title="Configure Vite">
    ```js vite.config.js
    import { defineConfig } from 'vite';
    import { svelte } from '@sveltejs/vite-plugin-svelte';

    export default defineConfig({
      // FlowDrop ships Svelte components — the plugin compiles them for you.
      plugins: [svelte()],
      // The mount call uses top-level await, which needs a modern target.
      build: { target: 'es2022' }
    });
    ```
  </Step>

  <Step title="Add a container">
    ```html index.html
    <div id="editor"></div>
    <script type="module" src="/src/main.js"></script>
    ```
  </Step>
</Steps>

<Note>
  **SvelteKit users can skip the Vite steps.**

  Using **SvelteKit** or another Svelte toolchain? The Svelte plugin is already
  configured. **React** and **Vue** apps need the plugin just like vanilla JS
  does.
</Note>

## Mount the editor

With the project set up, two imports in your entry file (`src/main.js`) are all
you need:

```js
import { mountFlowDropApp } from '@flowdrop/flowdrop/editor';
import '@flowdrop/flowdrop/styles';
```

Then mount it into any container element:

```js
const app = await mountFlowDropApp(document.getElementById('editor'), {
  height: '100vh'
});
```

That's it. The editor renders a pannable, zoomable canvas with a grid background.

### What `mountFlowDropApp` returns

The mount function returns a controller object you can use later:

```js
const app = await mountFlowDropApp(container, options);

// Check if the user has unsaved changes
app.isDirty();

// Get the current workflow data
app.getWorkflow();

// Clean up when done
app.destroy();
```

## The complete project

Once you've followed the steps above, your project has just four files. This is
the whole thing — the runnable
[`apps/tutorials/01-embedding-the-editor`](https://github.com/flowdrop-io/flowdrop)
example mirrors it exactly:

<Tree>
  <Tree.Folder name="01-embedding-the-editor" defaultOpen>
    <Tree.Folder name="src" defaultOpen>
      <Tree.File name="main.js" />
    </Tree.Folder>
    <Tree.File name="index.html" />
    <Tree.File name="vite.config.js" />
    <Tree.File name="package.json" />
  </Tree.Folder>
</Tree>

Run `npm run dev` (or `pnpm dev`) and open the printed URL. You'll see the empty
editor canvas:

<Frame caption="The blank FlowDrop editor mounted in a Vite app — a pannable, zoomable canvas with a grid background.">
  ![An empty FlowDrop editor canvas with a grid background, no nodes in the sidebar and no workflow loaded.](/images/screenshots/flowdrop-empty-editor-without-endpoint.webp)
</Frame>

## Using with Svelte

If you're building a Svelte application, you can use the `WorkflowEditor` component directly:

```svelte
<script>
  import { WorkflowEditor } from '@flowdrop/flowdrop/editor';
  import '@flowdrop/flowdrop/styles';
</script>

<div style="height: 100vh;">
  <WorkflowEditor />
</div>
```

## What's next

The editor is running, but there's nothing to build with yet. Before adding nodes, you need to tell FlowDrop where your backend API lives.

---

**Tutorial — Step 1 of 5**

[Next: Configuring endpoints →](/tutorials/02-configuring-endpoints)