
Research
Security News
Lazarus Strikes npm Again with New Wave of Malicious Packages
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
@flowfuse/flow-renderer
Advanced tools
A library to render Node-RED flows in a web page.
npm install @flowfuse/flow-renderer
All client-side code is in the index.js
file for easy inclusion in a web page.
Run npm run demo
to test the flow renderer in a browser.
Run npm run build
to build a minimised version of the flow renderer. This will output the file index.min.js
.
IMPORTANT: The minified version of the flow renderer should be built before committing changes to the repository.
Add the following script tag to your HTML file:
<script type="module" src="public/flow-renderer/index.min.js"></script>
or wherever the script is located in your project
Next, add a container element to your HTML file and instantiate a flowRenderer
.
NOTE: flow-renderer is an ES Module and requires a modern browser to run. Script tags must have the type="module"
attribute.
By default, the flow renderer will render the flow with gridLines
, images
, labels
, zoom
, autoZoom
, and autoScroll
enabled.
linkLines
are disabled by default.
To operate the zoom, use the mouse wheel + Ctrl or ⌘ key. To scroll the container vertically, use the mouse wheel without the Shift key. To scroll the container horizontally, use the mouse wheel + Shift key.
<div id="nr-flow-1" class="flow-renderer" style="height: 300px"></div>
<script type="module">
const renderer = new FlowRenderer()
const container1 = document.getElementById('nr-flow-1');
const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
renderer.renderFlows(flow, { container: container1 })
</script>
Options can be set by data attributes scope
, grid-lines
, zoom
, images
, link-lines
, labels
, auto-zoom
, auto-scroll
.
NOTE: To SET and option, the data attribute can simply be present on the container element. To UNSET an option, the data attribute must be set to false
.
<div id="nr-flow-2" style="height: 300px"
data-scope="custom-css-scope"
data-grid-lines
data-zoom
data-images
data-link-lines="false"
data-labels
data-auto-zoom
data-auto-scroll
></div>
<script type="module">
const renderer = new FlowRenderer()
const container2 = document.getElementById('nr-flow-2');
const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
renderer.renderFlows(flow, { container: container2 })
</script>
<div id="nr-flow-3" class="my-scope" style="height: 300px"></div>
const renderer = new FlowRenderer()
const container3 = document.getElementById('nr-flow-3');
const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
renderer.renderFlows(flow, {
container: container3,
scope: 'custom-css-scope', // scope for CSS
gridLines: true, // show gridLines
images: true, // show images
linkLines: false, // show link lines
labels: true, // show labels
zoom: true, // enable zoom within the container
autoZoom: true, // auto zoom to fit the flow within the container upon rendering (best fit, limited to 20% min, 100% max zoom)
autoScroll: true, // auto scroll the leftmost node to the left of the container and the topmost node to the top of the container upon rendering
flowId: undefined // Id of flow to display
})
<div id="app">
<div ref="f1" class="flow-renderer"></div>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import FlowRenderer from './index.js'
createApp({
mounted() {
const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
const renderer = new FlowRenderer()
renderer.renderFlows(flow, { container: this.$refs.f1 })
}
}).mount('#app')
</script>
<div id="nr-flow-1" class="flow-renderer" style="height: 300px"></div>
<script type="module">
const renderer = new FlowRenderer()
const container1 = document.getElementById('nr-flow-1');
const flow1 = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "z": "9999", "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40, "z": "9999"}]
const flow2 = [{"id": "1001", "type": "inject", "x": 120, "y": 40, "z": "9999", "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":120, "y": 80, "z": "9999"}]
renderer.compare([flow1, flow2], { container: container1 })
</script>
This project owes a huge thanks to Gerrit Riessen for his original works on node-red-flowviewer. It was this great contribution that started the ball rolling. Gerrit kindly allowed us relicense the parts we needed to use in this project.
While the API is in development, the version number of this package will remain at 0.x.y
.
x
will be incremented for breaking changes, y
for new features and patches.
Once the API is stable, the version number will be updated to 1.0.0 and full SemVer rules will be applied.
Apache-2.0
FAQs
Node-RED flow renderer
The npm package @flowfuse/flow-renderer receives a total of 900 weekly downloads. As such, @flowfuse/flow-renderer popularity was classified as not popular.
We found that @flowfuse/flow-renderer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
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.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.