---
title: "Vanilla JS"
description: "Drop a FlowDrop editor into any page — no framework required."
source: https://flowdrop.io/docs/editor/frameworks/vanilla
site: FlowDrop documentation
---
# Vanilla JS
With no framework, the mount API is all you need: give FlowDrop an element and an
endpoint, and it takes over the rest.

## 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
```

</CodeGroup>

<Note>
  **Your bundler needs the Svelte plugin.**

  FlowDrop ships its UI as Svelte 5 components, so your bundler must compile them
  (you won't write any Svelte). With Vite, add `@sveltejs/vite-plugin-svelte` and
  `svelte` as dev dependencies and enable the plugin — see the **Bundler setup**
  section of the [quick start](/start/quickstart) for the full config.
</Note>

## 2. Mount the editor

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

<script type="module">
  import { mountFlowDropApp } from '@flowdrop/flowdrop/editor';
  import { createEndpointConfig } from '@flowdrop/flowdrop/core';
  import '@flowdrop/flowdrop/styles';

  const app = await mountFlowDropApp(
    document.getElementById('flowdrop-editor'),
    {
      endpointConfig: createEndpointConfig('/api/flowdrop'),
      eventHandlers: {
        onAfterSave: async (workflow) => console.log('Saved:', workflow.id),
      },
    }
  );
</script>
```

The returned `app` handle lets you drive the editor programmatically —
`app.save()`, `app.getWorkflow()`, `app.isDirty()`, and `app.destroy()` when you
remove it from the page.

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

  It serves nodes and stores workflows. Point `endpointConfig` at your API, or
  [run a ready-made server](/start).
</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="Mount API reference" icon="code" href="/editor/reference/mount-api">
    Every option and method on the mount handle.
  </Card>
</CardGroup>