sw-yx/awesome-monaco-editor

awesome-monaco-editor

this list is now archived - look inside https://github.com/sw-yx/brain if you would like an updated list! thank you.

awesome-monaco-editor

Resources and tips and tricks for https://github.com/microsoft/monaco-editor/!

Monaco Wrappers

• Web Component https://github.com/vanillawc/wc-monaco-editor
• React https://github.com/react-monaco-editor/react-monaco-editor
• React Native
  • non Open Source - microsoft/monaco-editor#1365 (comment)
  • VS Code on iPad? - microsoft/vscode#70764
  • Corbin Crutchley

Example codebases using Monaco

other than VSCode of course

• https://github.com/satya164/monaco-editor-boilerplate
• https://github.com/malcolm-kee/malcolm-kee/blob/master/src/components/typescript-editor.tsx (used in https://malcolmkee.com/typescript-for-react-developer/variables#array-and-tuple
• https://github.com/sw-yx/svelte-zen-garden
• https://github.com/statecharts/xstate-viz/tree/next/src
• https://github.com/Lamden/wallet
• https://github.com/eclipse-theia/theia (uses VScode)

Helpful Blogposts

• React
  • https://blog.expo.io/building-a-code-editor-with-monaco-f84b3a06deaf
  • https://www.swyx.io/writing/how-to-add-monaco-editor-to-a-next-js-app-ha3
• Svelte
  • https://www.swyx.io/writing/svelte-zen-garden/
• Language Server Protocol
  • https://blog.codedamn.com/language-server-protocol-with-monaco-editor/

Monaco tips

• add code folding icons sw-yx/svelte-zen-garden#1 (comment)
• automatically load declaration files while typing https://github.com/lukasbach/monaco-editor-auto-typings