Installation

Prerequisites

• Node.js v20 or later
• A build pipeline that can bundle ES modules (Vite, webpack, esbuild, Rollup, Next.js, Nuxt, SvelteKit, or similar)

No Svelte required in your app

FlowDrop is built with Svelte 5 internally, but you do not need to write Svelte to use it. The Mount API works in React, Vue, Angular, vanilla JS, or any framework.

Install

npm

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

pnpm

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

yarn

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

bun

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

Peer Dependencies

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)

Optional: CodeMirror (for code/markdown editors)

If you use the form/code or form/markdown entry points, install CodeMirror packages:

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

Entry Points

Entry Point	Description
@flowdrop/flowdrop	Full bundle — re-exports everything
@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

Architecture Notes

Single Instance Per Page

FlowDrop uses module-level singleton stores. Only one FlowDrop editor instance can exist on a page at a time.

• Svelte 5 required (internally). FlowDrop uses Svelte 5 runes internally. Your app does not need to be written in Svelte.
• Modern browsers only. The library targets ES2020+ and does not include polyfills.

Vite projects

If you see Failed to resolve import errors, add FlowDrop to Vite’s optimizeDeps exclusion list:

vite.config.ts

export default defineConfig({
  optimizeDeps: {
    exclude: ['@flowdrop/flowdrop', '@xyflow/svelte']
  }
});

Verify Your Installation

Confirm the package resolved correctly:

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:

1. Install completed without errors
2. Your bundler supports ES modules (Vite 5+, webpack 5+)
3. You are not importing in a server-side context — see Framework Integration