Hey everyone, live_monaco_editor is a new component to render the Monaco Editor in your app. Monaco is the editor that powers VSCode and is the editor we all use and love in Livebook.

It was created to be used on BeaconCMS Admin UI but it can be used in any app.

How it looks like

After installing the dep and adding its hook into live socket, you can have an editor as simple as:

<LiveMonacoEditor.code_editor value="# My Code Editor" />

And interact with it calling:

socket
|> LiveMonacoEditor.change_language("html")
|> LiveMonacoEditor.set_value("<h1>New File</h1>")

Check out all features. More to come.

How assets are loaded

It’s using monaco-loader to load assets dynamically at runtime keeping the bundle size really small. It may support importing local assets if that’s ever requested.

Is it ready for production?

It’s in the early stages but a new version to make it more stable will be released soon.

Roadmap

The top priority is delivering a great UX for editing Elixir and HEEx files with auto complete and features you’d expect from a code editor, similar to Livebook. Note that this project has no association with Livebook but that’s a source of inspiration thanks to Jonatan Kłosko.

Enjoy!