Introduction

Visual programming for React and NodeJs 🚀

What is DataStory?

DataStory ships a React component:

<DataStory />

… which connects to a computation server:

const app = new Application();
 
app.register([
  coreNodeProvider,
  // ... your custom nodes here 💫
]);

… that executes your diagram with real time feedback:

// async generator magic ✨
const executor = app.getExecutor(diagram)

Tell me more

We may execute diagrams directly via the UI or in headless/serverless environments and seamlessly convert between UI rendered, JSON serialized and programmically created diagrams/nodes to build any application you can think of.

// A diagram created programmatically 🤖
const diagram = core.getDiagramBuilder()
  .add(Signal)
  .add(Sleep, { duration: 500 })
  .add(ConsoleLog)
  .get()
 
// Serializable 📦
const saved = JSON.stringify(diagram)
 
// Open saved diagrams 🔧
const restored = JSON.parse(saved)

We may customize the platform to our needs and easily add our own nodes using well defined patterns:

// Custom node
const MyBusinessProcessor = {
  name: 'My Business Processor',
  inputs: ['ideas'],
  outputs: ['unicorns'],
  
  async *run({ input, output }) {
    // logic goes here 🧠
  },
};
 
// A diagram is a node and a node is a diagram 🤯
const NestedNode = diagram

… and much more - Let’s get building! 🚀

Getting Started