# How to create a new UI from scratch

**URL:** <https://discourse.nodered.org/t/how-to-create-a-new-ui-from-scratch/478>\
**Category:** General\
**Created:** [30 May 2018 01:19 UTC](https://discourse.nodered.org/t/how-to-create-a-new-ui-from-scratch/478 "2018-05-30T01:19:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aoighost](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aoighost/32/358_2.png) [@aoighost](https://discourse.nodered.org/u/aoighost)\
**Post date:** [30 May 2018 01:19 UTC](https://discourse.nodered.org/t/how-to-create-a-new-ui-from-scratch/478/1 "2018-05-30T01:19:33Z")

</div>

So I’m working on a project and need to create a new editor UI to create flows from scratch. @mike said he has done it in another thread and I’m wondering how to do it with existing APIs. Also I’m wondering if I can use the APIs to programatically create flows.

---

<div class="post-metadata">

**Author:** ![mike](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mike/32/10_2.png) [@mike](https://discourse.nodered.org/u/mike)\
**Post date:** [30 May 2018 18:34 UTC](https://discourse.nodered.org/t/how-to-create-a-new-ui-from-scratch/478/2 "2018-05-30T18:34:00Z")

</div>

For my project I created a simple ‘wizard’ framework that would generate new flows based on a series of forms. The idea is that for beginners, they would like to be guided through a specific task rather than given a blank canvas to start with.

The user goes through forms, step by step, setting the configuration options. When done, the flow is added to Node-RED using the runtime API, specifically the `RED.nodes.addFlow()` method. The format for a flow supplied to this API call an object containing the flow label and a list of nodes as in your flow file. Something like this:

```auto
var nrFlow = {
    label: "Flow Label",
    nodes: [
    {
       ... node params ...
        "wires": [
            [
                "a5a45767.173e88"
            ]
        ]
    },
    {
        ... node params ...
        "wires": []
    },
   ... more nodes ...
   ]
};

```

To do this, I needed to assume the nodes that the wizards use are already installed. I didn’t install them dynamically.

So you can build a different UI that creates flows in this format, and then call addFlow in a similar way. There may be other runtime API methods that would be useful for you depending on what you were after.

---

<div class="post-metadata">

**Author:** ![aoighost](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aoighost/32/358_2.png) [@aoighost](https://discourse.nodered.org/u/aoighost)\
**Post date:** [6 June 2018 09:45 UTC](https://discourse.nodered.org/t/how-to-create-a-new-ui-from-scratch/478/3 "2018-06-06T09:45:05Z")

</div>

Alright, thanks. That looks interesting. Out of curiosity, what are the numbers in the following part of the snippet and how are they determined?

```
 "wires": [
        [
            "a5a45767.173e88"
        ]
    ]
```

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [6 June 2018 09:56 UTC](https://discourse.nodered.org/t/how-to-create-a-new-ui-from-scratch/478/4 "2018-06-06T09:56:08Z")

</div>

The `wires` property identifies what nodes a node is wired to. The values inside are the `id` properties of the connected nodes. They are generated in the editor.

---

<div class="post-metadata">

**Author:** ![aoighost](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aoighost/32/358_2.png) [@aoighost](https://discourse.nodered.org/u/aoighost)\
**Post date:** [6 June 2018 15:41 UTC](https://discourse.nodered.org/t/how-to-create-a-new-ui-from-scratch/478/5 "2018-06-06T15:41:44Z")

</div>

Alright, is it possible to get the node ids by API for this? Maybe even return them as an object.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [6 June 2018 16:08 UTC](https://discourse.nodered.org/t/how-to-create-a-new-ui-from-scratch/478/6 "2018-06-06T16:08:36Z")

</div>

It is the `id` property of the node objects return by the existing apis.