✦ React Logic Workflow Builder

A node-based visual logic and graph editor built with React, @xyflow/react, Zustand, and Tailwind CSS v4.

✨ Idea

React Logic Workflow Builder is a visual programming interface: drag nodes from the sidebar onto the canvas, connect them with edges, and see real-time data evaluation. It serves as a strong foundation for building flow-based applications like Zapier clones, custom logic engines, or data processing pipelines.

⚙️ Stack

• React 19 + TypeScript 6
• Vite 8
• Tailwind CSS 4 via @tailwindcss/vite
• @xyflow/react for the node graph engine
• Zustand for real-time state evaluation
• Lucide React for icons

⚡ Features

• Drag and Drop Interface: Build logic flows by dragging nodes from the sidebar onto the canvas.
• 10 Unique Node Types:
  • Inputs: Number, Text, Boolean
  • Processes: Math (+, -, ×, ÷), Text Ops (Concat, Upper, Lower), Logic Gates (AND, OR, NOT), Comparison (==, >, <)
  • Utilities: Random Generator, Tick Timer
  • Output: Result Display
• Real-time Evaluation: The graph evaluates instantly when inputs or connections change.
• Responsive UI: The sidebar neatly tucks away behind a hamburger menu on mobile devices, ensuring a clean mobile canvas experience.
• Topological Updates: Uses multi-pass fixed-point iteration for reactive forward-pass calculations across mixed data types.

📁 Project Structure

react-logic-workflow-builder/
|-- public/
|   `-- favicon.svg
|-- src/
|   |-- nodes/
|   |   |-- BooleanInputNode.tsx
|   |   |-- CompareNode.tsx
|   |   |-- LogicNode.tsx
|   |   |-- MathNode.tsx
|   |   |-- NumberInputNode.tsx
|   |   |-- RandomNode.tsx
|   |   |-- ResultNode.tsx
|   |   |-- TextInputNode.tsx
|   |   |-- TextOpNode.tsx
|   |   `-- TimerNode.tsx
|   |-- App.tsx
|   |-- Sidebar.tsx
|   |-- index.css
|   |-- main.tsx
|   `-- store.ts
|-- LICENSE
|-- package.json
|-- vercel.json
`-- README.md

🚀 Run

npm install
npm run dev

🧪 Checks

npm run build

▲ Deploy

📄 License

MIT License. See LICENSE.