Workflow Editor - Engineering & Infrastructure

Overview

The Workflow Editor is powered by React Flow and provides a fully interactive canvas for designing automation pipelines. Every operation in a pipeline is represented as a node and every data connection between operations is an edge. You build workflows by dragging nodes from the left palette onto the canvas, then drawing edges from one node's output handle to another node's input handle.

When you click Run, the execution engine processes nodes in topological order — upstream nodes finish before downstream nodes start. Data flows through edges, so the output of a Blog node can become the topic for an Essay node, or the body of a Send Mail node.

Start with a Simple Pipeline

Begin with Text Input → Blog → Output (Modal View). This three-node pipeline lets you type a topic, generate a blog post with AI, and display the result — all without any configuration beyond the topic text.

Node Palette

The left panel organises all available nodes into categories. Click a category to expand it, then drag any node onto the canvas. Nodes with a Soon badge are planned features not yet implemented — they cannot be dragged to the canvas.

Category	Nodes	Purpose
Utility	Text Input	Source-only node. Provides a static text value to the pipeline. No incoming connections.
DW-Content	Blog, Essay, Story, Article, Presentation	AI content generation nodes. Accept optional upstream topic input; fall back to configured topic field.
DW-Creative	Creative writing variants	Creative-focused generation (character dialogue, scene description, etc.).
Output	Send Mail, File Write, Modal View	Terminal nodes — consume upstream output and send email, write a file, or display in a viewer modal.
Script	JS Sandbox, JSON Editor	Run custom JavaScript. The `input` variable holds the upstream node's output value.
Source	API Source	Fetch data from an external HTTP endpoint. Output is the response body (string or JSON).

Node Categories & Config

Clicking a node on the canvas opens the NodeConfigPanel on the right side of the screen. The panel has three tabs:

Config tab — input fields specific to the node type. For a Blog node this is the topic, tone, and word count. For a Script node it's the JS code editor.
Info tab — shows the node's output type and a summary of what it does.
Help tab — detailed guidance on configuration fields, tips, and example topics. Every DW-Content node has its own Help content.

Category-Specific Config UIs

DW-Content, DW-Creative, and other specialty categories replace the generic JSON config textarea with purpose-built form UIs. If you need to inspect the raw config JSON for a node type that has a custom UI, check the node's data in the workflow JSON export.

Running a Workflow

Click the Run button in the top toolbar.
The execution engine resolves the topological order of all connected nodes.
Each node lights up in sequence. A RunBlock appears in the right panel showing step-by-step progress (pending → running → done/error).
Node results are shown inline on the canvas. Hover over a node after execution to see its output value.
If any node fails, the error is surfaced in that node's RunBlock step. Downstream nodes that depend on the failed node are skipped.

You can abort a running workflow at any time with the Stop button that replaces Run during execution.

Saving Workflows

Click the Save button in the toolbar to persist the current workflow. Saved workflows are stored server-side and appear in the My Workflows screen where you can re-run, edit, or delete them.

You can also export any workflow as a JSON file using the export button in the toolbar. JSON exports can be imported back into any TotalApp instance — useful for sharing workflow templates across teams.

Link Workflows to Projects

From the My Workflows screen, you can assign a saved workflow to a PM project. This makes the workflow discoverable alongside related tasks, notes, and presentations for that project.

Disabled Nodes ("Soon" Badge)

Some nodes in the palette display a Soon badge. These nodes are visible so you can plan pipelines around upcoming features, but they cannot be dragged onto the canvas. Attempting to drag them has no effect.

When a node's implementation is complete, the Soon badge is removed automatically and the node becomes draggable. No other change is needed on your end — saved workflows that reference a previously-disabled node will work as soon as it ships.

Do Not Wire Soon Nodes

Even though Soon nodes are visible, you cannot connect edges to them. If you somehow manage to reference an unimplemented node in a workflow JSON import, the execution engine will return a silent no-op for that node and skip any downstream dependents.

Tips

Start simple — Text Input → Blog → Modal View is the fastest way to validate the pipeline works before adding complexity.
Use the Script node for transformations — if you need to reshape data between two AI nodes (e.g. extract the first paragraph of a blog post as a story premise), add a Script node in between.
Connect multiple outputs — a single DW-Content node's output can feed multiple Output nodes simultaneously (e.g. both Send Mail and Modal View).
Use Text Input for testing — the Text Input utility node provides a fixed string without requiring external connections, ideal for iterating on a single AI node's config.
Double-click a node in the palette to place it at the centre of the canvas without dragging.