Home

Awesome

<h1 align="center"> <img alt="flow" height="350px" src="https://raw.githack.com/sunag/flow/master/media/flow-box-shadow.png"/> </h1> <h3 align="center"> Node-Graph, lightweight, cross-browser UI library. </h3> <p align="center"> Flow is basead on native components of <b>HTML5</b> and the code on <b>ES6</b>. It is modular, three-shaking and class-based. </p> <p align="center"> <img src="https://img.shields.io/badge/build-passing-green"> <img src="https://img.shields.io/badge/flow.min.js-17kB-0099FF"> </p>

:rocket: Examples

:keyboard: JavaScript

import * as Flow from '../build/flow.module.js';

const object = {
	'string': 'Hello World!',
	'color': 0x339933,
	'number': 100,
	'slider': .5,
	'text': 'Text Area'
};

const node = new Flow.PanelNode( 'Panel', 'center' );
node.addString( object, 'string' );
node.addColor( object, 'color' );
node.addNumber( object, 'number' );
node.addSlider( object, 'slider', 0, 1 );
node.addText( object, 'text' );
node.addButton( 'My Button' );

document.body.appendChild( node.dom );

Open example

:art: HTML5

Use your own JavaScript with Flow layout and style.

<f-node class="center rounded">
	<f-element class="title left">
		<span>Made With Love ā¤</span>
		<f-toolbar>
			<span class="button">āœ–</span>
		</f-toolbar>
	</f-element>
	<f-element>
		<f-label>Node</f-label>
		<f-inputs>
			<input type="text" value="Hello World!"/>
		</f-inputs>
	</f-element>
	...
</f-node>

Open example

:footprints: Inspiration and special thanks