Flume

!A screenshot of a live Flume editor

Guides & Examples

flume.dev

Install

``bash
npm install --save flume
`

Usage

$3

Import FlumeConfig and use it to define the nodes and ports that will make up your node editor.

`jsx
import { FlumeConfig, Controls, Colors } from "flume";

const flumeConfig = new FlumeConfig()

flumeConfig
.addPortType({
type: "number",
name: "number",
label: "Number",
color: Colors.red,
controls: [
Controls.number({
name: "num",
label: "Number"
})
]
})
.addNodeType({
type: "number",
label: "Number",
initialWidth: 150,
inputs: ports => [
ports.number()
],
outputs: ports => [
ports.number()
]
})
.addNodeType({
type: "addNumbers",
label: "Add Numbers",
initialWidth: 150,
inputs: ports => [
ports.number({name: "num1"}),
ports.number({name: "num2"})
],
outputs: ports => [
ports.number({name: "result"})
]
})
`

$3

To render the node editor, import NodeEditor and pass it your nodeTypes and portTypes from the configuration you created.

`jsx
import React from 'react'
import { NodeEditor } from 'flume'
import config from './config'

const App = () => {

return (



)
}
``

For more complete documentation visit: flume.dev

License

MIT © chrisjpatty