node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



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:

  • Create nodes and links using a visual interface.
  • SVG server side rendering.
  • Custom items: nodes can be customized using React.
  • Events are emitted to achieve integration with other packages.

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=""></script>


new Canvas(id|element)

flow-view Canvas constructor

  • @param {String|HTMLElement} container id or DOM element
  • @param {Object} [opt] collection to be customized
  • @param {Object} [opt.node] collection of custom nodes
  • @param {Object} [opt.node.DefaultNode] is the base class component
  • @param {Array} [opt.nodeList] is a list of strings used for nodes autocompletion
  • @param {Object} [opt.theme] see theme.js source file
  • @param {Object} [opt.util]
  • @param {Function} [opt.util.typeOfNode]
  • @returns {Object} canvas

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, see render/serverside.js example.

  • @param {Object} [view] can be empty
  • @param {Number} [view.height] defaults to container height
  • @param {Number} [view.width] defaults to container width
  • @param {Object}, see link spec below
  • @param {Object} view.node, see node spec below
  • @param {Object} [model], can be used for custom items
  • @param {Object} [callback] called on serverside context
  • @returns {void}

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:

  • @param Number x coordinate of top left vertex
  • @param Number y coordinate of top left vertex
  • @param String text
  • @param Array | undefined ins list of input pins
  • @param Array | undefined outs list of output pins
  • @param Number [width], defaults to a value depending on text lenght and number of pins.

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.

Link spec

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

  • @param Array from has exactly two elements
  • @param String from[0] is the key of the source node
  • @param Number from[1] is the output pin position
  • @param Array to has exactly two elements
  • @param String to[0] is the key of the target node
  • @param Number to[1] is the input pin position


Try online example.

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

git clone
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.