Your architectures, animated in JSON.
An engine that turns a JSON specification into a deterministic, navigable animation, with one thin binding per framework. Perfect for your architecture demos, tutorials and interactive documentation.
Demos
Three lines of JSON.
Endless animations.
Every scenario below is generated from the JSON spec shown. Edit the spec, and the animation updates instantly.
Client-server architecture
Features
Everything you need, nothing more.
Automatic layout
Define only the lanes — the library positions each node automatically, in left-to-right, circular or top-to-bottom.
Built-in player
Play, pause, restart and step-by-step navigation. Your users control the animation at their own pace.
Simple JSON spec
Describe nodes, connections and actions in a single JSON object. TypeScript-first, with a complete schema for autocompletion.
Parallel actions
Run several animations simultaneously with the `parallel` type. Perfect for illustrating concurrent requests or microservices.
Rich content
Nodes can display syntax-highlighted code, formatted text or images, and a `subicon` badge for the tech (React, PostgreSQL, Node…). Content can change mid-animation.
No framework required
One engine, three thin bindings: `<DataFlowPlayer>` in React, `<dfa-player>` in Angular, `<dataflow-player>` everywhere else. The core also mounts on its own.
Ready to get started?
Your next animation, just a JSON away.
Install the library, copy an example, and you'll have your first animation in under 5 minutes.