Skip to content

Node-RED Flow Viewer

Vue-based renderer for Node-RED flows.

Install

bash
pnpm add vue-node-red-flow-viewer
js
import { FlowViewer } from 'vue-node-red-flow-viewer'
import 'vue-node-red-flow-viewer/style.css'

Basic usage

vue
<template>
  <div class="flow-viewer">
    <FlowViewer :flow-data="flow" />
  </div>
</template>

<script setup>
import { FlowViewer } from 'vue-node-red-flow-viewer'
import 'vue-node-red-flow-viewer/style.css'
import flow from './flow.json'
</script>

<style scoped>
.flow-viewer {
  height: 520px;
}
</style>

The wrapper element needs a height because the viewer fills its parent.

Not affiliated with, endorsed by, or sponsored by Node-RED or nodered.org.