[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Showcase](/c/showcase/41)

# NodeFlow // A Browser-Based Visual Workflow Builder (No Backend, No Setup)

86 views · 6 likes · 8 posts


Abhivarde (@abhivarde) · 2026-02-22 · ♥ 2

Hey Commnunity,

I built **NodeFlow**, a visual node-based workflow builder inspired by tools like [n8n](https://n8n.io) but designed to run entirely in the browser with zero setup and no backend.

🔗 **Live Demo:** https://nodeflow.abhivarde.in

## 🚀 What Makes It Interesting

- Drag-and-drop node canvas  
- Conditional edges (e.g. “user says yes”)  
- Mark a start node  
- Live JSON preview as you build  
- Import/export workflow JSON  
- Undo/Redo with full history  
- Share any flow via short URL (no account required)  
- Inline validation warnings (no blocking errors)  
- Light & Dark mode  

## 🛠 Tech Stack

- **Framework:** Next.js 16 (deployed on Vercel)  
- **Canvas Engine:** React Flow  
- **UI:** shadcn/ui  
- **State Management:** Zustand  
- **Styling:** Tailwind CSS v4  

## 🧠 Architecture Highlights

- No backend required, flows are encoded as base64 in the URL  
- URL shortening via TinyURL API  
- Undo/Redo built using `structuredClone` snapshot stacks  
- Zustand for minimal and scalable state architecture  
- Fully client-side workflow reconstruction from JSON  

Built as a side project to explore advanced canvas interactions, state management patterns, and zero-backend architecture on Vercel.

Would love feedback from the community 🚀


Abhivarde (@abhivarde) · 2026-02-24 · ♥ 1

![nodeflow|690x362](upload://rLwFmujt4iaJsZUqxOSrUftLeO8.jpeg)


Abhivarde (@abhivarde) · 2026-02-25 · ♥ 1

Also shared a short demo on X and LinkedIn if you want a quick walkthrough of how NodeFlow works.

If you find it useful, would really appreciate a like or comment and happy to hear your thoughts.

LinkedIn demo:  https://www.linkedin.com/posts/abhi-varde_webdev-nocode-automation-activity-7432076867765010433-NngQ
X demo:

https://x.com/varde_abhi/status/2026296054912786644


Pauline P. Narvas (@pawlean) · 2026-02-25 · ♥ 1

Great ship, as always Abhivarde!


Abhivarde (@abhivarde) · 2026-02-25


Appreciate the continued support from the Vercel community!  :raising_hands:


Abhivarde (@abhivarde) · 2026-02-27

Hey community! NodeFlow is now also available in the Next.js Discord showcase, check it out there too!
→ https://discord.com/channels/752553802359505017/1476263509473099848


Abhivarde (@abhivarde) · 2026-03-05

## NodeFlow just shipped its first feature update.

→ Color-coded nodes reflected in the MiniMap  
→ 4 pre-built templates to kill the blank canvas problem  
→ Cleaner sidebar UI with consistent components throughout  

No backend. No login. Runs entirely in the browser.

| Templates	| Flow View	| Node Colors |
|:---------:|:---------:|:-----------:|
| 	| 	|  |

What kind of template would be useful for your workflow?


Abhivarde (@abhivarde) · 2026-03-06 · ♥ 1

[quote="Abhivarde, post:7, topic:34254, username:abhivarde"]
What kind of template would be useful for your workflow?
[/quote]

demo: 

https://x.com/varde_abhi/status/2029595294128578639