Introducing CoderPad Monaco, A Better Code Editor Experience

March 2, 2022 • Announcements , Product Updates

By Sarah J Bland

Developers are picky about their code editors. Everyone has a certain set of expectations around what they want their IDE to do.

At CoderPad, we want to make sure that the interview experience is as smooth as possible, no matter which editor you use. Candidates should be able to perform at their best without distraction from an unfamiliar editor, just as they would when on the job. Interviewers likewise want to provide an excellent developer candidate experience.

We’ve always invested heavily in our code editor, and built features engineers expect to find in their IDE like syntax highlighting, autocomplete, auto-closing brackets, shortcuts, and more. But we wanted the CoderPad IDE to behave even more like your own. Introducing: Monaco.

Our new editor is powered by Monaco, which provides a much better IDE experience.

Monaco is the code editor that powers Microsoft’s Visual Studio Code (VSCode), which is by far the most popular IDE choice. Now, it powers our editor too. That means new functionality and a better experience for our users.

For more info on the implementation details of this challenging project, check out our behind-the-scenes blog post here.

CoderPad’s new and improved code editor experience

We’ve enhanced the following features in our code editor so you can now enjoy the same seamless experience in our IDE that you are used to with VSCode.

Syntax Highlighting

In our updated syntax highlighting, we do a better job of highlighting library APIs, function parameters, and more, thanks to our new ability to leverage Monaco.

That extra bit of time saved reading and analyzing your code is particularly crucial in code interviews, where time is everything.

Our new syntax highlighting handles classes, methods, and many other items much more clearly now.

For example, notice how ReactDOM is recognized as a class, alongside document being recognized as a global variable.

Error Display

While syntax highlighting can help show logic errors at a glance, nothing beats the little red squiggly lines when you’ve made syntax or type errors. After all, if we can implement them in Word for spelling mistakes, why not for syntax mistakes in programming?

In this example, TypeScript is warning us that a class constructor only expects one argument, but two were passed.

This one introduced a particularly difficult engineering challenge to implement properly – read more about that here.

Code Collapsing

When working with large codebases, it can be challenging to know where a block of code starts and ends. Our editor now supports “code collapsing”.

This not only allows you to find the start and end of a bit of code, but it can also help you focus on one particular aspect of code that isn’t collapsed.

Enhanced Search & Replace

Likewise, when working with larger codebases, the ability to quickly search through code is important for navigating.

Not only should a good search support basic text searching, but it should handle things like regex as well.

We support all of the search and replace suggestions as VSCode, including “replace all”.

You can even combine this with replacing. If your regex includes a capture group, you can then reference it in your replace to make quick work of specific refactors.

Refactoring Symbols

While search and replace can be a useful tool to do refactors, when using it to rename a symbol, it will often not realize the difference between a variable called “hello” and one called “helloThere”.

To solve this, an IDE should be able to quickly rename a symbol and do other smaller refactors on your behalf. Like this:

You can “Rename Symbol” using F2.

This brings up an input to rename the symbol.

Command Palette

All of these features are clearly useful for development, but how do you discover them all?

This is where the “Command Palette” comes into play. Press <kbd>F1</kbd> and it will bring up a list of actions you’re able to take in our IDE.

The command palette comes with lots of new functionality, like keyboard cursor management.

The best in-browser IDE for interviewing

Monaco enables a whole host of new features that help drive the developer experience within a pad. While we touched on some new features today, it’s worth mentioning that we still continue to support awesome features like VIM & Emacs modes, keyboard shortcuts, and more. We’ve also improved the micro-experience of the editor – the responsiveness of typing, to start.

We hope you and your candidates will love coding in the new CoderPad Monaco editor!