A visual canvas for documenting data transformations: DataFrames, joins, filters, aggregations — all connected as a graph with column-level lineage.
Built for data analysts and engineers who want to draw how data flows rather than describe it in text.
| Node | Purpose |
|---|---|
| DataFrame | Table with typed columns — the main building block |
| Merge | Visual JOIN with key pairs and join type selector (inner / left / right / outer) |
| Filter | Multi-condition WHERE builder with @column syntax |
| GroupBy | Group-by keys + aggregations (sum, mean, count, nunique…) |
| Function | Free-form transformation with named inputs and outputs |
| Comment | Sticky note for annotations |
- Column-level lineage — drag a column from one DataFrame onto another to copy it and auto-draw a lineage edge
- DF-level connections — connect whole DataFrames to Merge / Filter / GroupBy / Function nodes via square handles
- Attribute Tracker
◎— type an attribute name to highlight every node that contains it; other nodes fade out;@refsin Filter conditions are tracked too - Search
⌘K— fuzzy search across all node labels and column names, jump to result - Auto-layout — one-click dagre LR arrangement
- Undo / Redo — full history (50 snapshots)
- Copy / Paste —
⌘C/⌘D, offset on repeated paste
Type @ inside any Filter condition and get instant suggestions pulled from connected upstream nodes — with type badges (str, int, flt…).
- Save / Load JSON — full canvas state in a portable file
- SQL export — generates
SELECT … FROM … JOIN … WHEREfrom the graph - SQL import — paste a
SELECTquery to scaffold a DataFrame node with columns - Export PNG — 3× pixel-ratio render of the current viewport
- Multiple tabs — work on several canvases in the same session
git clone https://github.com/PavelLuchkov/dataloom.git
cd dataloom
npm install
npm start # opens at http://localhost:3000If port 3000 is occupied:
PORT=3001 npm start
No backend, no database — everything lives in localStorage.
| Shortcut | Action |
|---|---|
⌘K |
Open search |
⌘⇧F |
Toggle attribute tracker |
⌘Z |
Undo |
⌘Y / ⌘⇧Z |
Redo |
⌘C |
Copy selected nodes |
⌘D |
Paste |
Delete |
Remove selected nodes or edge |
@ in Filter |
Autocomplete column from connected node |
- Add nodes from the toolbar or right-click the canvas
- Draw DF-level connections by dragging from the square handle (top-right corner of any node) to another node's input handle (top-left)
- Drag columns between DataFrames to copy them and record where they came from
- Drop columns onto a Filter / GroupBy / Function input panel to wire them as inputs
- Save to a JSON file to share or resume the diagram later
- React Flow — canvas, nodes, handles, edges
- React (CRA)
- Tailwind CSS v3
- dagre — auto-layout
- html-to-image — PNG export
MIT