flow-view

Visual editor for Dataflow programming

Installation

Using npm

With npm do

npm install flow-view

Using a CDN

Try this in your HTML page

<script type="importmap">
  { "imports": { "flow-view": "https://unpkg.com/flow-view" } }
</script>

<style>
  .container {
    max-width: 100%;
    height: 400px;
  }
</style>

<div class="container"></div>

<script type="module">
  import { FlowView } from 'flow-view';

  const container = document.querySelector('.container');
  const flowView = FlowView.instance(container);
  flowView.load({
    nodes: {
      id1: { text: 'Hello World', x: 10, y: 10 }
    },
    links: {}
  });
</script>

Warning

Be aware that there is no minified bundle, so you probably do not want to use the CDN in production. Your bundler (e.g. esbuild, Vite, rollup, etc.) will handle minification and transpilation for your target browsers.