Uibuilder V6 library integratin

I am using Niode-Red 3.0.2 and UIBuilder 6.4.1
how can I insert the libraries so that the standard example works?

I get the following error message in the debug window:
"[uibuilder:socket:addNs:uib-dynamic-svg-eg] Socket.IO middleware failed to load for NS - check that uibRoot/.config/sioMiddleware.js has a valid exported fn."

Hi, looks like you have specified a socket.io middleware file. You will find those kinds of files in your <uibRoot>/.config/ folder (where <uibRoot> would be ~/.node-red/uibuilder. on a default installation.

By default, that folder contains 3 template files that have to export functions in a specific format. If you have renamed one of the templates to *.js, it will be picked up after a node-red restart. Simply rename it to end in something else and restart node-red.

hello, thanks that seems to have worked, there is no error message anymore.
But now I have the next problem I installed the example: UIbuilder with MoonJS - simple, responsive UI
Unfortunately I can't get the package installed in the library:
Is there an example for installing?
Am I right that there are 2 options: npm
and once
at GH
I entered the following:
gh repo clone kbrsh/moon
Unfortunately without success
Can you please help me Thanks!!!

Hi, check the uibuilder version that example relates to. I think it might be quite dated. I've not looked at MoonJS in a long time so I can't say whether its requirements have changed or not I'm afraid.

If you are wanting to use a framework package like Moon with uibuilder, you should use uibuilder's library tab and install it there. The npm version is generally the one you want.

what is the exact input to install a package in the uibuilder library, I keep getting error messages

From the MoonJS npm readme, the package is called simply moon. That is what you put into the top input field when adding a library.


uibuilder then attempts to work out the correct link to add the library to your front-end html page (though note that this totally relies on package authors specifying something sensible which they don't always do).


A quick read of the Moon install guide shows that some adjustments are needed to make things work in the browser without a build step. You also need to add the moon-browser package. If you just want to test things, you can use an online version of Moon instead of having to add it to uibuilder.

This works for me - index.html

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Testing MoonJS v1 - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Testing MoonJS v1">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="../uibuilder/vendor/moon/dist/moon.min.js"></script>
    <script defer src="https://unpkg.com/moon-browser"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script type="text/moon" defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body class="uib">
    <h1 class="with-subtitle">Testing MoonJS v1</h1>
    <div role="doc-subtitle">Using the uibuilder IIFE library.</div>

    <div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>

    <div id="root"></div><!-- Root structure for MoonJS -->


index.js (from one of their examples)

const button = Moon.view.m.button;

const increment = ({ data }) => {
    const dataNew = data + 1;

    return {
        data: dataNew,
        view: <view data=dataNew />

const view = ({ data }) =>
    <button @click=increment > { data }</button >;

    data: Moon.data.driver,
    view: Moon.view.driver("#root")

Moon.run(() => ({
    data: 0,
    view: <view data=0/>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.