{"id":45067162,"url":"https://github.com/codingame/monaco-vscode-api","last_synced_at":"2026-05-23T00:07:31.911Z","repository":{"id":37083331,"uuid":"499614045","full_name":"CodinGame/monaco-vscode-api","owner":"CodinGame","description":"VSCode public API plugged on the monaco editor","archived":false,"fork":false,"pushed_at":"2026-04-01T15:03:36.000Z","size":12339,"stargazers_count":452,"open_issues_count":0,"forks_count":60,"subscribers_count":8,"default_branch":"main","last_synced_at":"2026-04-03T02:23:00.930Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodinGame.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-06-03T18:33:15.000Z","updated_at":"2026-04-01T14:38:04.000Z","dependencies_parsed_at":"2025-11-27T15:03:03.872Z","dependency_job_id":"2d3bcc04-5e86-4339-a077-12609b4ed71a","html_url":"https://github.com/CodinGame/monaco-vscode-api","commit_stats":{"total_commits":1617,"total_committers":14,"mean_commits":115.5,"dds":"0.16512059369202226","last_synced_commit":"c228c61f6dbcfebeeffa6769373ff356abacc0e3"},"previous_names":[],"tags_count":354,"template":false,"template_full_name":null,"purl":"pkg:github/CodinGame/monaco-vscode-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodinGame%2Fmonaco-vscode-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodinGame%2Fmonaco-vscode-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodinGame%2Fmonaco-vscode-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodinGame%2Fmonaco-vscode-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodinGame","download_url":"https://codeload.github.com/CodinGame/monaco-vscode-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodinGame%2Fmonaco-vscode-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31747178,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T09:16:15.125Z","status":"ssl_error","status_checked_at":"2026-04-13T09:16:05.023Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-19T11:09:31.037Z","updated_at":"2026-04-13T10:01:33.292Z","avatar_url":"https://github.com/CodinGame.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @codingame/monaco-vscode-api \u0026middot; [![monthly downloads](https://img.shields.io/npm/dm/@codingame/monaco-vscode-api)](https://www.npmjs.com/package/@codingame/monaco-vscode-api) [![npm version](https://img.shields.io/npm/v/@codingame/monaco-vscode-api.svg?style=flat)](https://www.npmjs.com/package/@codingame/monaco-vscode-api) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/codingame/monaco-vscode-api/pulls)\n\nThis [NPM module](https://www.npmjs.com/) allows to integrate full VSCode functionality into your `monaco-editor`.\n\nFor more information, please checkout the project's [wiki](https://github.com/CodinGame/monaco-vscode-api/wiki).\n\n## Installation\n\n```bash\nnpm install @codingame/monaco-vscode-api\n# Optionally install the extension api and the editor api\nnpm install vscode@npm:@codingame/monaco-vscode-extension-api\nnpm install monaco-editor@npm:@codingame/monaco-vscode-editor-api\n```\n\n`@codingame/monaco-vscode-extension-api` is installed as an alias to `vscode` to be able to run `import * as vscode from 'vscode'`, similar to what is done inside a VSCode extension\n\n`@codingame/monaco-vscode-editor-api` is installed as an alias to `monaco-editor` because it provides the same api as the official `monaco-editor`\n\n# Usage\n\nIf you are just starting with `monaco-editor` and `monaco-vscode-api` you may find helpful the [Getting Started Guide](https://github.com/CodinGame/monaco-vscode-api/wiki/Getting-started-guide) in the wiki.\n\n## Monaco service override\n\nMost of VSCode functionality implemented as \"services\", e.g.\n\n- theme service, providing support for VSCode themes\n- languages service, providing support for different language features.\n\nBy default, Monaco uses a simplified versions of the VSCode services, called `standalone` services.\nThis package allows to\n\n1. override them with fully-functional alternatives from VSCode\n2. add new services that were not included in Monaco\n\nHere is an example usage that overrides Monaco default configuration with VSCode json-based settings:\n\n```typescript\n// default monaco-editor imports\nimport * as monaco from 'monaco-editor'\nimport editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'\n\n// utilities to override Monaco services\nimport { initialize } from '@codingame/monaco-vscode-api'\nimport getConfigurationServiceOverride, {\n  updateUserConfiguration\n} from '@codingame/monaco-vscode-configuration-service-override'\n\nwindow.MonacoEnvironment = {\n  getWorker: (_moduleId, _label) =\u003e new editorWorker()\n}\n\n// overriding Monaco service with VSCode\nawait initialize({\n  ...getConfigurationServiceOverride()\n})\n\n// json config like in vscode settings.json\nupdateUserConfiguration(`{\n    \"editor.fontSize\": 30,\n    \"editor.lineHeight\": 30,\n    \"editor.fontFamily\": \"monospace\",\n    \"editor.fontWeight\": \"bold\",\n    \"editor.letterSpacing\": 0,\n}`)\n\n// creating an editor with VSCode configuration\nmonaco.editor.create(document.getElementById('editor')!, {\n  value: 'Editor with VSCode config and large bold fonts'\n})\n```\n\n\u003e [!NOTE]\n\u003e `initialize` can only be called once (and it should be called BEFORE creating your first editor).\n\nEach `get\u003cservice-name\u003eServiceOverride` contains the service and some glue to make VSCode service work with Monaco.\n\n### List of service overrides\n\nSome basic service overrides are coming with this package as dependencies:\n\n- **Base**: `@codingame/monaco-vscode-base-service-override`\n  - Contains some general-use services that are mandatory to most of the other features\n- **Host**: `@codingame/monaco-vscode-host-service-override`\n  - Interaction with the host/browser (shutdown veto, focus/active management, window opening, fullscreen...)\n- **Extensions**: `@codingame/monaco-vscode-extensions-service-override`\n  - Support for VSCode extensions.\n  - A worker configuration can be provided to it:\n    - Then, the webworker extension host will be available, allowing to run extensions in a worker which runs in an iframe\n- **Files**: `@codingame/monaco-vscode-files-service-override`\n  - It adds the overlay filesystem for `file://` files, but also adds the support for lazy loaded extension files. It adds separate memory user files (e.g. config, keybindings), cache files and log files\n  - It supports adding overlay filesystems for `file://` files\n- **QuickAccess**: `@codingame/monaco-vscode-quickaccess-service-override`\n  - Enables the quickaccess menu in the editor (press F1 or ctrl+shift+p)\n- **Search**: `@codingame/monaco-vscode-search-service-override`\n  - Provides workspace search functionality for both Command Palette file search (Ctrl+P) and Search panel (Ctrl+Shift+F)\n  - Enables searching through files and text content within your workspace\n\nHowever, most of the services are separated into different modules, so they can be imported as required. You can find a full list of services in the [corresponding wiki page](https://github.com/CodinGame/monaco-vscode-api/wiki/List-of-service-overrides).\n\n### Default vscode extensions\n\nVSCode uses a bunch of default extensions. Most of them are used to load the default languages and grammars (see \u003chttps://github.com/microsoft/vscode/tree/main/extensions\u003e).\n\nThis library bundles and publishes them as separate packages, which allows to use the ones you want. To use an extension, just install the corresponding package and import it in the beginning of the file:\n\n```typescript\nimport '@codingame/monaco-vscode-javascript-default-extension'\nimport '@codingame/monaco-vscode-json-default-extension'\n...\n```\n\nHere is an example of usage of default VSCode theme extension with theme service override:\n\n```typescript\n// importing default VSCode theme extension\nimport '@codingame/monaco-vscode-theme-defaults-default-extension'\n\n// default monaco-editor imports\nimport * as monaco from 'monaco-editor'\nimport editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'\n\n// utilities to override Monaco services\nimport { initialize } from '@codingame/monaco-vscode-api'\nimport getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override'\n\nwindow.MonacoEnvironment = {\n  getWorker: function (_moduleId, _label) {\n    return new editorWorker()\n  }\n}\n\n// overriding Monaco service with VSCode\nawait initialize({\n  ...getThemeServiceOverride()\n})\n\n// creating an editor with VSCode theme\nmonaco.editor.create(document.getElementById('editor')!, {\n  value: 'Editor with VSCode Theme Support'\n})\n```\n\nSee [the full list of ported default extensions](https://www.npmjs.com/search?q=%40codingame%2Fmonaco-vscode-*-default-extension)\n\n### Loading vsix file\n\nVSCode extensions are bundled as vsix files.\nThis library publishes a rollup plugin (vite-compatible) that allows to load a vsix file.\n\n- rollup/vite config:\n\n```typescript\nimport vsixPlugin from '@codingame/monaco-vscode-rollup-vsix-plugin'\n...\nplugins: [\n  ...,\n  vsixPlugin()\n]\n```\n\n- code:\n\n```typescript\nimport './extension.vsix'\n```\n\n### Localization\n\nThis library also offers the possibility to localize vscode and the extensions in the supported languages. To do so, import one of the following packages before anything else:\n\n- `@codingame/monaco-vscode-language-pack-cs`\n- `@codingame/monaco-vscode-language-pack-de`\n- `@codingame/monaco-vscode-language-pack-es`\n- `@codingame/monaco-vscode-language-pack-fr`\n- `@codingame/monaco-vscode-language-pack-it`\n- `@codingame/monaco-vscode-language-pack-ja`\n- `@codingame/monaco-vscode-language-pack-ko`\n- `@codingame/monaco-vscode-language-pack-pl`\n- `@codingame/monaco-vscode-language-pack-pt-br`\n- `@codingame/monaco-vscode-language-pack-qps-ploc`\n- `@codingame/monaco-vscode-language-pack-ru`\n- `@codingame/monaco-vscode-language-pack-tr`\n- `@codingame/monaco-vscode-language-pack-zh-hans`\n- `@codingame/monaco-vscode-language-pack-zh-hant`\n\n⚠️ The language pack should be imported and loaded BEFORE anything else from this library is loaded. Otherwise, some translations would be missing and an error would be displayed in the console. ⚠️\n\n## Model creation\n\nThe official `monaco-editor` package provides a function to create models: `monaco.editor.createModel`.\n\nThis method creates a standalone model that cannot be found or used by any VSCode services.\n\nThe recommended way is to used the `createModelReference` method instead (added on top of the official monaco-editor api) which returns instead a reference to a model.\n\nIt has some pros:\n\n- The model reference can be used by VSCode services, allowing for instance following links between files (ctrl+click)\n- The returned model is bound to a filesystem file, and you have access to methods allowing to control the file lifecycle (saving the file, accessing the dirty state...)\n- It is possible to call the method multiple times on the same file to get multiple references. The model is disposed when there is no reference left\n\nTo work, it needs the file to exist on the virtual filesystem. It can be achieved either by:\n\n- using the `registerFileSystemOverlay` from the files service override, which can be cleaned when not needed anymore (recommended)\n- by using the second argument of the `createModelReference` function, which writes the file content to the virtual filesystem before creating the model\n\nbefore:\n\n```typescript\nimport * as monaco from 'monaco-editor'\nconst model = monaco.editor.createModel(...)\nconst editor = monaco.editor.create({ model, ... })\n\n...\n\nmodel.dispose()\neditor.dispose()\n\n```\n\nafter:\n\n```typescript\nimport * as monaco from 'monaco-editor'\nimport { RegisteredFileSystemProvider, RegisteredMemoryFile, registerFileSystemOverlay } from '@codingame/monaco-vscode-files-service-override'\n\nconst fileUri = monaco.Uri.file(\u003cfile uri\u003e);\n\nconst fileSystemProvider = new RegisteredFileSystemProvider(false)\nfileSystemProvider.registerFile(new RegisteredMemoryFile(fileUri, \u003cfile content\u003e))\nconst overlayDisposable = registerFileSystemOverlay(1, fileSystemProvider)\n\nconst modelRef = await monaco.editor.createModelReference(fileUri)\n\nconst editor = monaco.editor.create({ model: modelRef.object.textEditorModel })\n\n...\n\nawait modelRef.object.save()\n\n...\n\nmodelRef.dispose()\neditor.dispose()\noverlayDisposable.dispose()\n\n```\n\n`createModelReference` return a reference to a model. The value is fetched from the memory filesystem.\nThe reference can then be disposed, the model will only be disposed if there is no remaining references.\n\n## VSCode api usage\n\nTo be able to use the VSCode api directly from your code, you need to import `vscode/localExtensionHost` and wait for the services to be initialized.\n\nYou will then be able to import it as if you were in a VSCode extension:\n\n```typescript\nimport * as vscode from 'vscode'\nimport 'vscode/localExtensionHost'\n\nconst range = new vscode.Range(...)\nvscode.languages.registerCompletionItemProvider(...)\n```\n\nYou can also register a new extension from its manifest:\n\n```typescript\nimport { registerExtension, initialize, ExtensionHostKind } from '@codingame/monaco-vscode-api/extensions'\n\nawait initialize()\n\nconst { registerFileUrl, getApi } = registerExtension({\n  name: 'my-extension',\n  publisher: 'someone',\n  version: '1.0.0',\n  engines: {\n      vscode: '*'\n  },\n  contributes: {\n  }\n}, ExtensionHostKind.LocalProcess)\n\nregisterFileUrl('/file-extension-path.json', new URL('./file-real-path.json', import.meta.url).toString())\n\nconst vscode = await getApi()\n\nvscode.languages.registerCompletionItemProvider(...)\n\n```\n\n### Demo\n\nTry it out on \u003chttps://monaco-vscode-api.netlify.app/\u003e\n\nThere is a demo that showcases the service-override features.\nIt includes:\n\n- Languages\n- VSCode themes\n- Textmate grammars (requires VSCode themes)\n- Notifications/Dialogs\n- Model/Editor services\n- Configuration service, with user configuration editor\n- Keybinding service, with user keybindings editor\n- Debuggers\n- Remote agent\n- and much more\n\nFrom CLI run:\n\n```bash\n# build monaco-vscode-api (the demo use it as a local dependency)\nnpm ci\nnpm run build\n# start demo\ncd demo\nnpm ci\nnpm start\n# OR: for vite debug output\nnpm run start:debug\n```\n\nFor the debug feature, also run:\n\n```bash\nnpm run start:debugServer\n```\n\n⚠️ Building monaco-vscode-api is only supported on Linux or Mac. It you use Windows, have a look at [WSL](https://learn.microsoft.com/windows/wsl/install) ⚠️\n\n#### Remote agent\n\nSee the [VSCode Server](https://github.com/CodinGame/monaco-vscode-api/wiki/How-to-install-and-use-VSCode-server-with-monaco‐vscode‐api) wiki page.\n\n## Shadow dom (⚠️ beta ⚠️)\n\nThe library supports shadow-dom.\n\n⚠️ VSCode itself doesn't support shadow dom, and there are multiple parts that needed to be patched in order for it to work.\n\nThere are multiple benefits of using it:\n\n- Your custom global style won't impact the VSCode workbench style (for instance if you did override the default [box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing))\n- The VSCode styles won't impact other parts of your app\n- You page head won't be polluted with dozen of css files from VSCode\n\n### How to use it\n\nIf the provided container element is a child of a shadow dom element, the styles will be injected in both the main page and the shadow root. That's it.\n\n### Prerequisites\n\nIn order to be able to load the static css files in the shadow dom as well. Your bundler configuration needs to be adapted so that importing css files doesn't load their content in the page head, but instead just returns the file content as default (either as a string or a `CSSStyleSheet`). It can be achieved with most bundlers with some configurations.\n\nNote that the bundler should still resolve referenced assets in the css files, so you can't just use the `raw` loader, or the `assets/source` webpack module type.\n\n#### Webpack\n\nAdd this rule in your configuration:\n\n```typescript\n{\n  test: /node_modules\\/(@codingame\\/monaco-vscode|vscode|monaco-editor).*\\.css$/,\n  use: [\n    {\n      loader: 'css-loader',\n      options: {\n        esModule: false,\n        exportType: 'css-style-sheet', // or 'string', both are working\n        url: true,\n        import: true\n      }\n    }\n  ]\n}\n```\n\nYou should also make sure that no other loader is interfering with it, by either use a `oneOf` or exclusing those files in the other css loaders.\n\n#### Vite\n\nAdd this plugin in your configuration:\n\n```typescript\n{\n  name: 'load-vscode-css-as-string',\n  enforce: 'pre',\n  async resolveId(source, importer, options) {\n    const resolved = (await this.resolve(source, importer, options))!\n    if (\n      resolved.id.match(\n        /node_modules\\/(@codingame\\/monaco-vscode|vscode|monaco-editor).*\\.css$/\n      )\n    ) {\n      return {\n        ...resolved,\n        id: resolved.id + '?inline'\n      }\n    }\n    return undefined\n  }\n}\n```\n\n## Sandbox mode (⚠️ beta ⚠️)\n\nOne issue with VSCode is it's only designed to be initialized once. So the initialization options (workbench options, remote server authority...) can't be updated/reloaded. Also it's not possible to \"unload\" the services.\n\nTo still be able to do it, a possibility is to run all VSCode code inside an iframe instead of in the main page. But then VSCode will render in the iframe only and won't be well integrated in the page.\n\nTo better integrate it, it's also possible to run the code in the iframe, but make the code interact with the main page dom.\n\nThis library supports that mode. To enable that, you should\n\n- have a secondary html entrypoint, that initialize the services\n- load that secondary html in an iframe\n- in the iframe, set `window.vscodeWindow` to the parent window, also initialize the service with a container mounted in that window\n- do not import any monaco-vscode-library from the top window, but you can declare functions on the iframe window to get objects to the top window\n\nTo \"unload\" the workbench, you should:\n\n- remove the iframe element from the top frame\n- remove or empty the workbench container\n- cleanup the elements that VSCode has injected in the page head: `document.querySelectorAll('[data-vscode]').forEach((el) =\u003e el.remove())`\n\n⚠️ `window.vscodeWindow` should be set BEFORE any VSCode code is loaded\n\nNote: it can be used in combination with shadow dom\n\nIt's demonstrated in the demo, by adding `?sandbox` query parameter to the demo url\n\n## Troubleshooting\n\nIf something doesn't work, make sure to check out the [Troubleshooting](https://github.com/CodinGame/monaco-vscode-api/wiki/Troubleshooting) wiki page.\n\n## History\n\nThis project was mainly created to make the implementation of [monaco-languageclient](https://github.com/TypeFox/monaco-languageclient) more robust and maintainable.\n\nmonaco-languageclient uses [vscode-languageclient](https://www.npmjs.com/package/vscode-languageclient) which was built to run inside a VSCode extension. VSCode extensions communicate with the editor via an [API](https://www.npmjs.com/package/@types/vscode) they can import into their code.\n\n[The VSCode api](https://code.visualstudio.com/api/references/vscode-api) exports:\n\n- Some functions to interact with the IDE ([language feature registrations](https://code.visualstudio.com/api/references/vscode-api#languages), [command execution](https://code.visualstudio.com/api/references/vscode-api#commands)...)\n- A lot of utility classes (Range, Position...)\n\nThe first implementations of [monaco-languageclient](https://github.com/TypeFox/monaco-languageclient) were using a fake VSCode api implementation. The vscode-languageclient was hacked so the VSCode\u003c-\u003eprotocol object converters were mainly bypassed, so the fake VSCode api was receiving [Language Server Protocol](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/) objects. Then the objects were transformed using custom transformers into [Monaco](https://www.npmjs.com/package/monaco-editor) objects to communicate with the monaco api.\n\nThis approach has some disadvantages:\n\n- There is a lot of code to transform LSP objects into Monaco objects\n- It's hard to follow the updates of VSCode and the language server protocol\n- It doesn't behave exactly the same as in VSCode\n\nWith this library, it would be possible to plug vscode-languageclient directly on top of monaco, monaco-languageclient still helps to do so by:\n\n- Adding some tweaks to the VSCode LanguageClient (Removing unsupported features...)\n- Providing some examples on how to build an app using it\n- Adding some tools (DisposableCollection)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingame%2Fmonaco-vscode-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingame%2Fmonaco-vscode-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingame%2Fmonaco-vscode-api/lists"}