API Reference (JSON spec)

This page documents only the shape of the JSON specification (DataFlowSpec) passed to the spec prop, generated from the JSON Schema. For the exported components and functions (<DataFlowPlayer> props, custom icons, syntax highlighting), see Components and JavaScript API.

JSON Schema available

The raw JSON Schema of DataFlowSpec (draft-07) is accessible in two ways:

• npm package subpath (after npm install): import schema from '@dataflow-animator/core/schema.json' (or by reading node_modules/@dataflow-animator/core/schema.json).
• Public URL, served by this site: schema.json — handy for pointing a $schema, an editor configuration or an online validator.

It can be used for Ajv validation on the user side, editor auto-completion, or form generation. See the JSON Auto-completion in VS Code section for VS Code setup.

DataFlowSpec

The root object of the specification.

Property	Type	Description	Examples
#direction	Direction	Node placement direction. For the flow (left-to-right …), circular and tree modes you provide no coordinates — the engine arranges nodes from lane / main / the TreeSpec . Default: 'left-to-right'. Use 'tree' to lay out a binary tree (in-order rank → horizontal, depth → vertical) and enable the RotateSubtreeAction . Use 'graph' to place nodes yourself via their x / y (free 2D layout) — the escape hatch for an arbitrary graph (Dijkstra, A\*, minimum spanning tree…). Use 'circuit' for an electrical schematic: nodes placed by x / y on a grid, connections drawn as orthogonal wires (no arrow head) by default, and edges anchored on the components' named terminals ("node:pin"). left-to-rightright-to-lefttop-to-bottombottom-to-topcirculargraphtreecircuit	Here top-to-bottom: the flow goes down.
#diagonal_wires	boolean	(direction: 'circuit' only) Draw wires octilinearly: their corners are mitered into exact 45° segments (only 45 / 135 / 225 / 315°), so long L-shapes and staircases collapse into clean diagonal runs, while wires that are already straight (aligned terminals) stay straight. A short perpendicular stub is kept at each component pin, and a miter that would cross a body falls back to a right angle. Override per wire with Connection.diagonal . Default: false (strict horizontal/vertical wires). Ignored by every other direction.
#nodes *	Node[]	Fixed elements of the scene (servers, clients, databases…). They form the permanent decor and are placed automatically according to direction and their lane.
#tree	TreeSpec	Binary-tree topology, required when `direction` is `'tree'` (ignored otherwise). Drives the layout and the auto-drawn parent/child edges, and is the structure mutated by rotate_subtree. See TreeSpec .
#packets *	Packet[]	Mobile elements (requests, responses, messages). Declared here, then moved from one node to another by a move action in the timeline.	A packet declared here, moved by the timeline.
#connections	Connection[]	Permanent arrows/links (decor) displayed upon initialization.	Permanent link (scenery) shown from the start.
#zones	Zone[]	Rectangular regions displayed in the background around a group of nodes.	A zone groups nodes in the background.
#timeline *	Action[]	Animated scenario: ordered list of actions (moves, arrows, comments…) played sequentially. Each root action becomes a navigable step.	An arrow action played as a step.
#description	string	What this animation shows, in one or two sentences — the opening line of the player's text description, which is what a screen-reader user hears before any step. The rest of that description (the cast of elements and every step) is generated from the spec, so omitting this still produces a usable one; it loses only the part no structure can supply, which is what the animation is ABOUT. Per-step wording is Action.description .
#pace	number	Scales the reading time the engine DERIVES for actions that carry something to read — a comment's text, a set_content's panel — when they declare no duration of their own. Above 1 leaves more time (1.25 = a quarter longer), below 1 moves faster. Default: 1. It is the single knob for the whole animation's pace: derive everything, then nudge it in one place if the result reads too fast or too slow for your audience. It deliberately does NOT touch a duration you wrote yourself — that is an explicit intent, not an estimate to be scaled.

Node

A node (server, database, client…). Placed automatically based on direction/lane.

Property	Type	Description	Examples
#id *	string	Unique node identifier (e.g., 'web_server').
#type *	NodeType	Node appearance: pictogram (server, client…), text node (panel) or geometric shape. See previews of each value. desktop laptop client server database mobile user admin users cloud alice bob eve simple_node complex_node square diamond circle triangle parallelogram height_rectangle width_rectangle star resistor potentiometer capacitor polarized_capacitor inductor fuse battery dc_source ac_source current_source diode led transistor_npn transistor_pnp opamp switch push_button lamp motor buzzer ground junction signal ammeter voltmeter antenna transformer mosfet_n mosfet_p transmission_gate and_gate or_gate not_gate nand_gate nor_gate xor_gate xnor_gate buffer_gate and3_gate or3_gate nand3_gate nor3_gate xor3_gate d_flip_flop jk_flip_flop t_flip_flop sr_latch mux_2to1 demux_1to2 half_adder full_adder
#text	string	Label displayed below the node. Supports inline LaTeX between $…$ — "$B_{in}$" renders B with an "in" subscript (see the "Math notation" page).
#visible	boolean	Initial visibility of the node. Default: true. A hidden node can be displayed via the set_visible action.	visible: false at first, revealed by set_visible.
#icon	string	Overlaid badge: name of a known technology (e.g., 'react', 'postgres'), name of a registered icon, or short free text (e.g., 'v2', 'API').	icon: "react" — overlaid tech badge.
#lane	number	Placement row/column (positive integer). Default: 1.	lane 1 (stacked nodes) then lane 2 (next column).
#main	boolean	(circular) Marks the node as a central node. Default: false.	main: true: node at the center (circular layout).
#align_with	string	Aligns this node on the transverse axis of another node (by ID): useful for aligning two nodes from different lanes. Ignored in circular layout.	c aligned with b1.
#x	number	(graph) Horizontal position as a fraction of the Stage, from 0 (left edge) to 1 (right edge). Used only when direction is 'graph'. Optional: omit it and the node is placed AUTOMATICALLY (the layout minimizes edge crossings). Provide it to pin the node as a fixed anchor the auto-placement of the other nodes routes around — handy to fix a source, a target, or the overall orientation. Ignored by every other direction (which derive positions from lane / main / the tree).
#y	number	(graph) Vertical position as a fraction of the Stage, from 0 (top edge) to 1 (bottom edge). Companion of Node.x : used only when direction is 'graph', omit for automatic placement, provide to pin the node. Ignored otherwise.
#merge_edges	boolean	Edge convergence on the node's faces. When true (the default), all connections / arrows / moves attaching to the same face of this node meet at a single anchor point: a many-to-one flow (a flood, a load balancer, a hub) visually converges instead of spreading out. Set to false to fan out the edges instead — each pair gets its own attachment point along the face, ordered to reduce crossings. Useful when a node has several distinct neighbours on the same side and you want to tell the links apart. Independent from the spreading of multiple edges between the *same* two nodes (bidirectional request/response tracks stay distinct regardless). Default: true.
#ports	object	Connection points on a round node's outline (type: 'circle'), so edges meet the circle wherever they naturally point instead of snapping to the four cardinal sides — the reason graphs and binary trees look more organic. - 'direct' (the default for a circle): the edge aims at the node centre and attaches exactly where that straight line crosses the outline — an *infinite* set of possible points, i.e. the most direct path. - a positive integer N: exactly N attach points, spread evenly around the outline; each edge snaps to the nearest one (4 reproduces N/E/S/W on the round contour). Edges landing on the same point merge, like merge_edges. Ignored on non-round node types (which keep cardinal-side anchoring).
#url	string	URL making the node clickable (opens in a new tab).	url makes the node clickable (opens a new tab).
#background_color	string	Background color of the node: shape fill, panel background (simple_node/complex_node), pill behind a pictogram. Accepts a predefined CSS color (name: tomato, steelblue, teal…) or an exact hex value (#3b82f6). No effect on an active set_content.	background_color: "#3b82f6".
#border_color	string	Node border / stroke color (shape stroke, panel borders, stroke color of a pictogram). Same format as background_color. If background_color is defined but not border_color, a coordinated border (darker variant of the background) is automatically generated.	border_color: "steelblue".
#text_color	string	Color of the text displayed IN the node (shape body, panel header/body), only when syntax highlighting is disabled (no language: otherwise syntax colors take precedence). Same format as background_color (predefined name or hex). If not defined but a background_color is, a high-contrast color with the background (black or white) is automatically chosen.	text_color: "tomato".
#content	ObjectContent	Initial content displayed in the node (code terminal, window, etc.).	Initial node content (here a code terminal).
#body	string	Text displayed IN the node, as opposed to text which remains the label below the node. For simple_node / complex_node: panel body (line breaks respected, colored according to language if provided). For geometric shapes (square … star): short centered text in the shape (keep it brief so it doesn't overflow), which supports inline LaTeX between $…$ (see the "Math notation" page). A panel body does NOT: $ is a legitimate character there, and the text goes through syntax highlighting.
#header	string	(complex_node) Header displayed above the body, separated by a line — the node then looks like an HTTP packet. Ignored by simple_node. Colored according to language if provided.	Header above the body (HTTP-packet look).
#language	HighlightLanguage	(simple_node / complex_node) Syntax highlighting language applied to ALL text areas of the node (header and body). Recognized values: see HighlightLanguage . javascriptjstypescripttsjsonsqlbashshshellpythonpycsharpcshtmlxmlmarkupcssjsxtsxhttp	language: "sql" colors the node text.
#rotation	number	Clockwise rotation of the node visual, in degrees. The label below the node stays upright and arrow anchoring is unchanged (the layout box is not rotated). Can be animated with the rotate action. Default: 0. Exception — electrical components: a component's named terminals ( NodeType : resistor, transistor_npn…) DO rotate with the symbol, so a vertical resistor (rotation: 90) has its a/b terminals at the top/bottom. This is the intended behavior for circuits.	rotation: 45 orients the visual; the label stays upright.
#closed	boolean	(Electrical switch / push_button) Initial state of the contact: true = closed (conducting), false = open (the default). Animate it with the toggle action — the lever swings and the state persists. Ignored by every other node type.
#value	string | number	Component value shown in the label (mainly for electrical components): a resistance, capacitance, voltage… Combined with Node.unit to form "<value> <unit>". If Node.text is also set, the value is appended to it ("R1 · 10 kΩ"). Purely a label convenience.
#unit	string	Unit appended after Node.value in the label (kΩ, µF, V, mA…). Ignored when value is absent.

Connection

Permanent arrow (scenery) between two nodes.

Property	Type	Description	Examples
#id	string	Optional identifier.
#from *	string	Source node ID.
#to *	string	Destination node ID.
#style	LineStyle	Line style. Default: 'solid'. soliddotteddashedanimated	style: "dashed" — dashed line.
#path	PathShape	Shape of the link path. Default: 'bezier'. See PathShape . beziersimplebezierstraightstepsmoothstep
#diagonal	boolean	(direction: 'circuit' only) Draw THIS wire octilinearly (true, 45° miters) or force it strictly orthogonal (false), overriding the circuit-wide DataFlowSpec.diagonal_wires . Unset = inherit that circuit default. Ignored outside circuit.
#arrow_head	enum	Arrow head. Default: 'forward'. forwardbackwardbothnone	arrow_head: "both" — arrowhead at both ends.
#text	string	Optional median text. Supports inline LaTeX between $…$ (see the "Math notation" page).	Label shown in the middle of the link.
#color	string	Line color (predefined CSS name or hex). Tints the whole path and its arrow head(s); the median text label keeps the theme color for legibility. Default: the theme's neutral connection color. A runtime set_color on this connection's id recolors it, and an active highlight (accent) takes precedence over both.
#highlighted	boolean	Emphasizes the connection permanently, from initialization — the same accent color, thicker stroke and glow the HighlightAction applies, but static (no timeline action needed). Default: false.

Packet

A movable packet, referenced by a move action.

Property	Type	Description	Examples
#id *	string	Unique identifier of the packet.
#kind *	PacketKind	Packet category, which sets its appearance and expected content: http_packet (header + body via packet_content), sql_request (textual request via request_content), sql_response (response via response_content), a text panel (simple_node / complex_node) that travels: same look and content fields as the homonymous NodeType (body, plus header for complex_node, optionally syntax-highlighted via language), or a tech badge (subicon) that travels: the same Node.icon badge (known technology, registered icon, or short free text), via icon. http_packetsql_requestsql_responsesimple_nodecomplex_nodesubicon	http_packet: blue packet with a header.
#request_content	string	Textual request (e.g., for sql_request).	SQL query carried by a sql_request.
#response_content	SqlResponse	Content of a sql_response: number of rows, header and body (text or table).	Response (here short text; can also be a table).
#packet_content	PacketContent	Content of an http_packet: header (e.g., 'GET /api') and optional body.	Header + body of an http_packet.
#body	string	(simple_node / complex_node) Panel body text (line breaks respected, colored according to language if provided). Same role as Node.body .	simple_node / complex_node packet: the text node, but it travels.
#header	string	(complex_node) Header displayed above the body, separated by a line — the packet then looks like an HTTP packet. Ignored by simple_node. Same role as Node.header .
#language	HighlightLanguage	(simple_node / complex_node) Syntax highlighting language applied to ALL text areas of the panel (header and body). Recognized values: see HighlightLanguage . Same role as Node.language . javascriptjstypescripttsjsonsqlbashshshellpythonpycsharpcshtmlxmlmarkupcssjsxtsxhttp
#icon	string	(subicon) The tech badge that travels: name of a known technology (e.g., 'react', 'postgres'), name of a registered icon, or short free text (e.g., 'v2', 'API'). Same role as Node.icon .	subicon packet: the tech badge, but it travels.

ObjectContent

Property	Type	Description	Examples
#type	ContentType	Content display mode: code (colored terminal), text (browser-like window), image (illustration) or table (data table). imagetextcodetable	type: "text" → window with an address bar.
#value	string	Textual content according to type: source code (code), text (text) or image path/URL (image).	Source code shown in a terminal.
#language	HighlightLanguage	Language for syntax highlighting. Recognized values: see HighlightLanguage . javascriptjstypescripttsjsonsqlbashshshellpythonpycsharpcshtmlxmlmarkupcssjsxtsxhttp	language: "sql" colors the code.
#url	string	(text mode) URL displayed in the window's address bar.	URL shown in the address bar.
#columns	string[]	(table mode) Column headers.	Table column headers.
#rows_data	string | number[][]	(table mode) Data rows.	Table data rows.

Actions

Discriminated union on type. All types share the timing fields (id, duration, wait_for, keep_until, keep_until_next).

move

Moves a packet from from to to.

Property	Type	Description	Examples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration sets the animation speed — slowed to 2.5 s here.
#wait_for	string	ID of another action: this action starts at the end of that one.	The next action starts when this one ends (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Stays visible until the target action starts (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Stays visible until the next step begins.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Stays visible until the end of the timeline.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms delays the start — by 0.9 s here.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms: fade-in — 1.6 s here.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms: fade-out — 1.6 s here.
#type *	"move"		Moves the packet from a to b.
#object *	string	ID of the packet (declared in packets) to move.	object: the packet (declared in packets) being moved.
#from *	string	Start node ID.	from: source node.
#to *	string	Arrival node ID.	to: target node.

arrow

Draws an animated arrow between two nodes.

Property	Type	Description	Examples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration sets the animation speed — slowed to 2.5 s here.
#wait_for	string	ID of another action: this action starts at the end of that one.	The next action starts when this one ends (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Stays visible until the target action starts (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Stays visible until the next step begins.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Stays visible until the end of the timeline.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms delays the start — by 0.9 s here.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms: fade-in — 1.6 s here.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms: fade-out — 1.6 s here.
#type *	"arrow"		Draws an arrow a → b.
#from *	string	Start node ID of the arrow.	from: source node.
#to *	string	Arrival node ID of the arrow.	to: target node.
#text	string	Label displayed in the middle of the arrow. Supports inline LaTeX between $…$ (see the "Math notation" page).	text: label shown in the middle.
#style	LineStyle	Line style: solid, dotted, dashed or animated. Default: 'solid'. soliddotteddashedanimated	style: "dashed" — dashed line.
#path	PathShape	Path shape: bezier, simplebezier, straight, step, smoothstep. Default: 'bezier'. beziersimplebezierstraightstepsmoothstep
#arrow_head	enum	Side(s) where to draw the arrow head. Default: 'forward'. forwardbackwardbothnone	arrow_head: "both" — arrowhead at both ends.

parallel

Executes multiple actions at the same time.

Property	Type	Description	Examples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration sets the animation speed — slowed to 2.5 s here.
#wait_for	string	ID of another action: this action starts at the end of that one.	The next action starts when this one ends (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Stays visible until the target action starts (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Stays visible until the next step begins.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Stays visible until the end of the timeline.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms delays the start — by 0.9 s here.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms: fade-in — 1.6 s here.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms: fade-out — 1.6 s here.
#type *	"parallel"		Several actions played at the same time.
#actions *	Action[]		actions: the list played simultaneously.

loading

Displays a loading spinner on a node.

Property	Type	Description	Examples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration sets the animation speed — slowed to 2.5 s here.
#wait_for	string	ID of another action: this action starts at the end of that one.	The next action starts when this one ends (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Stays visible until the target action starts (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Stays visible until the next step begins.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Stays visible until the end of the timeline.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms delays the start — by 0.9 s here.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms: fade-in — 1.6 s here.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms: fade-out — 1.6 s here.
#type *	"loading"		Loading spinner on the node.
#object *	string		object: the node showing the spinner.

set_content

Mutates the content of a node (code, text, image).

Property	Type	Description	Examples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration sets the animation speed — slowed to 2.5 s here.
#wait_for	string	ID of another action: this action starts at the end of that one.	The next action starts when this one ends (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Stays visible until the target action starts (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Stays visible until the next step begins.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Stays visible until the end of the timeline.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms delays the start — by 0.9 s here.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms: fade-in — 1.6 s here.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms: fade-out — 1.6 s here.
#type *	"set_content"		The node content becomes a code terminal.
#object *	string		object: the node whose content changes.
#content *	ObjectContent		content: the new content shown.

comment

Displays a comment bubble near a node, or at the top of the stage if object is omitted.

Property	Type	Description	Examples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration sets the animation speed — slowed to 2.5 s here.
#wait_for	string	ID of another action: this action starts at the end of that one.	The next action starts when this one ends (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Stays visible until the target action starts (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Stays visible until the next step begins.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Stays visible until the end of the timeline.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms delays the start — by 0.9 s here.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms: fade-in — 1.6 s here.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms: fade-out — 1.6 s here.
#type *	"comment"		Comment bubble near the node.
#object	string	ID of the node near which to display the comment. Omitted = omniscient comment (top of the stage).	object: commented node (omitted = top of the stage).
#text *	string	Supports inline LaTeX between $…$ (see the "Math notation" page).	text: the bubble text.

highlight

Highlights a static node or a connection (by ID).

Property	Type	Description	Examples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration sets the animation speed — slowed to 2.5 s here.
#wait_for	string	ID of another action: this action starts at the end of that one.	The next action starts when this one ends (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Stays visible until the target action starts (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Stays visible until the next step begins.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Stays visible until the end of the timeline.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms delays the start — by 0.9 s here.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms: fade-in — 1.6 s here.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms: fade-out — 1.6 s here.
#type *	"highlight"		The node is highlighted.
#object *	string	ID of a static node OR a connection to highlight.	object: node (or connection) to highlight.

rotate

Animates the visual rotation of a node. Two mutually exclusive modes: - Target angle (to): a single eased rotation toward an absolute angle. The starting angle is the node's current rotation (its static rotation, or the target of a previous rotate), so successive rotations chain. - Continuous spin (spin): the node turns at a constant speed (linear, no easing) for as long as the action lasts. How long is driven by the usual timing fields — duration (spin that long), keep_until (spin until another action starts), or keep_until_end (spin until the end of the timeline). Only the visual rotates; the label stays upright. The angle reached when the rotation ends persists until the end of the timeline.

Property	Type	Description	Examples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration sets the animation speed — slowed to 2.5 s here.
#wait_for	string	ID of another action: this action starts at the end of that one.	The next action starts when this one ends (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Stays visible until the target action starts (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Stays visible until the next step begins.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Stays visible until the end of the timeline.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms delays the start — by 0.9 s here.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms: fade-in — 1.6 s here.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms: fade-out — 1.6 s here.
#type *	"rotate"		Animated rotation of the node visual.
#object *	string	ID of the node to rotate.	object: the node to rotate.
#to	number	Target angle in degrees (absolute, clockwise). Mutually exclusive with spin (which takes precedence if both are set).	to: absolute target angle in degrees (eased). Exclusive with spin.
#spin	number	Continuous spin speed in degrees per second: positive turns clockwise, negative counter-clockwise. Mutually exclusive with to. The spin lasts for duration ms (default 600), or until keep_until / keep_until_end when set; the angle reached then persists.	spin: continuous speed in deg/s (signed); spins for duration, or until keep_until / keep_until_end.