{"id":20230031,"url":"https://github.com/lochbrunner/react-flow-editor","last_synced_at":"2025-04-07T08:25:02.460Z","repository":{"id":33019826,"uuid":"145760912","full_name":"lochbrunner/react-flow-editor","owner":"lochbrunner","description":"React component which enables creating flow editors with ease","archived":false,"fork":false,"pushed_at":"2023-01-06T01:58:10.000Z","size":16647,"stargazers_count":197,"open_issues_count":84,"forks_count":21,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-31T06:06:54.213Z","etag":null,"topics":["flow-based-programming","react","react-component","scss","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lochbrunner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-22T20:44:41.000Z","updated_at":"2025-02-22T04:11:03.000Z","dependencies_parsed_at":"2023-01-14T23:15:33.383Z","dependency_job_id":null,"html_url":"https://github.com/lochbrunner/react-flow-editor","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lochbrunner%2Freact-flow-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lochbrunner%2Freact-flow-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lochbrunner%2Freact-flow-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lochbrunner%2Freact-flow-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lochbrunner","download_url":"https://codeload.github.com/lochbrunner/react-flow-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247616584,"owners_count":20967418,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flow-based-programming","react","react-component","scss","typescript"],"created_at":"2024-11-14T07:38:02.139Z","updated_at":"2025-04-07T08:25:02.438Z","avatar_url":"https://github.com/lochbrunner.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/react-flow-editor.svg)](https://badge.fury.io/js/react-flow-editor)\n[![Downloads](https://img.shields.io/npm/dt/react-flow-editor.svg)](https://www.npmjs.com/package/react-flow-editor)\n[![GitHub issues](https://img.shields.io/github/issues/lochbrunner/react-flow-editor.svg)](https://github.com/lochbrunner/react-flow-editor/issues)\n![David](https://img.shields.io/david/lochbrunner/react-flow-editor.svg)\n![David](https://img.shields.io/david/dev/lochbrunner/react-flow-editor.svg)\n![lib](https://github.com/lochbrunner/react-flow-editor/workflows/lib/badge.svg)\n![examples](https://github.com/lochbrunner/react-flow-editor/workflows/examples/badge.svg)\n\n# Graph editor\n\nAn ui library for creating flow based editors with react and typescript/javascript.\n\n![Screen Video](./docs/screen.gif)\n\nTry the [demo](https://lochbrunner.github.io/react-flow-editor/simple) in your browser.\n\nIf you are interested in *redux* dive into the [example](./example/redux/) or try the more advanced [demo](https://lochbrunner.github.io/react-flow-editor/redux/index.html).\n\n## Getting started\n\n```typescript\nimport * as ReactDOM from 'react-dom';\nimport { Editor, Node, Config} from 'react-flow-editor';\n\n// Create the initial graph\nconst nodes: Node[] = [\n    {\n        id: 'Node 1',\n        name: 'First Node',\n        payload: { h1: 'hello' },\n        inputs: [{\n            connection: [], name: 'input 1'\n        }],\n        outputs: []\n}];\n\n// Renders the body of each node\nfunction resolver(data: any): JSX.Element {\n    if (data.type === '') return \u003ch2 /\u003e;\n    return (\n        \u003cp\u003e{data.payload.h1}\u003c/p\u003e\n    );\n}\n\nconst config: Config = {\n    resolver,\n    connectionType: 'bezier',\n    grid: true,\n    demoMode: true,\n};\n\nReactDOM.render(\n    \u003cdiv\u003e\n        \u003cEditor config={config} nodes={nodes} /\u003e\n    \u003c/div\u003e,\n    document.getElementById('root')\n);\n\n```\n\nSee [example](./example/) for usage.\n\n## Side effects\n\n* Before creating new nodes, the node under the cursor is a direct child of `document.body`.\n* In order to decouple editor and menu components they use `window.onStartCreatingNewNode` to communicate.\n\n## API\n\n### Configuration\n\nThe config interface looks as follow\n\n```typescript\nexport interface Config {\n    resolver: (payload: any) =\u003e JSX.Element;\n    connectionValidator?: (output: { nodeId: string, port: number }, input: { nodeId: string, port: number }) =\u003e boolean;\n    onChanged?: (node: ChangeAction) =\u003e void;\n    connectionType?: 'bezier' | 'linear';\n    grid?: boolean | { size: number };\n    connectionAnchorsLength?: number;\n    direction?: 'ew' | 'we';\n    demoMode?: boolean;\n}\n```\n\n| Property                  | Description                                                                                                                                  |\n| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |\n| `resolver`                | A function returning a React component which gets placed into the node                                                                       |\n| `connectionValidator`     | A function which evaluates if a possible connection might be valid or not                                                                    |\n| `onChanged`               | A callback which gets called when the flow graph changed                                                                                     |\n| `connectionType`          | The geometry type of the connection lines between the nodes                                                                                  |\n| `grid`                    | Specifies if the grid should be rendered or not (Default is `true`). Optional specifies distances between the lines (`size`). Default is 18. |\n| `connectionAnchorsLength` | Specifies the langth of the anker when using `bezier` as `connectionType`.                                                                   |\n| `direction`               | Specifies the orientation of the input and output ports. Default is `we`.                                                                    |\n| `demoMode`                | If this set to true, the Editor takes care of updating the nodes in the props. Be carful using this in production.                           |\n\n### Nodes\n\nA node is specified by the following interface\n\n```typescript\nexport interface Node {\n  name: string;\n  type: string;\n  id: string;\n  inputs: InputPort[];\n  outputs: OutputPort[];\n  payload?: any;\n  position?: Vector2d;\n  properties?: {display: 'stacked' | 'only-dots'};\n  classNames?: string[];\n  style: Style;\n}\n```\n\nFor now `InputPort` and `OutputPort` are identically to the `Port` interface:\n\n```typescript\nexport interface Port {\n  name: string;\n  connection?: Connection|Connection[];\n  payload?: any;\n  renderer?: (connection: Port) =\u003e JSX.Element;\n}\n```\n\n```typescript\nexport interface Connection {\n  nodeId: string;\n  port: number;\n  classNames?: string[];\n  notes?: string;\n}\n```\n\n### Themes\n\nBy default we recommend to import the default theme with\n\n```sass\n@import \"react-flow-editor/dist/default-theme.scss\";\n```\n\nBut you can change the style of all components by coping that file and adjust its values.\n\n### Postcss support\n\nWhen using postcss generated class names just forward them with\n\n```ts\nimport * as style from './style.scss';\n\n// ...\n\nconst config: Config = {\n    resolver,\n    connectionType: 'bezier',\n    grid: true,\n    demoMode: true,\n    direction: 'we',\n    style\n};\n// ...\n```\n\nSee [Example](./example/postcss).\n\n## Roadmap\n\n* Editing the title of the node\n* Grouping nodes (similar to *Blender*)\n* Optimize hooking\n* Fix zooming and scrolling\n\n## Contributing\n\nThis library is very young. So please consider that it might have some bugs, but I will try to fix them, when they get reported.\n\nIf you have any problems or miss an important feature:\n\n**Feel free to create a PR or report an issue!**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flochbrunner%2Freact-flow-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flochbrunner%2Freact-flow-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flochbrunner%2Freact-flow-editor/lists"}