Security News
The Hidden Blast Radius of the Axios Compromise
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
By Ahmad Nassri - Apr 01, 2026
New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
flow-view
is a visual editor for Dataflow programming
Demo
Installation
Using npm
With npm do
npm install flow-view
Using a CDN
Try this in your HTML page
<script type="module">
import { FlowView } from 'https://unpkg.com/flow-view';
const flowView = new FlowView(document.body);
</script>
Usage
GUI
Try demo here
- Drag on canvas to translate all items.
- Click on item to select it.
- Click while pressing SHIFT to enable multi selection.
- Drag selected items to translate them.
- Drag from a node output to a node input to create an edge.
- Press BACKSPACE to delete selected items.
- Double click on edge to delete it.
- Double click on canvas to open the selector.
- Type into the selector then press ENTER to create a new node.
Constructor
Create a FlowView instance and pass it a container. It will create a flow-view custom element and attach it to the
container. Be aware that the flow-view custom element will fit the whole height of its container, so make sure to
style properly to avoid a zero height container.
<!DOCTYPE html>
<html>
<body>
<script type="module">
import { FlowView } from 'https://unpkg.com/flow-view';
const flowView = new FlowView(document.body);
</script>
</body>
</html>
If some flow-view custom element is already in the page, it can be passed to the FlowView constructor. argument.
<!DOCTYPE html>
<html>
<body>
<flow-view id="my-view"></flow-view>
<script type="module">
import { FlowView } from 'https://unpkg.com/flow-view';
const flowView = new FlowView(document.getElementById('my-view'));
</script>
</body>
</html>
Color schemes
Optionally set color scheme. If not provided it defaults to both light and dark according to system preferences.
Light scheme.
<flow-view light></flow-view>
Dark scheme.
<flow-view dark></flow-view>
addNodeDefinitions({ nodes?, types? })
Add a list to define which nodes are available. It is not required but it makes sense to be provided in the majority of use cases.
flowView.addNodeDefinitions({
nodes: [
{ name: "Marge", type: "parent" },
{ name: "Homer", type: "parent" },
{ name: "Bart", type: "child" },
{ name: "Lisa", type: "child" },
{ name: "Mr. Burns" },
],
types: {
"parent": {
inputs: [],
outputs: [
{ name: "out" },
],
},
"child": {
inputs: [
{ name: "in1" },
{ name: "in2" },
],
outputs: [],
},
},
});
node(id)
Get flow-view node by id.
const node = flowView.node("abc");
See also color schemes example.
edge(id)
Get flow-view edge by id.
const edge = flowView.edge("abc");
graph
Access current flow-view graph.
console.log(flowView.graph);
loadGraph({ nodes = [], edges = [] })
Load a flow-view graph.
flowView.loadGraph({
nodes: [
{
id: "dad",
text: "Homer",
x: 60,
y: 70,
outs: [{ id: "children" }],
},
{
id: "mom",
text: "Marge",
x: 160,
y: 70,
outs: [{ id: "children" }],
},
{
id: "son",
text: "Bart",
x: 60,
y: 240,
ins: [{ id: "father" }, { id: "mother" }],
},
{
id: "daughter",
text: "Lisa",
x: 220,
y: 220,
ins: [{ id: "father" }, { id: "mother" }],
},
],
edges: [
{ from: ["dad", "children"], to: ["son", "father"] },
{ from: ["dad", "children"], to: ["daughter", "father"] },
{ from: ["mom", "children"], to: ["son", "mother"] },
{ from: ["mom", "children"], to: ["daughter", "mother"] },
],
});
clearGraph()
Empty current graph.
flowView.clearGraph();
destroy()
Delete flow-view custom element.
flowView.destroy();
An use case for destroy() is the following. Suppose you are using Next.js, you need to load flow-view with an async
import into a useEffect which needs to return a callback to be called when component is unmounted.
This is a sample code.
import type { FlowView } from "flow-view";
import { FC, useEffect, useRef } from "react";
const MyComponent: FC = () => {
const flowViewContainerRef = useRef<HTMLDivElement | null>(null);
const flowViewRef = useRef<FlowView | null>(null);
useEffect(() => {
let unmounted = false;
const importFlowView = async () => {
if (unmounted) return;
if (flowViewContainerRef.current === null) return;
if (flowViewRef.current !== null) return;
const { FlowView } = await import("flow-view");
const flowView = new FlowView({
container: flowViewContainerRef.current,
});
flowViewRef.current = flowView;
};
importFlowView();
return () => {
unmounted = true;
if (flowViewRef.current !== null) flowViewRef.current.destroy();
};
}, [flowViewRef, flowViewContainerRef]);
return <div ref={flowViewContainerRef}></div>;
};
newNode() and newEdge()
Create nodes and edges programmatically. See programmatically example here.
// Create two nodes.
const node1 = flowView.newNode({
text: "Hello",
ins: [{}, {}],
outs: [{ id: "output1" }],
x: 100,
y: 100,
width: 80,
});
const node2 = flowView.newNode({
text: "World",
ins: [{ id: "input1" }],
width: 100,
x: 250,
y: 400,
});
// Connect nodes with an edge.
flowView.newEdge({
from: [node1.id, "output1"],
to: [node2.id, "input1"],
});
deleteNode() and deleteEdge()
Delete nodes and edges programmatically. Notice that when a node is deleted, all its connected edges are deleted too.
const nodeId = "abc";
const edgeId = "123";
flowView.deleteNode(nodeId);
flowView.deleteEdge(edgeId);
addNodeClass(nodeType, NodeClass)
Can add custom node class. See custom node example here.
onChange(callback)
Set callback to be invoked on every view change. See demo code here.
Callback signature is ({ action, data }, info) => void, where
- action can be
CREATE_NODE,DELETE_NODE, etc. - data change based on action
- info can contain
{ isLoadGraph: true }or other optional information.
nodeTextToType(func)
Set a function that will be invoked on node creation to resolve node type from node text.
License
FAQs
is a visual editor for dataflow programming
The npm package flow-view receives a total of 6 weekly downloads. As such, flow-view popularity was classified as not popular.
We found that flow-view demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 10 Feb 2023
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Supply Chain Attack on Axios Pulls Malicious Dependency from npm
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
By Socket Research Team - Mar 31, 2026
Research
TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
By Socket Research Team - Mar 27, 2026