Registry / productivity / node-red-contrib-ui-svg

node-red-contrib-ui-svg

library2.3.3jsnpmunverified

node-red-contrib-ui-svg (v2.3.3) is a Node-RED dashboard widget node for rendering interactive SVG graphics, floorplans, and HMI visualizations. It integrates a DrawSvg editor for visual SVG creation and supports dynamic control via input messages (update colors, text, attributes, animations). Release cadence is irregular with ~6 months between minor versions. Key differentiators vs alternatives (e.g., node-red-contrib-embedded-file-browser): built-in drawing editor, extensive event/animation/binding tabsheets, message-driven SVG manipulation, and no external dependencies beyond Node-RED Dashboard 2.16.3+.

productivity

npm install node-red-contrib-ui-svg

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NODE-RED-CONTRIB-U

node-red-contrib-ui-svg

productivityjavascriptv2.3.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

node-red-contrib-ui-svg

✓ Install via npm in Node-RED user directory: npm install node-red-contrib-ui-svg

✗ Installing globally with -g flag or in wrong directory

This is a Node-RED contribution node, not a regular JavaScript library. Import is not used in code; it is loaded automatically by Node-RED when added to a flow.

Demonstrates sending a message to a ui-svg node to update SVG text content dynamically.

// This is a Node-RED node, not a regular library. Quick start: add node from palette, configure SVG, deploy. // No import needed; node is registered via Node-RED's node registration system. // Example flow JSON would be provided, but JS code snippet is not applicable. // Instead, send a message to update SVG element: msg.payload = { "command": "update_text", "elementId": "myText", "textContent": "Hello" }; return msg;

Debug

Known issues

gotchaElement IDs must be unique across all SVG elements, otherwise update commands will affect multiple elements unexpectedly.

fix

Ensure each SVG element has a unique 'id' attribute.

affects: >=1.0

gotchaThe node requires Dashboard version 2.16.3 or higher to work correctly.

fix

Upgrade node-red-dashboard to 2.16.3+ via 'npm install node-red-dashboard@latest'.

affects: >=2.0

deprecatedUsage of 'msg.payload.element' (without 'Id' suffix) is deprecated; use 'msg.payload.elementId' instead.

fix

Replace 'element' with 'elementId' in payload.

affects: >=2.0

Errors

Common errors & fixes

Error: [ui-svg] Cannot read property 'appendChild' of null

SVG element ID referenced in message does not exist in the rendered SVG.

fix

Check that the SVG has an element with the specified 'elementId' and that it is spelled correctly.

Error: ui-svg: Dashboard instance not found

Node-RED Dashboard is missing or not installed.

fix

Install node-red-dashboard: 'npm install node-red-dashboard' in the Node-RED user directory.

Error: [ui-svg] Failed to parse SVG: ...

Malformed SVG string in node configuration.

fix

Validate SVG syntax using an external validator or ensure correct XML structure.

Error: [ui-svg] Unknown command: ...

The 'command' field in payload is not recognized.

fix

Use one of the supported commands: 'update_text', 'update_attribute', 'set_visibility', etc. Refer to documentation.

Upgrade

Version history

2.3.3latest on npm

Audit

Dependencies

node-red-dashboardrequiredRequired to display the SVG widget in the Node-RED dashboard (version 2.16.3+ recommended)

Agent activity

30 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/bartbutenaers/node-red-contrib-ui-svg ↗

packagenode-red-contrib-ui-svg ↗

homepagehttps://github.com/bartbutenaers/node-red-contrib-ui-svg ↗