A visual data flow editor for mapping JSON structures. Design data transformations by connecting fields between nodes on an infinite canvas.
Live Demo: https://dataflow.lintao-amons.workers.dev/
Use the /generate-import skill to create import JSON through conversation:
/generate-import
> I need: User (id, name, email), Order (orderId, userId, total), connect user.id → order.userId
This generates a complete JSON file ready to import into the app. See .claude/skills/generate-import.md for details.
- Import JSON - Paste JSON to auto-generate nodes with fields
- Import JSONL - Import multiple JSON objects at once (one per line)
- Visual Field Mapping - Drag connections between fields to define data flow
- Nested Structure Support - Hierarchical tree view for nested objects
- Dark Theme Nodes - Clean, modern UI with contextual ports
- Keyboard Shortcuts - Ctrl+C/V for copy/paste nodes
- Local Storage - Your work persists across browser sessions
- Export/Import - Save and load complete graphs as JSON
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build- Right-click on the canvas to create a new node or import JSON
- Hover over a field row to see connection ports
- Drag from an output port (right) to an input port (left) to connect fields
- Click on a connection to select it, then press Delete to remove
- Hover over node header for rename, duplicate, and delete options
| Shortcut | Action |
|---|---|
Ctrl+C / Cmd+C |
Copy selected node |
Ctrl+V / Cmd+V |
Paste node |
Delete / Backspace |
Delete selected node or connection |
See the examples/ directory for sample data:
usecase.json- Complete pipeline: DB → Service → Event → Analytics → Report → CSVsample.jsonl- Multiple JSON objects for JSONL import testingsample-data.json- Various JSON structures to import
- React 18 + TypeScript
- React Flow - Node-based canvas
- Zustand - State management
- Tailwind CSS - Styling
- Vite - Build tool
MIT