is a visual editor for Dataflow programming, powered by React

Description | Installation | API | Examples | License

Whatchers Stargazers Forks

NPM version Build Status Dependency Status JavaScript Style Guide Change log

The image below is an SVG generated server side by flow-view Canvas: click it to see online example.

sample view

The following animated gif represents a family tree. You can use autocompletion thanks to nodeList option parameter.

The Simpsons


flow-view is a reusable visual editor you can use to provide a GUI to your dataflow project. I am using it for a minimal Dataflow programming engine: dflow.

The following features are implemented:

Let’s give Node.js a common visual interface. Use flow-view!

Any feedback is welcome!


Using npm

Note that flow-view requires React as a peer dependency. If they are not already installed, with npm do

npm install react react-dom --save-dev

I guess you need it as a development dependency to build your project, so probably you need to launch

npm install flow-view --save-dev

Using a CDN

Adding this to your HTML page

<script src="https://unpkg.com/[email protected]/dist/flow-view.min.js"></script>


new Canvas(id|element)

flow-view Canvas constructor

Suppose your container id is drawing. In your HTML, place a div where you want to mount the canvas.

  #drawing {
    display: inline-block;
    width: 100%;
    height: 100%;
<div id="drawing"></div>

Create an empty canvas

var Canvas = require('flow-view').Canvas

var canvas = new Canvas('drawing')

Note that nothing will happen until you call the canvas.render(view) method.


It is the DOM element container, if any. On server side, this attribute is null.


Draws a view, that is a collection of nodes and links. On server side it generates an SVG output like the one you see on top of this README.md, see render/serverside.js example.

Follows a basic example.

  node: {
    a: {
      x: 80, y: 100,
      text: 'Drag me',
      outs: ['out1', 'out2', 'out3']
    b: {
      x: 180, y: 200,
      text: 'Click me',
      ins: ['in0', { name: 'in1', type: 'bool' }],
      outs: ['return']
  link: {
    c: {
      from: ['a', 0],
      to: ['b', 1]


See event/emitter.js example. The following events are emitted by canvas:

name data
createInputPin [nodeId, position], pin
createLink link, linkId
createNode node, nodeId
createOutputPin [nodeId, position], pin
deleteLink linkId
deleteNode nodeId
deleteInputPin [nodeId, position]
deleteOutputPin [nodeId, position]
updateNodesGeometry {id1: node1, id2: node2, …}


Few hotkyes are defined.

Arrows translate currently selected nodes, if also SHIFT is pressed translation is performed pixel by pixel. ESC cancel current selection. Keys i and o create respectively input and output pins from current selected node. If also SHIFT is pressed, pins are deleted.

Node spec

A node describes an element and has the following attributes:

An pin can be either a string or an object with the name attribute which must be a string. Input pins default to string in${position}. Output pins default to string out${position}. If ins is undefined, the node is a root. If outs is undefined, the node is a leaf.

A link describes a connection between elements and has the following attributes:


Try online example.

You can also clone this repo and install dependencies to run examples locally

git clone https://github.com/fibo/flow-view
cd flow-view
npm install

Every example has its homonym npm script, for example basic/usage.js example is launched by command

npm run example_basic_usage

Available examples are:

Note that examples are intended to be used for development, hence there is an overhead at start time. For instance: client side examples use hot reload, and are transpiled on the fly; also server side example will launch babel before starting.