vue-node-red-flow-viewer

Vue 3 component library for rendering Node-RED flow JSON with Vue Flow.

📚 Documentation

This package is a Vue-native adaptation of the original node-red-flowviewer-js work by Gerrit Riessen, rebuilt around Vue single-file components and @vue-flow/core.

Install

npm install vue-node-red-flow-viewer

vue@^3.3.0 is a peer dependency. Vue Flow packages are installed as runtime dependencies.

Import the stylesheet once in your app:

import 'vue-node-red-flow-viewer/style.css'

Usage

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

const flowData = [
  { id: 'tab1', type: 'tab', label: 'Example' },
  { id: 'inject1', type: 'inject', z: 'tab1', x: 120, y: 80, wires: [['debug1']] },
  { id: 'debug1', type: 'debug', z: 'tab1', x: 320, y: 80, wires: [] },
]
</script>

<template>
  <div class="viewer">
    <FlowViewer
      :flow-data="flowData"
      :options="{ gridlines: true, images: true, labels: true, linklines: false }"
    />
  </div>
</template>

<style scoped>
.viewer {
  height: 480px;
}
</style>

The wrapper needs a height because the viewer fills its parent. Pass the full Node-RED export array so tabs, groups, wires, and subflows can render.

Exports

• FlowViewer: Vue component for rendering a read-only flow tab or subflow.
• transformFlow(flowdata, flowId, opts): converts Node-RED flow JSON into Vue Flow nodes and edges.
• setImageContent(content): replaces the icon content map used for node images.

Component props

Prop	Type	Default	Description
flowData	NodeRedNode[]	Required	Node-RED flow export array.
flowId	string | null	null	Tab or subflow id to display. If omitted, the first tab or subflow is selected.
options	FlowViewerOptions	See docs	Controls gridlines, icons, labels, dashed link lines, and the currently unused arrows option.
autoFitView	boolean	true	Fits the viewport after initialization and content changes.
fitViewOptions	FitViewParams	{ padding: 0.1 }	Options passed to Vue Flow fitView.

Events

• pane-ready
• nodes-initialized
• tab-change
• viewport-fit
• copy
• update:flowId

See the events docs for payload details.

Styling

The component ships CSS variables for theming:

.viewer {
  --nr-flow-bg: #f3f3f3;
  --nr-grid-color: #d4d4d4;
  --nr-wire-color: #999;
  --nr-wire-width: 3;
}

See the CSS variables docs for the full list.

Development

pnpm install
pnpm test
pnpm build
pnpm docs:build

License

Apache-2.0. See LICENSE and NOTICE.