A node-based workflow editor is a graph authoring system, not a collection of draggable cards. The graph has types, revisions, permissions, validation rules, publishing states, and execution consequences. The canvas is only one way to inspect and change it.
A small demo can keep an array of nodes and edges in component state. Drop a box, connect two handles, and serialize the result. A production editor must answer harder questions. Is the connection type-safe? Did a hidden subgraph make it cyclic? Which edits belong in one undo step? Can two collaborators change nearby nodes without losing work? What happens when a valid draft cannot be published?
Start with the workflow language and command model. Drawing comes after those contracts are clear.
Clarify the workflow language
Assume users build automation workflows from triggers, conditions, transformations, approvals, delays, and actions. Nodes have versioned schemas and typed input and output ports. A draft may contain thousands of nodes and edges, reusable subflows, secrets, disabled branches, comments, and environment-specific configuration. Users can pan, zoom, search, select, connect, duplicate, align, group, undo, review, publish, and inspect validation errors.
Ask whether execution is a directed acyclic graph, a state machine, or a language that allows explicit loops. Ask whether one output may fan out, whether one input accepts multiple edges, how branching and joining work, and whether port types support subtyping. Then clarify offline drafts, collaboration, approvals, version history, secret handling, environment promotion, run history, mobile scope, graph size, and accessibility requirements.
These answers define the editor's invariants. A rendering library cannot decide them.
The public interview prompt
Design a browser-based node workflow editor. Explain:
- stable identities for workflows, drafts, nodes, node-type versions, ports, edges, groups, comments, revisions, and published releases;
- normalized graph storage, typed ports, connection direction and cardinality, cycle policy, subflows, and disabled branches;
- canvas transforms, node measurement, manual and automatic layout, viewport anchors, culling, edge routing, hit testing, lasso, and minimaps;
- pointer and keyboard creation, selection, dragging, connecting, deletion, duplication, grouping, alignment, and configuration editing;
- semantic commands, gesture grouping, undo and redo, autosave, expected revisions, conflicts, collaboration, and presence;
- local incremental checks, worker validation, server validation, actionable errors, draft review, approval, and atomic publication;
- accessible graph navigation, port selection, announcements, searchable outlines, reduced motion, international text, and high zoom;
- permissions, secrets, plugin isolation, export, observability, testing, degraded modes, performance budgets, and rollout.
What the premium solution covers
The full solution separates the authoritative draft graph from viewport coordinates, ephemeral gestures, validation results, and published workflow releases. It follows one typed connection from port hover through local checks, server validation, revisioned commit, layout repair, undo, and conflict recovery.
Original teaching media includes a frame-verified connection lifecycle, an ownership map, a typed-port receipt, and a semantic publishing contract. A deterministic graph budget lab lets readers vary draft size, visible scope, validation work, layout cost, and undo history without needing a workflow backend.