Introducing Elm Editor - a web-based IDE for Elm programs

(Original publication at https://michaelrätzel.com/blog/introducing-elm-editor-a-web-based-ide-for-elm-programs)

About one year ago, I started working on Elm Editor, a web app for developing Elm programs.

As an integrated development environment, it assists us in reading, writing, and testing Elm programs and in collaborating with other developers.

This project minimizes the friction for newcomers to get started with programming. Since the front-end is entirely web-based, it requires practically no setup. Any modern web browser is enough to use it.

To see Elm Editor in action, check out the public instance at https://elm-editor.com

This video is a short demonstration of a code editing cycle in Elm Editor:

Features in 2021

Some of the features come for free with the Monaco Editor. Others required more effort and glue code in javascript to communicate with and synchronize with the code editor. (Learned quite a bit about javascript in this project)

• Viewing and editing all Elm module files as well as other text files in your project.
• Checking programs for problems such as Elm compiler errors.
• Saving and sharing the current state of a project, including all files.
• Importing complete projects from public git repositories.
• For front-end web apps, viewing and testing the app in an iframe.
• Visual markers in the code to quickly find locations of problems.
• Showing error descriptions on mouse hover.
• Completion suggestions to discover available declarations and explore useful codes.
• Showing documentation and details when hovering the mouse cursor over a part of the code.
• Command palette to discover new functionality and keyboard shortcuts.
• Text search with options for case sensitivity, regular expressions, and replacing matches.

Besides these features also found in traditional big desktop-based IDEs, there are more innovative features like the differential project state model.

Project Organization and Implementation

Elm Editor is an open-source project organized for easy customization and deployment of custom instances. The source code lives at https://github.com/elm-fullstack/elm-fullstack/tree/main/implement/example-apps/elm-editor

Most of the action happens in the front-end. The primary role of the back-end is integrating tools like the Elm and elm-format executable files and interfacing with Git hosting services like GitHub and GitLab.

The front-end is mainly written in Elm and integrates the Monaco Editor from the VS Code project. The Elm app implements ports with the javascript-based Monaco Editor. The Elm side also implements language services that power editor features that require understanding the syntax and semantics of the Elm programming language.

Outlook

Development continues to make reading and developing Elm programs even more efficient. Integration of a test runner seems one of the more obvious things to add soon. Adding a REPL seems another great addition. A REPL is a more interactive alternative for testing and exploring the behavior of the code in the current workspace.

Then there are more minor improvements like a preview for Markdown files and viewers for images and audio files (for those working on video games).

There are tons of ideas for new features; I could probably go on for hours. As with my other open-source projects, prioritization depends in large part on your feedback. Besides the Elm discourse, a good place for discussion and feedback is on GitHub at https://github.com/elm-fullstack/elm-fullstack/discussions or in the issues section.