You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



Configured monaco-vscode-api with tools and extensions

Version published
Weekly downloads
decreased by-25.07%
Weekly downloads



@codingame/monaco-editor-wrapper · monthly downloads npm version PRs welcome


Monaco editor wrapper uses and configures monaco-vscode-api for you

It also includes some tools allowing to add some missing features to monaco-editor:

  • placeholder
  • preventAlwaysConsumeTouchEvent, mobile feature corresponding to the alwaysConsumeMouseWheel monaco-editor option
  • collapseCodeSections allows to create and collapse a code section between 2 tokens
  • registerTextDecorationProvider allows to compute decorations on all existing editors
  • hideCodeWithoutDecoration allows to hide code parts that have a specific decoration
  • lockCodeWithoutDecoration allows to make read-only code parts that have a specific decoration
  • updateEditorKeybindingsMode allows to apply vim or emacs keybindings


npm install @codingame/monaco-editor-wrapper


Simple usage

You need to call the exposed initialize function, and wait for the returned promise.

You will then be able to interact with the monaco-editor api (by importing monaco-editor) OR the VSCode api (by importing vscode)

Model creation

Instead of using monaco.editor.createModel, it is recommended to use monaco.editor.createModelReference to create models.

It makes it possible for the VSCode service to reference that file by it's reference without breaking (for instance when following file links in source code using LSP).

Optional features

By default, only a minimal set of features is registered (vscode extensions, editor/model services, languages, textmate, dialogs, configuration/keybindings, snippets, accessibility...)

There are some optional features that can be enabled by importing a specific export:

  • @codingame/monaco-editor-wrapper/features/extensionHostWorker enables the worker extension host which allows to run VSCode extensions
  • @codingame/monaco-editor-wrapper/features/notifications enables the VSCode notifications instead of logging into the console
  • @codingame/monaco-editor-wrapper/features/workbench allows to use the full VSCode workbench
  • @codingame/monaco-editor-wrapper/features/typescriptStandalone enables the monaco standalone typescript language feature worker

Those feature can be used if the workbench feature is enabled:

  • @codingame/monaco-editor-wrapper/features/viewPanels enables a few panels (timeline, outline, output, markers, explorer)
  • @codingame/monaco-editor-wrapper/features/search enables the search panel
  • @codingame/monaco-editor-wrapper/features/extensionGallery enables the extension gallery panel and the possibility to install extensions from the marketplace
  • @codingame/monaco-editor-wrapper/features/terminal enables the terminal panel
  • @codingame/monaco-editor-wrapper/features/testing enables the testing panels

Embed language IntelliSense

By default, monaco-editor contains worker to achieve IntelliSense in CSS, SCSS, JavaScript, TypeScript, JSON and HTML.

It's not possible to use them with this lib. However they can be replaced by the corresponding VSCode extension.

To enable them, install and import for following packages:

  • JSON: import '@codingame/monaco-vscode-json-language-features-default-extension'
  • JavaScript/TypeScript: import '@codingame/monaco-vscode-typescript-language-features-default-extension'
  • CSS/SCSS: import '@codingame/monaco-vscode-css-language-features-default-extension'
  • HTML: import '@codingame/monaco-vscode-html-language-features-default-extension'

You also need to import @codingame/monaco-editor-wrapper/features/extensionHostWorker to allows the VSCode extensions to run in a webworker.

Additional apis
User configuration

This library exposed some functions to manage the user global configuration:

  • registerDefaultConfigurations Allows registering default values for some configuration keys which can be overridden
  • updateUserConfiguration Update the user configuration, overrides the default configuration, uses the same syntax as VS Code configuration
  • getUserConfiguration Get back the current user configuration
  • onUserConfigurationChange Get notified when the user configuration change (either after calling updateUserConfiguration or from internal configuration update)
  • getConfiguration Allows to get a given configuration key in a given language
  • onConfigurationChanged Listen to configuration change
  • updateKeybindings aAlows to update the editor keybindings with the same syntax as in VS Code
  • updateEditorKeybindingsMode Switch between vim, emacs or classic keybindings


Package last updated on 11 Jul 2024

Did you know?


Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog


Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc