# Using Monaco editor - monaco branch now in fork (PR#2971)
**URL:** https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561
**Category:** Developing Nodes
**Created:** [12 May 2020 23:27 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561 "2020-05-12T23:27:31Z")
**Posts on this page:** 20
**Page:** 3
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [20 May 2020 18:40 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/41 "2020-05-20T18:40:03Z")
> [@Steve-Mcl](#):
>
> I'm aware of this one - its to fix - but doesnt stop it all working.
I think this is the main culprit in the browser console log:
```auto
vendor.js:527 GET http://localhost:1880/monaco/min/vs/editor/editor.main.js net::ERR_ABORTED 404 (Not Found)
```
Under which name should Monaco be in `package.json`? I can't see anything "monaco" there?
I seem to have it here:
```auto
$ find . -name editor.main.js
./packages/node_modules/@node-red/editor-client/src/vendor/monaco/min/vs/editor/editor.main.js
./packages/node_modules/@node-red/editor-client/public/vendor/monaco/min/vs/editor/editor.main.js
```
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [20 May 2020 18:42 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/42 "2020-05-20T18:42:40Z")
> [@ristomatti](#):
>
> Under which name should Monaco be in `package.json` ? I can't see anything "monaco" there?
its not - same as ACE isnt. It gets "baked in" by grunt.
on my machine I get...
I'll clear my browser cache in case i'm getting a cache copy (and since broke it haha)
5 mins
EDIT - i think i know whats going on.
I'll try to get this fixed and pushed ASAP - will be good to get feedback.
Thanks for your patience @ristomatti & @gemini86
---
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [20 May 2020 18:45 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/43 "2020-05-20T18:45:22Z")
Your debug print on NR startup in case it helps:
```auto
20 May 21:43:48 - [info] Server now running at http://127.0.0.1:1880/
runtime.settings.exportNodeSettings(safeSettings) - safeSettings: { httpNodeRoot: '/',
version: '1.1.0',
context: { default: 'memory', stores: ['memory'] },
editor: { lib: 'MONACO', theme: 'vs-dark' },
flowEncryptionType: 'system' }
```
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [20 May 2020 20:52 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/44 "2020-05-20T20:52:07Z")
@ristomatti @gemini86 Thanks for your patience
I have found the issue (on my machine, monaco was cached from an early first attempt).
I have since pushed an update & tested it on a new Linux VM - now working. Phew!
to update simply...
```bash
cd your-node-red-src-folder
git checkout monaco
git pull
npm run build
npm start
```
Please let me know how you get on.
---
### Author:  [@gemini86](https://discourse.nodered.org/u/gemini86)
#### Post date: [20 May 2020 22:17 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/45 "2020-05-20T22:17:47Z")
Works on my windows machine! I'll check again on my linux machine later
---
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [21 May 2020 08:44 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/46 "2020-05-21T08:44:12Z")
Quick retest again from my tablet, success with some quirks (likely Android related)!
The issues I noticed:
- function node opens with only single tap instead of long press & edit from the pop-up menu, so moving/deleting the node cannot be done
- first test using Swift Keyboard somehow froze the text input after selecting a completion, no issues with a second test using Hacker's Keyboard (= no predictive input)
Great work!
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [21 May 2020 08:50 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/47 "2020-05-21T08:50:00Z")
Good(ish) to hear.
This work was done atop the `dev` branch which is undergoing a lot of change at the moment (i've noticed) - some things are not quite ready it seems.
> [@ristomatti](#):
>
> function node opens with only single tap instead of long press
I didnt change anything at all in any of the nodes (that was deliberate as the modification had to be transparent to the core + contrib nodes) - so my guess - its a `dev` thing.
> [@ristomatti](#):
>
> first test using Swift Keyboard somehow froze the text input after selecting a completion, no issues with a second test using Hacker's Keyboard (= no predictive input)
That is a concern - how does the ACE editor handle Swift keyboard?
Would you be willing to try the GBoard keyboard from google? (I find it to be excellent & it is default on a lot of andriod devices - would be a great test).
Thanks for doing some tests either way.
---
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [21 May 2020 09:05 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/48 "2020-05-21T09:05:07Z")
> [@Steve-Mcl](#):
>
> I didnt change anything at all in any of the nodes (that was deliberate as the modification had to be transparent to the core + contrib nodes) - so my guess - its a `dev` thing.
Ah didn't realise that. Yes it seems the edit dialog now opens on initial tap. Dragging and menu still work with a long press but it seems to require doing it in a specific way.
> [@Steve-Mcl](#):
>
> Would you be willing to try the GBoard keyboard from google? (I find it to be excellent & it is default on a lot of andriod devices - would be a great test).
My device is too full to install new apps at the moment but I tested with Samsung keyboard with predictions enabled. I wasn't able to reproduce the issue with a quick test at least. I also retested Swift Keyboard and it indeed doesn't work too well but I remember it having occasional issues with ACE also so I wouldn't worry about that too much.
Aside - I would say the minimap preview takes too much space an a small by default edit window, what do you think? Also I think there's a space in the margin for debug markers to the left of line numbers so it looks unnecessarily wide. Small details but worth mentioning still.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [21 May 2020 09:47 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/49 "2020-05-21T09:47:11Z")
> [@ristomatti](#):
>
> Aside - I would say the minimap preview takes too much space an a small by default edit window, what do you think? Also I think there's a space in the margin for debug markers to the left of line numbers so it looks unnecessarily wide. Small details but worth mentioning still.
Absolutely worth mentioning.
I an busy adding the ability to have custom options in the settings.js that will map directly to the [monaco.editor.ieditoroptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html) meaning you can adjust minimap size, switch off things like folding, line numbers etc
---
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [21 May 2020 09:50 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/50 "2020-05-21T09:50:28Z")
> [@Steve-Mcl](#):
>
> I an busy adding the ability to have custom options in the settings.js that will map directly to the [monaco.editor.ieditoroptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html) meaning you can adjust minimap size, switch off things like folding, line numbers etc
Very cool! Any chance of a custom color theme setting? I don't know about the compatibility but since I've created one for VSCode it'd be great. 😁 I've themed the ACE editor already to match my NR theme. 🕶
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [21 May 2020 12:52 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/51 "2020-05-21T12:52:38Z")
Add your own theme eyy? 🤔
OK - it wasnt as easy as it should be but here goes...
Demo...
To add a theme - place the `json` file in `packages/node_modules/@node-red\editor-client/src/vendor/monaco/min/vs/theme` then `npm build` so they get added to the package.
I've added a whole bunch that i borrowed from [https://github.com/brijeshb42/monaco-themes/tree/master/themes](https://github.com/brijeshb42/monaco-themes/tree/master/themes) (reminder to self, include a nod to this lib as a thank you)
To set the theme - I have adjusted the `settings.editor` arrangement slightly so that you can take advantage of the numerous options in [monaco.editor.ieditoroptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html) (in the example below I shrink the minimap and set font to 10
```json
editor: {
lib: "MONACO", //can be "MONACO" or "ACE"
options: {
/* theme - must match the file name of a theme in
* packages/node_modules/@node-red/editor-client/src/vendor/monaco/min/vs/theme
* e.g. "tomorrow-night", "upstream-sunburst", "github", "my-own-lushtastic-theme"
*/
theme: "birds-of-paradise",
minimap: {
enabled: true,
maxColumn: 30,
scale: 1,
showSlider : "mouseover",
renderCharacters: true
},
fontSize: 10
}
}
```
Will push these changes to github shortly.
---
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [21 May 2020 13:40 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/52 "2020-05-21T13:40:55Z")
Most impressive, thank you! 😀
Edit: I'll post a screenshot if I'll get it working (later on)
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [21 May 2020 13:43 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/53 "2020-05-21T13:43:38Z")
Updates are now in github.
As before, pull, build, run.
Thanks for testing.
---
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [22 May 2020 18:25 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/54 "2020-05-22T18:25:34Z")
Now finally testing on my laptop. Themes work great! The file format is unfortunately not the same as for VSCode themes. Not that reimplementing my custom theme on this format would be that big of a deal. Excellent that you also exposed a bunch of other settings as well.
I'll definitely play more with this after my ongoing project of migrating my Node-RED flows from an Odroid C2 into two SSD booted Raspberry Pi 4's. My plan is to split home and summer cottage flows, so all the summer cottage stuff could run locally and not rely on a VPN connection to my home. Amazingly this setup has run with only minor issues over two years now. But my luck cannot last forever. 😀
---
### Author:  [@jamesnw](https://discourse.nodered.org/u/jamesnw)
#### Post date: [9 June 2020 18:06 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/55 "2020-06-09T18:06:58Z")
Guys, I didn't find this thread in any google search, so I just went ahead and integrated the Monaco editor on my own, but has a few minor issues still:
> [@Using Monaco editor - monaco branch now in fork (PR#2971)](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork/26561):
>
> UPDATE: 1-May-2021 - use monaco2 branch git clone [https://github.com/Steve-Mcl/node-red.git](https://github.com/Steve-Mcl/node-red.git) cd node-red git checkout monaco use monaco2 branch git checkout monaco2 npm install npm run build npm start notes: you can chose which editor to use by modifying your settings.js to include editorTheme.codeEditor.lib = "monaco" like this... // Customising the editor editorTheme: { projects: { // To enable the Projects feature, set this value to true enabled: …
It's a rough draft. I just started playing with node red yesterday and built it the same day, so it still needs work. 😉
I mainly edited the function node and the editor template file. It supports JS, but when TS exists, the JS is read-only. It does not yet have any code completion for msg and other objects yet, as this was only a POC, but the one in this post seems much better, and seems more integrated properly, so I'll probably stop. 😉
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [9 June 2020 19:11 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/56 "2020-06-09T19:11:43Z")
Feel free to carry on.
I did it to prove Monaco can seamlessly replace ace. Which i did.
I created the necessary proxies & stubs so that not only node-red but all contrib nodes also worked transparently and without modification - which would be the major hurdle in adoption.
Lastly, Monaco doesn't work 100% on IE11 (ms dropped its own browser - I wish corporate would too) and is not fully mobile/tablet ready (yet)
Ps. Your search skills need honing - guess what the first search result for "node-red Monaco" points to 😉
---
### Author:  [@jamesnw](https://discourse.nodered.org/u/jamesnw)
#### Post date: [9 June 2020 19:14 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/57 "2020-06-09T19:14:33Z")
I searched for node-red typescript, not monaco, lol. 😛
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [9 June 2020 19:15 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/58 "2020-06-09T19:15:42Z")
It's a good point mind. If Monaco gets adoption, then I can see a day we have a choice of writing functions in TS or JS
---
### Author:  [@jamesnw](https://discourse.nodered.org/u/jamesnw)
#### Post date: [9 June 2020 19:18 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/59 "2020-06-09T19:18:31Z")
My approach was to keep ACE and just have Monaco feed into it (and a switch to go back and forth). 😉 So far the idea shows it can work great, but until this thread, I didn't know how everything really fit together.
Are there any issues still not resolved for your implementation? You are much farther with this, so I may just help yours along instead.
---
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [9 June 2020 19:19 UTC](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561/60 "2020-06-09T19:19:57Z")
> [@Steve-Mcl](#):
>
> It's a good point mind. If Monaco gets adoption, then I can see a day we have a choice of writing functions in TS or JS
There's TypeScript support in ACE also (although very basic). I think the biggest obstacle there would be to make function nodes support it. I wonder if ts-node could somehow facilitate that? But it goes off topic.
[Previous page](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561.md?page=2)
[Next page](https://discourse.nodered.org/t/using-monaco-editor-monaco-branch-now-in-fork-pr-2971/26561.md?page=4)