---
title: "Introduction"
description: "Build beautiful workflow editors in minutes, not months."
source: https://flowdrop.io/docs/
site: FlowDrop documentation
---
# Introduction
A drop-in visual workflow editor for any web application. You own the backend.
You own the data. You own the orchestration.

![FlowDrop Editor's Screenshot showing an ai based workflow](/images/flowdrop-wrorkflow-ai-powered-demo.webp)

<CardGroup cols={2}>
  <Card title="Get started" icon="rocket" href="/start/quickstart">
    Install `@flowdrop/flowdrop` and mount an editor in minutes.
  </Card>
  <Card title="What is a workflow?" icon="diagram-project" href="/concepts/what-is-a-workflow">
    Understand the mental model before writing any code.
  </Card>
</CardGroup>

{/* TODO: live demo — embed an interactive FlowDrop editor here (omitted in the
    initial port from the previous docs vendor; was a Svelte client component on
    the legacy site). The vendor's name is deliberately not written out: MDX
    comments survive into the markdown twins, and site.yml fails the build on any
    occurrence of it in site/out. */}

## Who is FlowDrop for?

<CardGroup cols={2}>
  <Card title="Application developers" icon="laptop">
    Building internal tools, CMS platforms, or SaaS products that need a visual
    workflow builder. You want a drop-in editor, not a workflow engine.
  </Card>
  <Card title="AI/ML engineers" icon="sparkle">
    Designing agent pipelines, RAG workflows, or tool-calling chains. FlowDrop
    visualizes the orchestration graph while you control execution.
  </Card>
  <Card title="Platform teams" icon="puzzle-piece">
    Creating self-service automation platforms where non-technical users design
    workflows through a visual interface.
  </Card>
</CardGroup>

## Why FlowDrop?

Most workflow tools are SaaS platforms that lock you in. Your data lives on
their servers, your execution logic runs in their cloud, and you pay per
workflow, per user, per run.

**FlowDrop is different.** It is a pure visual editor component library. You
implement the backend. You control the orchestration. Your workflows run on your
infrastructure, with your security policies, at your scale. No vendor lock-in. No
data leaving your walls.

If you would rather not operate a backend, Factorial.io hosts one — see
[choose a backend](/start), which is where that decision belongs.

## Features

<CardGroup cols={2}>
  <Card title="Visual workflow editor" icon="pencil">
    Drag-and-drop node-based editor with built-in node types, real-time
    validation, and auto-layout.
  </Card>
  <Card title="Backend agnostic" icon="plug">
    Pure UI component library — connect to any API: Drupal, Laravel, Express,
    FastAPI, or your own.
  </Card>
  <Card title="Dynamic forms" icon="file-lines">
    Auto-generate configuration forms from JSON Schema with support for dynamic
    fields, UISchema layout, and autocomplete.
  </Card>
  <Card title="Plugin system" icon="square-plus">
    Extensible registries for custom node types, workflow formats, and form
    field components.
  </Card>
  <Card title="Human-in-the-loop" icon="circle-check">
    Pause workflows for human approval, input, choices, or review with a
    built-in interrupt system.
  </Card>
  <Card title="Interactive playground" icon="play">
    Test workflows interactively with a chat interface, session management, and
    real-time execution feedback.
  </Card>
  <Card title="Framework flexible" icon="layer-group">
    Use as a native Svelte component or mount into React, Vue, Angular, or
    vanilla JS applications.
  </Card>
</CardGroup>

## Learning path

New to FlowDrop? Follow this path:

<Steps>
  <Step title="What is a workflow?">
    [Understand the mental model](/concepts/what-is-a-workflow).
  </Step>
  <Step title="Quick start">
    [Install FlowDrop and mount your first editor](/start/quickstart) in minutes.
  </Step>
  <Step title="Architecture overview">
    [See how all the pieces fit together](/concepts/architecture-overview).
  </Step>
</Steps>