The new browser check creation experience is built around an upgraded text editor powered by the Monaco editor from Microsoft, which also powers VS Code under the hood. This post will cover some of the challenges faced while building this modern code editing experience in the browser, including extending JavaScript with a custom language, custom highlighting, and custom code completion. The original browser check experience was based on Code Mirror, but it caused issues due to its long length and forced users to do excessive scrolling and context switching. To address these issues, the new experience hides secondary settings sections and moves them into a drawer component, leaving only the editor itself, run summary/results section, and fold-open logs section visible. The Monaco editor allows for custom syntax highlighting, which was achieved by creating an entirely custom language feature and bolted it onto the built-in JavaScript language definitions and handlers in Monaco. Additionally, custom completion options were added to support Handlebars partials, including autocompletion of partial prefixes and hover for content. Typescript and autocomplete features were also integrated into the new experience. The development process was challenging but ultimately successful, with all major issues resolved before the initial release date of June 1st.