VueWeave is a modern node-based flow editor for Vue 3 developers. Build visual workflows, AI pipelines, and interactive diagrams with minimal code. 🎨 Fully customizable nodes with Vue templates 🔗 Flexible connections with validation 💾 Pinia state management with undo/redo 📦 TypeScript-first, zero config ⚡ Lightweight & performant Perfect for workflow builders, AI tools, and data visualizations. Unlike React Flow or outdated LiteGraph, VueWeave embraces modern Vue 3 features you love.
No reviews yetBe the first to leave a review for VueWeave
Maker
📌
Hey Product Hunt! 👋
I'm excited to launch **VueWeave** - a modern node-based flow editor built specifically for Vue 3!
### 🚀 The Story Behind VueWeave
When I started building **GraphAI**, a workflow tool for AI pipelines, I immediately hit a wall. I needed a flow editor that could:
- Handle complex edge connections with fine-grained input control
- Allow deep customization of node appearance and behavior
- Work seamlessly with Vue 3
I tried **React Flow** - great tool, but the edge input implementation wasn't flexible enough for my needs, and it's React-only.
I tried **LiteGraph** - node customization was way too complex and the architecture felt dated.
**There was no modern flow editor for Vue.** So I built my own UI from scratch.
After successfully creating **Grapys** (our GUI tool), I realized this could help so many other developers facing the same problem. That's why I extracted it into **VueWeave** - to make it available for everyone!
### ✨ What makes VueWeave different
**Born from Real Needs**: Built to solve actual production challenges, not theoretical use cases.
**Flexible Edge Validation**: Fine-grained control over connections - exactly what I needed for GraphAI:
```typescript
// Control exactly which connections are allowed
validateConnection: (expectEdge, existingEdges) => {
// Your custom logic here
}
```
**Easy Node Customization**: Use Vue slots - no complex APIs:
```vue
```
**Production Proven**: Already powering Grapys in production!
### 🎯 My Vision
I want to see more amazing workflow tools and AI applications built on top of VueWeave! Whether you're building:
- AI pipeline designers
- Data flow visualizations
- Automation tools
- Visual programming interfaces
- Process management systems
VueWeave should make it easier for you to build great tools.
### 🙏 I need your help!
**Please try it and give feedback!**
Your real-world use cases will help make VueWeave better for everyone. Let's build a thriving ecosystem of node-based flow tools together!
**Live demos**: https://vueweave.com/
- Interactive demo with editable nodes
- Validation examples (the flexibility I needed!)
- Styling examples
**Quick start**: `npm install vueweave`
**Full API docs**: Check out SPEC.md on GitHub
### 💬 Let's talk!
- What are you planning to build with it?
- What features would make your workflow easier?
- Any pain points you've experienced with other flow editors?
I'm here to answer questions and excited to hear your ideas! 🚀
Together, let's make the Vue ecosystem richer with better workflow and AI tools! 🎉