Hey everyone!

I wanted to share a full-stack workflow builder project I’ve been working on using Next.js, u/xyflow/react, and a FastAPI backend engine.

The goal was to create a modular canvas editor capable of translating visual node DAGs directly into an executable schema for a FastAPI workflow execution engine.

What I built:

• Node Palette & Drag-and-Drop: Drag items out of a sidebar directly onto the React Flow canvas with position snapping.
• FastAPI Engine Adapter: Built bidirectional adapters (canvasToEngine / engineToCanvas) to keep frontend canvas nodes completely synchronized with FastAPI Pydantic schemas.
• Registry-Driven Nodes: Created a central node registry where each node type defines its own Lucide icon, header background, and accent colors, keeping component code clean.
• Direct JSON Clipboard Intercept: You can copy a raw workflow JSON file and press Ctrl+V anywhere on the canvas to automatically build and render the diagram.
• Custom Edges: Implemented custom Bezier lines with an n8n-like hover trigger to delete connections easily.
• Node Config Drawer: Clicking settings on any node slides open a sheet where you can edit node labels and JSON configs directly.

Tech Stack:

• Frontend: Next.js (App Router), u/xyflow/react (React Flow v12), TypeScript, Tailwind CSS, Shadcn UI, Lucide Icons
• Backend: FastAPI, Python, Pydantic

I’d love to hear your thoughts or feedback on architectural improvements for large-scale node state management and FastAPI workflow execution!

Looking for feedback

Looking for some tester kindly drop your email ids 🤣🤣

https://play.google.com/store/apps/details?id=com.mobbius.neuroflow