Real-time collaborative canvas editor built with React Flow and Yjs.
- Real-time Collaboration - Multiple users can edit the same canvas simultaneously
- Conflict-free Sync - Powered by Yjs CRDT for seamless concurrent editing
- User Presence - See other users' cursors and selections in real-time
- Scoped Undo/Redo - Each user has independent undo history
- Node Types - Image and video nodes with more to come
- Responsive UI - Built with shadcn/ui and Tailwind CSS
| Layer | Technology |
|---|---|
| Node Editor | React Flow |
| Real-time Sync | Yjs + Hocuspocus |
| Frontend | Next.js 16 + React 19 |
| Backend | Hono + Bun |
| Database | SQLite + Drizzle ORM |
| UI Components | shadcn/ui |
| Styling | Tailwind CSS v4 |
| Build System | Turborepo |
| Package Manager | pnpm |
- Node.js >= 20
- pnpm >= 10
- Bun (for backend)
# Clone the repository
git clone https://github.com/SweetRetry/flowpocus.git
cd flowpocus
# Install dependencies
pnpm install
# Initialize database
pnpm db:push# Start all services (frontend + backend)
pnpm dev
# Or start individually
pnpm dev:web # Frontend at http://localhost:3000
pnpm dev:backend # Backend at http://localhost:3001
pnpm dev:cli commands listVisit http://localhost:3000/canvas/{any-id} to start collaborating.
Canvas Command contract 由 packages/commands 共享，执行逻辑只存在于 backend。CLI 使用
Commander + Zod，通过 server API 发现和执行 command：
# 创建目标 canvas
pnpm dev:cli canvases create --name "Agent Canvas"
# 从 server 查询可用 command 与 JSON Schema
pnpm dev:cli commands list
# 使用稳定 command ID 创建节点；不确定结果时用同一 ID 重试
pnpm dev:cli commands execute create_node \
--canvas-id <canvasId> \
--command-id <stable-command-id> \
--input '{"type":"text","position":{"x":120,"y":80},"content":"Agent note"}'flowpocus/
├── apps/
│ ├── web/ # Next.js frontend
│ ├── backend/ # Hono + Hocuspocus + server-owned commands
│ └── cli/ # Agent-facing server API client
├── packages/
│ ├── commands/ # Shared Zod command contracts
│ ├── canvas/ # React Flow components & hooks
│ ├── ui/ # shadcn/ui components
│ ├── database/ # Drizzle ORM + SQLite
│ └── typescript-config/ # Shared TypeScript configs
└── ...
| Command | Description |
|---|---|
pnpm dev |
Start development servers |
pnpm build |
Build all packages |
pnpm lint |
Run Biome linter |
pnpm typecheck |
Run TypeScript type checking |
pnpm dev:cli <args> |
Call server-owned commands from the local CLI |
pnpm db:push |
Push database schema |
pnpm db:studio |
Open Drizzle Studio |
See ARCHITECTURE.md for detailed technical documentation.
Contributions are welcome! Please read our contributing guidelines before submitting a PR.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT License - see LICENSE for details.