Improve In-editor UI of compose files #21

New Issue

GiteaMirror · 2025-10-31T14:59:59-05:00

GiteaMirror commented

2025-10-31 14:59:59 -05:00

Originally created by @DanCardin on GitHub (Aug 20, 2024).

Hi, we interacted on reddit, resulting in (i think) the "Files on Server" toggle option. Very much liking Monitor so far!

Would it be possible to allow editing said file akin to the "Compose File" text box that's available when "Files on Server" is not toggled?

This would basically get it onto-par with portainer/dockge, in that i could author an entire compose file from the web app, while also having the data just be plain text files. (lmk if this actually already possible, and i'm just being dense!)

I'd also request more "code editor"y experience (syntax highlighting, ctrl+/ comments, as tab; but that's definitely a completely separate Issue, as well as presumably a much larger investment/involvement of some js component.

Originally created by @DanCardin on GitHub (Aug 20, 2024). Hi, we interacted on reddit, resulting in (i think) the "Files on Server" toggle option. Very much liking Monitor so far! Would it be possible to allow editing said file akin to the "Compose File" text box that's available when "Files on Server" is not toggled? This would basically get it onto-par with portainer/dockge, in that i could author an entire compose file from the web app, while also having the data just be plain text files. (lmk if this actually already possible, and i'm just being dense!) I'd also request more "code editor"y experience (syntax highlighting, ctrl+/ comments, <tab> as tab; but that's definitely a completely separate Issue, as well as presumably a much larger investment/involvement of some js component.

GiteaMirror added the done label 2025-10-31 14:59:59 -05:00

GiteaMirror closed this issue

2025-10-31 14:59:59 -05:00

GiteaMirror commented

2025-10-31 15:00:00 -05:00

@mbecker20 commented on GitHub (Aug 20, 2024):

Hi, first of all, thanks for you interest in the project and the helpful feedback!

Correct, it is not possible to edit the files from the UI when using "Files on Server" mode. And I don't think Monitor's lack of code-editor features when it comes to compose files is a separate issue at all -- If the editor is as bad as it is, users won't want to use the feature. So I think it makes sense to prioritize "editing Files on Server" features after improving the editor UI.

So it really comes down to priority of improving the editor UI. Users using either "Git Repo" mode or "Files on Server" mode can already edit the file using their favorite editor (maybe VSCode over SSH) and have a good experience here. Many will prefer using their own editor over Monitor editor even if it did have a good UI, especially power users. So I didn't feel it was a great use of time at this point.

With that said, I do want to support this convenience feature, and did look a bit into figuring out web editor frontends, syntax highlighting, context-aware tab indentation. It really just needs some time dedicated to this part. I also think it would be a really good task for the community to help with, as some others have much more experience with this than either me or @karamvirsingh98 .

Once the UI is sorted, I will revisit this feature to edit compose files on the host in "Files on Server".

Actually, would you mind renaming this issue to be about improving the editor UI? And then I will mark it for community help.

@mbecker20 commented on GitHub (Aug 20, 2024): Hi, first of all, thanks for you interest in the project and the helpful feedback! Correct, it is not possible to edit the files from the UI when using "Files on Server" mode. And I don't think Monitor's lack of code-editor features when it comes to compose files is a separate issue at all -- If the editor is as bad as it is, users won't want to use the feature. So I think it makes sense to prioritize "editing Files on Server" features _after_ improving the editor UI. So it really comes down to priority of improving the editor UI. Users using either "Git Repo" mode or "Files on Server" mode can already edit the file using their favorite editor (maybe VSCode over SSH) and have a good experience here. Many will prefer using their own editor over Monitor editor even if it did have a good UI, especially power users. So I didn't feel it was a great use of time at this point. With that said, I do want to support this convenience feature, and did look a bit into figuring out web editor frontends, syntax highlighting, context-aware tab indentation. It really just needs some time dedicated to this part. I also think it would be a really good task for the community to help with, as some others have much more experience with this than either me or @karamvirsingh98 . Once the UI is sorted, I will revisit this feature to edit compose files on the host in "Files on Server". Actually, would you mind renaming this issue to be about improving the editor UI? And then I will mark it for community help.

GiteaMirror commented

2025-10-31 15:00:00 -05:00

@mbecker20 commented on GitHub (Sep 23, 2024):

Going to try implementing https://www.npmjs.com/package/@monaco-editor/react

@mbecker20 commented on GitHub (Sep 23, 2024): Going to try implementing [https://www.npmjs.com/package/@monaco-editor/react](https://www.npmjs.com/package/@monaco-editor/react)

GiteaMirror commented

2025-10-31 15:00:00 -05:00

@FoxxMD commented on GitHub (Sep 24, 2024):

There's also monaco-yaml which is a drop-in replacement for the official monaco-editor and adds built in support for yaml plus validating against a JSONschema (compose.json schema) like this

@FoxxMD commented on GitHub (Sep 24, 2024): There's also [`monaco-yaml`](https://github.com/remcohaszing/monaco-yaml) which is a drop-in replacement for the official `monaco-editor` and adds built in support for yaml plus validating against a JSONschema ([`compose.json` schema](https://github.com/compose-spec/compose-spec/blob/main/schema/compose-spec.json)) [like this](https://github.com/mbecker20/komodo/compare/main...FoxxMD:komodo:monacoComposeEditor#diff-839543ee0bf0e69f979e7647e66cf33c1c5be6df9b4860f19dfe7738d603a036R9)

GiteaMirror commented

2025-10-31 15:00:00 -05:00

@mbecker20 commented on GitHub (Oct 8, 2024):

v1.15+ implements monaco editor to improve this

@mbecker20 commented on GitHub (Oct 8, 2024): v1.15+ implements monaco editor to improve this

GiteaMirror referenced this issue

2025-10-31 15:17:40 -05:00

[PR #21] [MERGED] UI Updates - Remove topbar transparency, pretty status badges, tidy resource page layout with a 'back' button #666

Sign in to join this conversation.