---
title: "Tutorials"
description: "Build a working FlowDrop integration from an empty directory, one step at a time — then a set of recipes for specific jobs."
source: https://flowdrop.io/docs/tutorials
site: FlowDrop documentation
---
# Tutorials
The tutorial is five parts, in order, each building on the last. Start at part
one with nothing but a terminal.

<CardGroup cols={1}>
  <Card title="1 — Embedding the editor" icon="play" href="/tutorials/01-embedding-the-editor">
    Mount the editor in a plain web page.
  </Card>
  <Card title="2 — Configuring endpoints" icon="plug" href="/tutorials/02-configuring-endpoints">
    Point it at a backend so it can load nodes and save workflows.
  </Card>
  <Card title="3 — Your first node" icon="cube" href="/tutorials/03-your-first-node">
    Define a node type and watch it appear in the sidebar.
  </Card>
  <Card title="4 — Multiple nodes and categories" icon="boxes-stacked" href="/tutorials/04-multiple-nodes-and-categories">
    Grow it into a usable palette.
  </Card>
  <Card title="5 — Saving workflows" icon="file-code" href="/tutorials/05-saving-workflows">
    Persist what the reader built.
  </Card>
</CardGroup>

## Recipes

Self-contained walkthroughs of one job each. They assume the tutorial, but not
each other.

- [Backend: Express.js](/tutorials/recipes/backend-express) — a working backend in 15 minutes
- [Build an AI agent workflow](/tutorials/recipes/ai-agent-workflow) — branching, tools and human-in-the-loop
- [Conditional branching](/tutorials/recipes/conditional-branching) — gateway nodes for if/else and switch/case
- [Auto-save and drafts](/tutorials/recipes/auto-save-and-drafts) — browser-storage drafts and how to manage them
- [Undo and redo](/tutorials/recipes/undo-redo) — the history stack, programmatically