i
disconnected
Inspector

Select a node or edge to inspect it.

Drag or click from an output port to an input port to connect nodes.

Type Legend
Anyany
Stringstr
Integerint
Floatfloat
Booleanbool
Datedate
Objectobj
Pulsepulse
Encryptedencrypted
Unknownunknown
array (any type)
sync log — stub mode · replace syncLayerStub with useGraphSync() for real ws
×

Graphical Dataflow Node-based Editor

A more intuitive way to route data

TypeScriptReactSaaSData PipelinesIndustrial IoTUI/UX DesignOptimistic DispatchingFront/Backend Sync

When I started at Casne Engineering Inc. in my Sophomore year of college, I was put to work on CloudStream, a new SaaS platform that is in production now, “providing flexible, reliable, and secure industrial data pipelines wherever you need them.” The project meant to make all disparate data sources and endpoints connectable so that clients wouldn’t have to navigate the messy transfer process on their own.

My job was to create the UI, a platform which Casne Employees would use internally to manage these connection points. I started with something serviceable (though clunky). But after getting the basic system working, and inspired by graphical node editors like those found in Blender or MatLab’s Simulink, I began an independent project to create a functional, visually intuitive design to level up the platform. The duration of the summer meant it wasn’t feasible to implement this system, but it remains one of the most robust software projects I’ve worked on and I believe it will find a home somewhere.

Though just a proof of concept with a stubbed backend (read more in future tabs), I hope this demo shows a functional enough (I hope) frontend system to demonstrate the intention. Feel free to play around!