https://github.com/chrisjpatty/flume

Extract logic from your apps with a user-friendly node editor powered by React.
https://github.com/chrisjpatty/flume

flume javascript node react

Last synced: 25 days ago
JSON representation

Extract logic from your apps with a user-friendly node editor powered by React.

• Host: GitHub
• URL: https://github.com/chrisjpatty/flume
• Owner: chrisjpatty
• License: mit
• Created: 2020-03-01T07:46:21.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-10-17T04:30:43.000Z (about 1 year ago)
• Last Synced: 2024-10-14T00:02:31.766Z (26 days ago)
• Topics: flume, javascript, node, react
• Language: TypeScript
• Homepage: https://flume.dev
• Size: 8.03 MB
• Stars: 1,436
• Watchers: 35
• Forks: 148
• Open Issues: 81
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-node-based-uis - flume - Business logic graph editor (Javascript Libraries / Misc)
• awesome-list - flume - friendly node editor powered by React. | chrisjpatty | 715 | (JavaScript)

README

        
![](https://raw.githubusercontent.com/chrisjpatty/flume/master/logo.png?token=ADRZXI4TFKM3FXBEBQHQURK6QIJ6Q)

[![NPM](https://img.shields.io/npm/v/flume.svg)](https://www.npmjs.com/package/flume) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Minzip Size](https://badgen.net/bundlephobia/minzip/flume)](https://bundlephobia.com/result?p=flume)

# Flume

## Guides & Examples

[flume.dev](https://flume.dev)

## Install

```bash

npm install --save flume

```

## Usage

### Defining your nodes

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"})

    ]

  })

```

### Rendering the node editor

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 (

    
 // Give the wrapper a width & height

      

    

  )

}

```


For more complete documentation visit: [flume.dev](https://flume.dev)

## License

MIT © [chrisjpatty](https://github.com/chrisjpatty)