Flow editor

Create a flow

Lessons are data, not code: edit the JSON on the left and the real player updates on the right. Attach interactive widgets by adding an interactive block to any step — widgets are configured with data only, so lessons stay safe to share.

{
  "id": "my-first-flow",
  "slug": "my-first-flow",
  "title": "My First Flow",
  "summary": "A three-step example lesson. Replace every field with your own content.",
  "difficulty": "beginner",
  "category": "LLM basics",
  "tags": [
    "example"
  ],
  "access": "free",
  "status": "draft",
  "estimatedMinutes": 5,
  "layout": "linear",
  "author": {
    "id": "me",
    "name": "Your Name"
  },
  "learningGoals": [
    "Understand the flow JSON format"
  ],
  "examples": [
    {
      "id": "default",
      "label": "Example walk-through",
      "input": "A sample input",
      "expectedOutput": "What the learner should expect to come out"
    }
  ],
  "nodes": [
    {
      "id": "step-1",
      "title": "Input",
      "type": "input",
      "position": {
        "x": 0,
        "y": 120
      },
      "durationMs": 1000,
      "beginner": {
        "received": "What arrives at this step, in plain words.",
        "action": "What this step does, described for a newcomer.",
        "output": "What it hands to the next step.",
        "explanation": "Why this step matters."
      },
      "technical": {
        "received": "The same, with precise vocabulary.",
        "action": "The mechanism — algorithms, shapes, math.",
        "output": "The exact artifact produced.",
        "explanation": "The deeper reason this design exists."
      }
    },
    {
      "id": "step-2",
      "title": "Process",
      "type": "process",
      "position": {
        "x": 220,
        "y": 120
      },
      "durationMs": 1000,
      "beginner": {
        "received": "The previous step's output.",
        "action": "Transforms it.",
        "output": "A refined result.",
        "explanation": "The core of your lesson."
      },
      "technical": {
        "received": "Input artifact.",
        "action": "Transformation details.",
        "output": "Output artifact.",
        "explanation": "Why it works."
      },
      "interactive": {
        "kind": "tokenizer",
        "description": "Widgets are configured with data — pick a kind and options.",
        "config": {
          "defaultText": "Try editing this text"
        }
      }
    },
    {
      "id": "step-3",
      "title": "Output",
      "type": "output",
      "position": {
        "x": 440,
        "y": 120
      },
      "durationMs": 1000,
      "beginner": {
        "received": "The processed result.",
        "action": "Presents the final answer.",
        "output": "What the user sees.",
        "explanation": "The payoff of the pipeline."
      },
      "technical": {
        "received": "Final artifact.",
        "action": "Serialization/delivery.",
        "output": "Response payload.",
        "explanation": "End of the pipeline."
      }
    }
  ],
  "edges": [
    {
      "id": "e1",
      "source": "step-1",
      "target": "step-2"
    },
    {
      "id": "e2",
      "source": "step-2",
      "target": "step-3"
    }
  ]
}

✓ Valid flow — 3 steps, 2 edges. The preview on the right is the real player.

Saving and sharing aren't enabled on this deployment — use Download to keep your flow as JSON.

Live preview

My First Flow

A three-step example lesson. Replace every field with your own content.

Step 1/3