DOCSEARCHbyAlgolia
Submit Docs

node-red-contrib-uibuilder

repository·main·Indexed 19 days ago

https://github.com/totallyinformation/node-red-contrib-uibuilder

A Node-RED add-on for creating data-driven web UIs, supporting single- and multi-page applications. It bridges Node-RED flows and web browsers, offering a range of capabilities from no-code UI generation to professional web development. Version 7.7.4 includes a framework-agnostic front-end client library for Socket.IO communication, Admin APIs for instance and file management, and User APIs for front-end interaction. It supports integration with DOMPurify for sanitization, Markdown-IT for rendering, and VueJS detection.

Tokens
198.2K
Snippets
484
Records
871
Agent score
68%

What's inside node-red-contrib-uibuilder

  1. Overview of UIBUILDER's Server Libraries

    main

    UIBUILDER utilizes several internal server-side libraries to manage different aspects of the Node-RED integration. These libraries power the various uibuilder nodes and handle tasks ranging from file system operations to web server management and communication protocols.

    Key libraries include:

    • Admin APIs: admin-api-v2.js (legacy) and admin-api-v3.js (current) for communication from the Node-RED Editor.
    • Communication: socket.js for Socket.IO server handling.
    • Web Services: web.js for ExpressJS web server management.
    • File & Package Management: fs.js for file system operations and package-mgt.js for npm package handling.
    • Utilities: uiblib.js for generic uibuilder functions and tilib.js for general server functions.

  2. Overview of UIBUILDER for Node-RED

    main

    UIBUILDER is a Node-RED add-on designed to simplify the creation of data-driven web user interfaces (web applications) that communicate with your Node-RED flows.

    Key Capabilities:

    • Hybrid Development: Supports no-code/low-code nodes (UI created within Node-RED) and full-code front-end templates.
    • Framework Agnostic: Works with vanilla HTML/CSS/JS or any modern front-end framework.
    • Dynamic Data Interchange: Provides standards for exchanging data and controls between Node-RED and the browser.
    • Multi-app Management: Enables managing multiple web applications from a single Node-RED instance.
    • Workflow Integration: Designed to integrate with existing web development workflows and easily serve front-end libraries.

  4. Overview of Markweb Design and Purpose

    main

    Markweb is a lightweight 'content server' designed to serve markdown content as a website from Node-RED. Unlike typical UIBUILDER applications that focus on data-driven dashboards, Markweb is optimized for information-heavy websites.

    Key Characteristics:

    • Minimal Configuration: Designed to generate a functional website with just a few markdown files.
    • Hybrid Dynamic/Static: While it serves markdown, it leverages UIBUILDER's dynamic capabilities, allowing the front-end to send and receive messages to/from Node-RED for interactivity.
    • Server-Side Rendering: Converts extended Markdown to HTML on the server to minimize browser-side processing.
    • SPA Navigation: Uses Single Page Application (SPA) style navigation via UIBUILDER messages instead of standard fetch requests to allow for dynamic updates.

  5. Overview of the uibuilder front-end client

    main

    The uibuilder front-end client is a browser-side library that enables dynamic communication between Node-RED and your web browser via Socket.IO. It provides simplified message handling, event monitoring, and utility functions for building interfaces.

    Key capabilities include:

    • Watching for and processing messages from Node-RED.
    • Sending messages back to Node-RED.
    • Monitoring changes to specific variables.
    • Building data-driven/configuration-driven UIs using JSON.
    • Supporting any front-end framework (framework-agnostic).
    • Supporting custom security configurations.

    It is provided in two builds: IIFE (UMD) and ESM.

    Recommendation: Do NOT compile/build the uibuilder client library into your own front-end build process. If you must, use the source-code version located at ~/.node-red/node_modules/node-red-contrib-uibuilder/src/front-end-module/uibuilder.module.js.

  6. Understanding the benefits of UIBUILDER

    main

    UIBUILDER is designed to provide a flexible, lightweight web application environment within Node-RED. Key advantages include:

    • Integrated WebSockets: A single uibuilder node provides a dedicated real-time websocket connector to your front-end without requiring manual code.
    • External Library Management: Easily manage front-end libraries via npm (from the npm registry, GitHub, or local folders) directly from the Node-RED editor. Libraries are served via standard URL paths.
    • Template System: Access built-in templates or define custom external templates that can include their own dependencies, API definitions, and assets.
    • No Framework Lock-in: Unlike other solutions, UIBUILDER does not force a specific framework. You can use plain HTML/CSS/JS, or integrate Vue, React, etc.
    • Multi-user & Security: Built-in client identifiers support multi-user workflows. You can filter inputs/outputs by client device or page name. Server-side "middleware" for both the web server and websockets allows for custom identity and access management.
    • Scalability: You can host multiple independent web apps in a single Node-RED instance by assigning each a unique identifier for its URL path.
    • Performance: UIBUILDER is optimized for speed and low resource usage. Because it relies heavily on static resources rather than constant dynamic code generation, it typically has significantly smaller transfer sizes and faster load times compared to Dashboard 1 or Dashboard 2.

  7. Core capabilities of uibuilder with Node-RED

    main

    uibuilder allows you to bridge Node-RED data with web-based user interfaces without requiring deep expertise in HTML/DOM manipulation. Key capabilities include:

    • UI Generation: Use Node-RED data or front-end code to generate standard or custom web pages.
    • Dynamic Updates: Easily update on-page information from either Node-RED or the front-end, bypassing the complexities and inconsistencies of standard DOM/HTML manipulation.
    • Bidirectional Communication: Establish reliable and consistent communication between Node-RED and front-end code, including the ability to carry metadata for security decisions.
    • Custom Tooling: Create tools that generate msg._ui standard output to manipulate web pages.
    • State Caching: Cache UI or data changes in either Node-RED or the front-end so that new or reloaded clients immediately receive the latest state.

  8. Use UIBUILDER's Node-RED Editor Libraries

    main

    UIBUILDER provides shared JavaScript and CSS libraries designed specifically for use within Node-RED Editor nodes. These libraries ensure consistent styling and provide common data and functions across all UIBUILDER-related nodes in the editor.

    To maintain visual and functional consistency in your custom UIBUILDER editor nodes, you should reference these resources:

    • JavaScript: /resources/editor-common.js provides common logic and data access for the Editor.
    • CSS: /resources/editor-common.css provides standard styling for UIBUILDER nodes.

  9. Review the uibuilder Roadmap

    main
    The uibuilder roadmap outlines planned updates for Node.js compatibility, new features, and architectural improvements. Key areas of focus include migrating to ES Modules, leveraging newer Node.js APIs (like fetch, WebStreams, and URLPattern), and introducing new Node-RED nodes and UI capabilities like a Page Creator, Theme Configurator, and improved tabular data manipulation.

  10. Core features of UIBUILDER

    main

    UIBUILDER provides several high-level capabilities for web application development within Node-RED:

    • Real-time Data Targeting: Send data to/from specific clients using identifiers like User ID, URL, page name, Socket ID, or IP address.
    • Resource Management: Easily add multiple web pages and resources to a single uibuilder instance.
    • Dynamic HTML Elements: Use simple HTML attributes to enable elements that update dynamically without requiring a heavy front-end framework.
    • Library Management: Manage front-end libraries directly from the Node-RED Editor to make them available to clients.
    • Custom Middleware: Apply custom middleware to the web server or real-time communications server for custom security or processing.
    • Low-code/No-code UI: Create interfaces using data-configuration (low-code) or exclusively via Node-RED nodes (no-code).
    • Front-end Router: Supports Single Page Application (SPA) patterns using a built-in router.
    • Markdown Support: Use Markdown for content creation, making it easy to reuse content from tools like Obsidian or Typora.

  11. Markdown features supported in Markweb

    main

    Markweb uses the markdown-it library to render Markdown, supporting Commonmark, GitHub Flavored Markdown (GFM) extensions, and Mermaid diagrams.

    Key features include:

    • GFM Extensions: Task lists (- [ ]), tables, alert boxes (callouts), and strikethrough (~~text~~).
    • Custom Attributes: Use {attrname="value"} syntax to apply IDs ({#id} or {id="id"}), classes ({.class} or {class="class"}), or styles ({style="color:red;"}) to elements.
    • Code Blocks: Syntax highlighting via highlight.js using triple backticks and a language specifier.
    • Footnotes: Supported via the marked-footnote extension.
    • Mermaid Diagrams: Supported for rendering diagrams.
    • Embedded HTML: HTML tags can be used directly in Markdown, including UIBUILDER's custom web components. Warning: No sanitization is currently performed; avoid using untrusted content.
    • Automatic Headings: Headings automatically generate IDs and anchor links for easy navigation. Content under headings can be toggled (folded/unfolded).
    * list item {.success}
* list item {style="list-style-type:decimal;"}

## Heading {#custom-id}

  12. Understand Markweb dependencies and requirements

    main

    The markweb node for creating dynamic Markdown-based websites handles all dependencies internally. You do not need to install additional packages. It relies on:

    • @totallyinformation/uib-fs-utils: Uses Chokidar for file watching.
    • @totallyinformation/uib-md-utils: Uses Front-Matter and markdown-it (with extensions) for processing.

    Note that markdown-it is used instead of the standard Node-RED marked library to ensure reliable access and better feature support.