Visual Editor & Canvas

The canvas is a React Flowboard embedded directly in the Airflow UI. Every node on it corresponds to a statement in your DAG's Python file.

Building a graph

• Drag operators from the searchable, category-grouped palette onto the canvas, or click a block to add it.
• Connect tasks by dragging between handles — dependency edges support both individual tasks and TaskGroups as endpoints (task >> group, group >> group).
• Click an edge to set its Label and per-task trigger_rule (e.g. ALL_FAILED, ONE_SUCCESS).

Grouping

Select several nodes and press Ctrl+G, or right-click for a context menu, to create a TaskGroup. Groups render as dashed frames on the canvas that you can:

• Drag to move every task inside at once.
• Click the frame header to rename the group_id or delete the group (with a confirmation — deleting ungroups every task inside, it doesn't delete the tasks).
• Drag tasks in and out to change membership; nesting groups inside groups is supported.

Parameter editors

Each operator parameter gets a form control matched to its type:

• Plain text / numbers / booleans — a regular input.
• Dictionaries (e.g. params, env) — a key:value list editor.
• HTML-ish text fields — a rich-text (WYSIWYG) editor.
• *conn_id fields — a dropdown populated from your configured Airflow connections, with same-type connections sorted first.
• Anything else — an expandable raw-Python expression field, validated at codegen time.

DAG-level settings (schedule, start_date, catchup, max_active_runs, default_args) live in a dedicated DAG settings modal, with a chip-based cron builder for the schedule.

Dynamic code stays visible

Constructs the visual editor can't safely round-trip — task-generating loops, .partial().expand() — appear as dashed, code-only "opaque" nodes on the canvas. They're placed correctly relative to the rest of the graph; editing them happens in the code view.