node-red-contrib-uibuilder/docs/roadmap/videos-to-produce.md

Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.

---
title: Roadmap for video production
description: >
  These are ideas for future YouTube videos about uibuilder. They are not in any particular order and are not necessarily planned for production. They are just ideas that I have had or that have been suggested by the community.
created: 2026-04-19 19:28:24
updated: 2026-04-19 19:28:29
---

* uibuilder's folders.
* SPA (Single Page Application) vs MPA (Multi Page Application) and how to use uibuilder with both.
* SPA/Router details
  * Noting timings and when to load libraries, filter fns, etc.
  * Common elements vs route "pages".
  * Menu's.
* uib-sidebar: How to use the new uib-sidebar node.
* Updates on how to have data-driven updates to the UI.
* Differences between IIFE and ESM module use.
* UIBUILDER URL paths.
* Custom web server and the `.public` folder.
* SSR (Server-Side Rendering)
* Middleware & Hooks
* New uibuilder experimental library.
* Instance API's.
* Using a separate user-facing web server (separate from Node-RED's defaults that server up the Dashboards and http-in/-response nodes)
* HTML structure/hierarchy.
* The DOM.
* Setting up and using VS Code for front-end development with uibuilder.
* Web component library.
* Easy layouts using grid areas.
* Markdown.

* Creating data-driven web apps using Node-RED
  * http-in/-out, D1/2, UIB - lockin & flexibility
  * UIB approaches

* Updating content/attributes (see [ref](how-to/change-element.md))
* Each release
* Each node
* Snapshots (grab html and save somewhere)
* uibuilder reactive variables (set, get, onChange), uib-var
* Dynamically modify CSS class for HTML elements
* Low-code, do anything from Node-RED or browser
* UI updates using low-code. [ref](https://discourse.nodered.org/t/uibuilder-documentation-suggestions-and-improvements/74812/33?u=totallyinformation)
* Easy forms
* Forms - zero-code
* Mix of HTML and uibuilder uib-update for simple tasks.
* Caching - node and custom
* Remote programming environments [ref](https://discourse.nodered.org/t/remote-coding-environments/86227)


### Shorts

* Using CSS variables with uib-brand (e.g. using --max-width)
* quick-start example
* Switch light/dark