How we added custom languages, code completion and highlighting to the Monaco editor.
We've recently launched a brand new in-browser editor for our browser check creation experience! Browser checks are Javascript-powered Playwright/Puppeteer scripts that run on deploy or on a schedule for testing and monitoring websites and web apps.
While this new experience centers around an upgraded text editor, it is much more than just that.The new browser check creation experience builds on the popular Monaco editor from Microsoft, which also powers VS Code under the hood. This post will cover some of the challenges we faced along the way, what we did to overcome them, and tips for others looking to build a modern code editing experience in the browser.
Let's first quickly go over our original — now deprecated — browser check experience. Below is a screenshot of the original new browser check page. The text editor was based on Code Mirror, and all of the other options a Checkly check has available to it (run locations, alert settings, etc.) were listed directly below the code editor.
In replacing our codemirror based editor, we wanted to migrate to something where our users would immediately feel at comfortable in. Therefore, the choice to go with Monaco was easy.
