# Re-purpose the flow editor for other flow-like data editing

**URL:** <https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509>\
**Category:** General\
**Created:** [11 July 2018 12:34 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509 "2018-07-11T12:34:41Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![shiyeling](https://avatars.discourse-cdn.com/v4/letter/s/977dab/32.png) [@shiyeling](https://discourse.nodered.org/u/shiyeling)\
**Post date:** [11 July 2018 12:34 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/1 "2018-07-11T12:34:41Z")

</div>

Guys,

I get here while searching for an web based process flow editing tool. And I found it quite amazing.

I now understand Node-RED as a programming tool as well as flow execution runtime which are tightly integrated together.

My case here is that I don't want the execution part, we are not that into server side JS, yet. The execution part would be taken care of by other frameworks.

I saw some design notes about split the editor and runtime, but seems not done yet.

How much effort would it take if I want to take the editor out as a standalone tool?

Thanks,  
Yeling

---

<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:** [11 July 2018 12:47 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/2 "2018-07-11T12:47:45Z")

</div>

We are working on splitting out the editor and runtime into separate packages and that will be coming fairly soon once we get the next release done this month.

If you created an alternative runtime that provided all the necessary admin end-points used by the editor, then you could repurpose it.

It really depends on just how custom you want it to be. I can't tell you how much effort it would be as I don't know what your specific requirements are... but it wouldn't be a simple task.

---

<div class="post-metadata">

**Author:** ![shiyeling](https://avatars.discourse-cdn.com/v4/letter/s/977dab/32.png) [@shiyeling](https://discourse.nodered.org/u/shiyeling)\
**Post date:** [12 July 2018 00:48 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/3 "2018-07-12T00:48:14Z")

</div>

Thanks a lot.

Guess I will play with it for now and wait for the official release of separated editor and runtime.

Yeling

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [12 July 2018 14:56 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/4 "2018-07-12T14:56:20Z")

</div>

Yeling, I had the same question earlier this year -- how can I set up a node-red "Editor" for drawing process flows, without having a "server" runtime working behind the scenes...

Nick, please correct me if I'm wrong, but from what I understand, the first "deliverable" will be separated **packaging** for the editor and the runtime -- not usable applications and/or tooling that allow someone to _execute_ the editor or server flow independently. Those will naturally follow, but the repackaging is needed first to allow this community to build those 3rd party applications and tools.

In the meantime, I believe I've found a simple and relatively non-invasive way to "disable" the runtime server (I know, I know -- why would anyone work to undo all the good stuff going on in the server?!? but that's what the customer needed).

Since I am already running my node-red instance behind an nginx reverse proxy, it was easy to "redirect" the internal http requests for retrieving/saving the content of the editor flows file. In my case, the `/flows` GET or POST request _from the client-side Editor_ is proxied to an external web server, which handles the flow JSON string outside of node-red. This means that the runtime server never receives any updates to the flow contents. So essentially the runtime **is** always running, but it's working with an empty flow. This also means that two individuals running the same Editor instance in different browsers are not pushing updates to each other's editor session -- so if you need to have multiple users working on the same flow content, this may not be a solution for you.

The other potential solution is to replace the built-in storage implementation with your own. Check out the docs for the [storage API](https://nodered.org/docs/api/storage/) -- you can also look at the current filesystem implementation that's included with node-red, or the bluemix version based on MongoDB. Although now that I think about it, that doesn't give you a no-op runtime... but there ya go

---

<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:** [12 July 2018 19:41 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/5 "2018-07-12T19:41:41Z")

</div>

To confirm, is this going to be in the next release this month or will it be in the release after that?

---

<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:** [12 July 2018 19:45 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/6 "2018-07-12T19:45:44Z")

</div>

It is _not_ in the next release, 0.19.

The plan is for the packaging split to be 0.20. But to reiterate, it is a packaging split - it isn't the creation of a stand alone Editor application. There will be no visible change to the end user. Whether the split then supports every single use case people have, I cannot say.

---

<div class="post-metadata">

**Author:** ![skilesare](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/skilesare/32/11299_2.png) [@skilesare](https://discourse.nodered.org/u/skilesare)\
**Post date:** [23 August 2019 22:06 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/7 "2019-08-23T22:06:08Z")

</div>

It has been about a year since this post and 0.20 is out. Any updates on the best way to repurpose the editor?

It still looks like when firing up the editor you need to supply a runtime and that the editor will return a 503 if it isn't started:

var ensureRuntimeStarted = function(req,res,next) {  
runtimeAPI.isStarted().then( started =\> {  
if (!started) {  
log.error("Node-RED runtime not started");  
res.status(503).send("Not started");  
} else {  
next()  
}  
})  
}

I could fork and just return anyway, but I would imagine there is a better way...maybe forking the runtime api and stubbing it out as mentioned earlier.

---

<div class="post-metadata">

**Author:** ![peneroka](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/peneroka/32/41792_2.png) [@peneroka](https://discourse.nodered.org/u/peneroka)\
**Post date:** [15 May 2021 09:17 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/8 "2021-05-15T09:17:36Z")

</div>

Up this thread!

Has anybody had succeed in repurposing the **Node-RED Editor**? I've also been looking around for web-based flow programming GUI. I have been fiddling with [React Flow](https://reactflow.dev/) for a while, but it is too much work to add functionalities that **Node-Red Editor** already has, e.g. copy-paste multiple node; node drag-n-drop-n-insert between connector line.

Anybody has info about alternative of it (web-based flow programming GUI)? Any info would be really appreciated. Thanks.

---

<div class="post-metadata">

**Author:** ![toussa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/toussa/32/46339_2.png) [@toussa](https://discourse.nodered.org/u/toussa)\
**Post date:** [7 December 2023 09:00 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/9 "2023-12-07T09:00:26Z")

</div>

Hello everyone,  
we're also looking for an Editor different than Node-Red Editor, which creates a "node-red flow" in the standard json format. We need that because we don't want to start the whole node-red instance just for creating a flow (and not running it)  
Do you know some alternative for the edition part ? (without using React Flow)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 December 2023 09:07 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/10 "2023-12-07T09:07:15Z")

</div>

Not sure what the parameters of your question are... any editor capable of editing text can create json so in theory you could use vi or word or even these days chat-gpt, or whatever you like. All of which would be using some resources to run.

---

<div class="post-metadata">

**Author:** ![toussa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/toussa/32/46339_2.png) [@toussa](https://discourse.nodered.org/u/toussa)\
**Post date:** [7 December 2023 09:35 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/11 "2023-12-07T09:35:29Z")

</div>

Hello dceejay 🙂  
You're right, my last post was not precise at all:  
We're looking for any _similar_ kind of node-red editor, with nodal concept, that does not need a runtime-part like Node-Red still need (for now). In a perfect world, it would be the Node-Red Editor UI itself, as a static website (or library?) without any websocket features or need for the runtime.

As a workaround, I knew there was an attempt to have a node-red instance directly inside the browser (with the runtime) that would avoid us to spin a Node-Red instance server-side just for edition. I couldn't find it anymore.

Context: In our project, we have split (for good reasons) the creation-part of the flows, and the runtime-part of it. We use Node-Red for both, but because of the split, we need two instances of Node-Red. For the "Creation part", we just use the Node-Red UI to create the flow and "save" it in database (using an http api in runtime storage plugin). We want to avoid a specific instance of Node-Red for that (we use docker containers).

I hope this is more understandable now and not just more confusing...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 December 2023 09:46 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/12 "2023-12-07T09:46:35Z")

</div>

You can run node-red in "stopped" mode (i.e. the flows are not running / not executing)

So in theory, you could have 2 instances. One that is stopped, the other that is running.

The problem with "just an editor" is that much of a nodes configuration comes from the node itself - therefore the node needs to be "installed" and the core of node-red needs to run in order to do the right thing. But as stated above, you _can_ start node-red (and serve the editor) without the runtime executing.

![Animation](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/d/5ddbf2fb4edca1f532c2428947772df7d196b954.gif)

> <https://github.com/node-red/node-red/pull/3642>
>
> \## Types of changes
> 
> \- \[\] Bugfix (non-breaking change which fixes an issue)
> …- \[x\] New feature (non-breaking change which adds functionality)
> 
> REFERENCE: https://github.com/node-red/designs/discussions/74
> 
> \## In action
> 
> !\[Animation\](https://user-images.githubusercontent.com/44235289/172831187-fa18ba20-2e24-42c5-8f2d-dbe3199a07e5.gif)
> 
> 
> 
> \## Proposed changes
> 
> \* Add API
> \* GET flows/state
> \* Used when loading editor to ensure client matches server
> \* POST flows/state
> \* Requires header \`Node-RED-Flow-Run-State-Change\` with a value of \`"start"\` or \`"stop"\` (any other value causes non 200 result)
> \* Add settings
> \* \`runtimeState.enabled\` (default=true) - enable or disable flows/state endpoint. Must be set to \`false\` to disable
> \* \`runtimeState.ui\` (default=true) - show or hide runtime stop/start options in the node-red editor. Must be set to \`false\` to hide
> \* COM + events (for notifying instances of state change)
> \* Utelising the existing \`"runtime-event"\` event with an \`id\` of \`"flows-run-state"\` the existing transport over websocket is used to sync state (ends up in \`notification/flows-run-state\` at client side - same method as how \`notification/runtime-deploy\` is received).
> \* Adds SVG
> \* start.svg
> \* stop.svg
> \* Menu.js
> \* Adds \`function setVisible(id,state)\`
> \* Adds new file \`editor-client/src/js/runtime.js\` (appended in \`grunt.js\`)
> \* This is for monitoring & updating menu items "stop" "start" visibility depending on server state
> \* Add tests...
> \* editor-api/lib/admin/flows\_spec.js
> \* √ returns flows run state
> \* √ sets flows run state - stopped
> \* √ sets flows run state - bad value
> \* runtime/lib/api/flows\_spec.js
> \* √ gets flows run state
> \* √ permits getting flows run state when setting disabled
> \* √ start flows
> \* √ stop flows
> \* √ rejects starting flows when setting disabled
> \* √ rejects stopping flows when setting disabled
> \* √ rejects setting invalid flows run state
> \* runtime/lib/flows/index\_spec.js
> \* √ emits runtime-event "flows-run-state" "started"
> \* √ emits runtime-event "flows-run-state" "stopped"
> 
> \## Checklist
> 
> \- \[x\] I have read the \[contribution guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> \- \[x\] For non-bugfix PRs, I have discussed this change on the forum/slack team.
> \- \[x\] I have run \`grunt\` to verify the unit tests pass
> \- \[x\] I have added suitable unit tests to cover the new/changed functionality

---

<div class="post-metadata">

**Author:** ![toussa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/toussa/32/46339_2.png) [@toussa](https://discourse.nodered.org/u/toussa)\
**Post date:** [7 December 2023 10:11 UTC](https://discourse.nodered.org/t/re-purpose-the-flow-editor-for-other-flow-like-data-editing/1509/13 "2023-12-07T10:11:00Z")

</div>

Thanks for your response Steve.

Indeed, the Stop/Start will stop the runtime (we're using it), but it's still included and needed.

We're indeed looking for the "just an editor" way and I understand why it's not so simple 🙂  
For us, node configurations are just simple html/json that can be given to the "simple" editor without needing a runtime to init or other processing (and I imagine it's the vast majority of nodes, except maybe for Config nodes)