Introduction
DataFlow Animator compiles a JSON specification into a deterministic, navigable data flow animation.
One engine, four packages
The engine, the DOM renderer and the stylesheet live in the core. Each binding adds nothing but the glue its framework needs: it copies neither the engine nor the CSS.
| Package | API | Role |
|---|---|---|
@dataflow-animator/core | mountPlayer() | The engine, the DOM renderer and the stylesheet. Mounts on its own, with no framework. |
@dataflow-animator/react | <DataFlowPlayer> | The React binding (18 or 19). |
@dataflow-animator/element | <dataflow-player> | The custom element: plain HTML, Vue, Svelte, Astro… and a CDN with no build step. |
@dataflow-animator/angular | <dfa-player> | The standalone Angular component (22). |
The stylesheet is always the core's, whichever binding you use — and it is not optional. Compare the four surfaces →
Overview
You describe:
- static objects (the nodes: servers, clients, databases…);
- dynamic objects (the payloads that will move: HTTP packets, SQL queries…);
- a sequence of actions (moves, arrows, comments, loaders…).
The engine places the nodes, draws the paths and plays the timeline without any manual coordinates.
Loading…
Principles
- Time is the single source of truth. The engine compiles the spec into a pure timeline: t (ms) → visual state. Backward seeking and step-by-step navigation are trivial and deterministic.
- Automatic layout. Linear (based on direction and lane) or circular. No coordinates to provide.
- Fast rendering. A retained DOM renderer mutates the frame in place instead of re-rendering it — about 6x less script time per frame. It mounts on the client, so the diagram appears on hydration.
- Framework-agnostic. The core imports no framework. React, Angular and the custom element mount exactly the same renderer — an equality this repository checks to the pixel.
- Extensible. Node icons, tech sub-icons and syntax highlighting are registrable / replaceable.
Going further
- Installation — get started in 5 lines, in your framework.
- Packages and bindings — React, Angular, the custom element, or the core on its own.
- Nodes — types, badges, content and visibility.
- Packets — the dynamic objects that move.
- Connections and zones — the permanent scenery of the stage.
- Layout — how nodes are placed.
- Timeline and steps — how actions chain and persist.
- Math notation — inline LaTeX between $…$ in labels.
- Accessibility — the animation rendered as text too, keyboard-navigable and readable by a screen reader.
- Action types — move, arrow, parallel, loading, set_content, comment, highlight, set_visible, wait.
- Components and JavaScript API — <DataFlowPlayer>'s React props, icons, syntax highlighting.
- API reference (JSON spec) — generated from the JSON Schema.