https://github.com/dtoyoda10/reactflow-simple-ui

React Flow UI is a minimal and customizable visual editor built with React and React Flow. It allows users to create and manage node-based workflows with drag-and-drop functionality, custom node types, and dynamic edge connections.
https://github.com/dtoyoda10/reactflow-simple-ui

react reactflow

Last synced: 11 days ago
JSON representation

React Flow UI is a minimal and customizable visual editor built with React and React Flow. It allows users to create and manage node-based workflows with drag-and-drop functionality, custom node types, and dynamic edge connections.

• Host: GitHub
• URL: https://github.com/dtoyoda10/reactflow-simple-ui
• Owner: dtoyoda10
• Created: 2025-04-09T16:59:25.000Z (12 days ago)
• Default Branch: main
• Last Pushed: 2025-04-09T17:07:45.000Z (12 days ago)
• Last Synced: 2025-04-09T18:25:22.826Z (12 days ago)
• Topics: react, reactflow
• Language: JavaScript
• Homepage:
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Flow UI

A simple and extensible React application using [React Flow](https://reactflow.dev/) to build node-based diagrams for workflows, logic builders, or visual scripting tools.

##  Features

-  Drag-and-drop node layout  

-  Connect nodes with edges  

-  Auto-layout support  

-  Custom node types and styling  

-  React Flow hooks & events integrated  

##  Tech Stack

- React

- React Flow (`@xyflow/react`)

- Tailwind CSS (optional)

- Zustand (for state management, optional)

##  Installation

```bash

git clone https://github.com/dtoyoda10/reactflow-simple-UI.git

cd reactflow-simple-UI

npm install

npm run dev

```

##  Customization

You can customize:

- Node types (`nodeTypes`)

- Edge types (`edgeTypes`)

- Layout logic (`useLayout` hook)

- Styling (CSS/Tailwind/Styled-components)

##  Example Node

```jsx

const CustomNode = ({ data }) => (

  


    
{data.title}

  

);

```


## 👨‍💻 Author

Created by [Daichi](https://dtoyoda10.vercel.app/)