Web-based editor

Hi!

First time posting, long time follower.

I’m working on a web-based editor for homeassistant that will give the user the ability to edit config files on the fly from a panel inside of homeassistant.

The editor is based on the monaco editor which is powering Microsoft VS Code.

As of now it loads configuration files, and allows you to edit and save them.

It’s running as a nodejs application locally on the same RaspberryPi and is presented inside a panel_iframe.

If anyone is interested i will put it up on Github.

Screen grab from my setup:

Cheers!
/Emil

26 Likes

Would be neat if you could edit python_scripts in this editor then check result with the push of button?
I recall from a tweet somewhere that there is a hassio project doing something very similar to your approach.

1 Like

The monaco editor has as lot of features built in.

Rich IntelliSense, Validation
TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML

Basic Syntax Colorization
XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, SASS, R, Objective-C

Should work great for editing python.

I have planned to integrate config validity check on save and automatic backup of the config.

/Emil

Fantastic, if you need any alpha testers let me know :slight_smile:

Looks nice. Are there any key differences to @danielperna84 configurator?

It probably will be better at syntax validation. My configurator is based on the Ace Editor, which does syntax highlighting, but it can’t tell if the content is actually valid.

Monaco also has good support for built in snippets as well. That could be something nice to implement.

Think I will move the “backend” from nodejs to python instead, With python there will be a much simpler integration. It’s always a pain to get nodejs running on the pi.

/Emil

3 Likes

Most certainly interested. Would be nice as a Docker container so I can run it alongside my HA Docker. I’m running HA on a Synology.

Yeah thought about that, the problem in that case is file access I guess. The node application needs r/w access to the config files.

/Emil

Well as long as the Docker has the HA folder mapped to the editor container in R/W access it should be fine. i’d be up for testing.

3 Likes

I’ll do a test with docker. Will publish a image soon (hopefully)

/Emil

3 Likes

Thanks for confirming!

Really excited to see this published one day! Great job at intergrating this with HA!

Made the git-repo public if anyone would like to try it out:

5 Likes

Hi @voxic got this running no problems :slight_smile:
I see that currently only .yaml files in the configuration directory are listed for editing, is it possible to add .py files? Also it would be great to be able to jump into folders in the configuration directory, which is where custom components and python_scripts are.
Cheers!

Did an update this morning. Pushed to GitHub. There is now support for .py with code highlighting. Started work on folder browsing.

/Emil

2 Likes

Is there a way to get this to work with Hass.IO?

1 Like

I haven’t used HASS.IO my self and haven’t looked in to what special requirements is needed to be filled.

Right now this editor runs as a stand alone nodejs app.

/Emil

Just what I was waiting for, great!

Committed a new version this morning with the ability to traverse folders.

Next up is to explore the possibility to create a docker image for easier deployment.

//Emil

1 Like