Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature request: Monaco Editor integration option?

See original GitHub issue

Issue Description

Tell us how you think we can improve Sandpack

Packages affected

  • sandpack-client
  • sandpack-react

What is this feature?

  • An option to use VS Code’s Monaco editor. Codesandbox website uses Monaco, so it would be nice to have a similar experience when cross over between the sandpack version and the codesanbox website (when you click the codesandbox logo in sandpack at the bottom right)

How would your idea work?

  • Ideally the API and setup would not be too different from using the existing @codesanbox/sandpack-react package.
  • TODO: need to dig into monaco-react package & report API differences & ease of integration

Thoughts regarding monaco-editor

VS Code’s team’s monaco code editor has lots of nice conveniences built right out of the box for a nice text editing experience that code mirror doesn’t have out of the box & require downloading multiple code-mirror add on packages & composing them together

  • hover annotations
  • peek definition (this can potentially be used to peek content of other files that are already in the sandpack sandbox of the user.
  • option clicking editor brings context menu
  • command palete
  • find all references

Demo link (thanks to @aboveyunhai from this Github Discussion #237 )


Hi @danilowoz,

  1. Has the team thought about monaco integration in the past?
    • I’m probably mixing context & the technical tradeoffs that were made to avoiding getting trapped in the same rabbit holes
  2. What area of the codebase would I need to look at to help enable this feature if I were to start a new feature branch?
  3. What level of difficulty or size would you rate this task for a new contributor in this codebase?

Thanks 🙏


Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

danilowozcommented, Jan 18, 2022

Hey all, thanks for raising this issue!

Although I wasn’t here when this decision of CodeMirror over Monaco was made, I think I can understand some of the reasons and highlight them here:

  • Mobile support: Monaco doesn’t have great mobile support, and this is crucial for Sandpack to deliver a uniform experience throughout all types of devices;
  • Final bundle size: CodeMirror provides an easy way to load only the modules/extensions we want to, which gives us the possibility to lazy-loading and code-splitting the CodeEditor component. Meanwhile, Monaco is a heavy package, and that’s why Embeds also defaults to CodeMirror in the mobile version (due to the previous reason too);
  • Extensibility: TBH, I haven’t had many experiences with Monaco before, but I can tell what I’ve heard, and Monaco makes it hard to customize and extend some configuration - and Monaco provides a great API to extensions, which pretty much solved many of our problems;

Plus, Sandpack is designed to be extensible and provide a basic (but powerful) development experience, so the initial goal was never to support any language server by default but to provide ways (API, documentation, support) for the application consumer (you) implement it by yourself.

Typescript integration So what’s the point of the #237 discussion? We want to empower Sandpack users to use their favorite tools and working environment, but by doing it as an “extension” and not as a built-in solution. Similar to the approach we took with Prettier and Eslint, we would like to introduce more guides/recipes of how to do it by yourself and customize it in your favor, based on your needs.

Still want to use Monaco? In fact, you can easily switch from CodeMirror to Monaco at your end, as Sandpack exposes all the APIs needed to implement it. Here is an example using Monaco in Sandpack:

Hope it makes clear this whole situation around the LSP and the editor options. Any further questions, I’m more than happy to answer them, otherwise, I’d close this issue. 😀

cliffordfajardocommented, Feb 26, 2022

Thanks for the awesome responses with added context! 🙏 going to close this issue

If anyone else stumbles on this thread, found another good read on monaco vs codemirror technical blog post

Read more comments on GitHub >

github_iconTop Results From Across the Web

monaco-editor/ at main - GitHub
This is the easiest method, and it allows for options to be passed into the plugin in order to select only a subset...
Read more >
Monaco Editor
The Monaco Editor is the code editor that powers VS Code. A good page describing the code editor's features is here. It is...
Read more >
Feature request: add monaco to script editor - Synthetic
Please improve your script editor by integrating monaco. It is the core lib of VSCode from MS and can be used to add...
Read more >
Migrating from Monaco Editor to CodeMirror - Sourcegraph
We migrated our search input from Monaco to CodeMirror6. It's been a delightful experience and we are now migrating our Notebooks and other ......
Read more >
Implement Monaco editor in Angular 13 - Stack Overflow
I ended up using import * as monacoRuntime from 'monaco-editor'; export var monaco: typeof import('monaco-editor') = monacoRuntime; to load it ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found