Get started with dflow CDN

MIT licensed

Dflow: library for managing asynchronous data flows with functional programming.

Tags:
  • dataflow
  • visual

Stable version

Copied!

How to start using dflow CDN


<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.cdnhub.io/dflow/0.43.0/dflow.min.js"></script>
  <style>
    #app {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="app">
    <input type="text" id="input" value="initial value">
    <button id="button">Update Input</button>
  </div>

  <script>
    const { Dag, Flow, Text, Button } = window.dflow;

    const input = document.getElementById('input');
    const button = document.getElementById('button');

    const inputFlow = new Flow({
      id: 'inputFlow',
      inputs: { input },
      outputs: {},
    });

    const buttonFlow = new Flow({
      id: 'buttonFlow',
      inputs: { button },
      outputs: { value: Text() },
    });

    const inputToButton = new Dag({
      id: 'inputToButton',
      inputs: inputFlow.outputs.input,
      outputs: buttonFlow.inputs.button,
    });

    const buttonToInput = new Dag({
      id: 'buttonToInput',
      inputs: buttonFlow.outputs.value,
      outputs: inputFlow.inputs.input,
    });

    inputToButton.connect(inputToButton.outputs.value, inputFlow.inputs.input);
    buttonToInput.connect(buttonToInput.inputs.value, buttonFlow.inputs.button);

    inputFlow.run();
    buttonFlow.run();

    button.addEventListener('click', () => {
      buttonFlow.inputs.button.set(Math.random());
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!

All versions