Skip to main content
Workflow Studio has two center-panel views for the same workflow graph: Both views edit the same draft graph. Changes in JSON mode are not on the canvas until you click Apply to canvas.

​
Switch views

In the workflow toolbar (top right, next to JSON menu):
  1. Click Canvas — visual React Flow editor (default).
  2. Click JSON — Monaco JSON editor for the backend graph.
The toggle shows a dot on JSON when you have unapplied edits. You can also open JSON mode from JSON → Edit JSON in the same toolbar menu.
View JSON (same menu) opens a read-only modal with search — it does not switch the center panel and does not accept edits. Use JSON view or Edit JSON to change the graph.

​
JSON menu actions

​
Authoring in JSON mode

1

Open JSON mode

Click JSON in the toolbar (or JSON → Edit JSON).
2

Edit the graph

The editor shows the same backend-shaped graph as View JSON — typically workflow_id, nodes, edges, and compiled steps.
3

Check the header

The bar under Workflow JSON shows validation: e.g. 2 steps, 2 edges when the graph can be loaded, or a parse/structure error when it cannot.
4

Apply to canvas

Click Apply to canvas when the header is green. Studio parses the JSON, loads it onto the canvas (with auto-layout), and clears the unsaved badge.
5

Save or publish

Use Save / Publish as usual after applying — JSON edits are not persisted until they are on the canvas and saved.

​
Reset and unsaved changes

Switching back to Canvas with unapplied JSON edits prompts you to discard or keep editing.

​
IntelliSense (Ctrl+Space)

JSON mode includes workflow-aware completions — not generic JSON schema hover (that is disabled in the Console to avoid a stuck loading state in local dev). Trigger suggestions with Ctrl+Space (or type inside strings and property keys).

​
Property names

When typing a key (after " or , "), Studio suggests workflow fields: id, type, name, depends_on, tool_name, instance_id, for_each_items, for_each_body_steps, script, nodes, edges, steps, and more.

​
Step types

When the cursor is in "type": ", suggestions include: mcp_call, lua_script, llm_call, agent_call, for_each, while, human_task Inner loop steps also suggest: lua_script, llm_call, agent_call, mcp_call.

​
Template snippets

Inside string values (e.g. tool_args, prompt, for_each_items): See also Template intellisense for canvas field helpers.

​
Step IDs in depends_on

Inside "depends_on": [", Studio lists step ids already present in the file (top-level steps, node ids, and ids inside for_each_body_steps).

​
New step snippets

On a new line in a steps array (after [ or ,), suggestions include:
  • new mcp_call step
  • new lua_script step
  • new for_each step
  • new llm_call step
Each inserts a starter object you can tab through.

​
Collapse blocks ({ / [)

Hover in the left gutter next to a line with { or [ to reveal fold chevrons. Click to collapse that object or array. Folding uses bracket matching in the editor (not the JSON language worker), so it works in local dev and ignores braces inside "script" strings.

​
Edit Lua scripts

Lua in JSON is stored as an escaped string (\n, \") — hard to read in the raw JSON.
  1. Place the cursor inside any "script": "..." value (top-level steps or for_each_body_steps / while_body_steps).
  2. Click Edit script in the JSON toolbar.
  3. Edit in the Lua editor (same completions as the canvas step panel: steps, input, item, index).
  4. Click Save to JSON — the script is written back into the JSON document.
  5. Click Apply to canvas to update the visual graph.
For long scripts, many authors prefer Canvas → click the Lua step → edit in the config panel. JSON mode is best when you are already editing the surrounding graph structure.

​
Supported JSON shapes

Apply to canvas accepts the same shapes as Import: Studio normalizes and auto-layouts after apply.

​
What JSON mode does not do (yet)