{"id":13417288,"url":"https://github.com/vdesjs/vite-plugin-monaco-editor","last_synced_at":"2025-04-12T22:25:09.383Z","repository":{"id":37807829,"uuid":"394285970","full_name":"vdesjs/vite-plugin-monaco-editor","owner":"vdesjs","description":"A vite plugin for the Monaco Editor","archived":false,"fork":false,"pushed_at":"2024-03-22T14:55:35.000Z","size":3666,"stargazers_count":193,"open_issues_count":25,"forks_count":34,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-18T07:02:45.437Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/vdesjs.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}},"created_at":"2021-08-09T12:38:53.000Z","updated_at":"2024-06-18T12:40:55.248Z","dependencies_parsed_at":"2024-01-07T18:04:44.636Z","dependency_job_id":"f839e865-a941-472a-916b-fd5f8788abdc","html_url":"https://github.com/vdesjs/vite-plugin-monaco-editor","commit_stats":{"total_commits":48,"total_committers":11,"mean_commits":4.363636363636363,"dds":"0.29166666666666663","last_synced_commit":"85ecb8421448c94bfd291f8422fd4ab9f6dab5c0"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdesjs%2Fvite-plugin-monaco-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdesjs%2Fvite-plugin-monaco-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdesjs%2Fvite-plugin-monaco-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdesjs%2Fvite-plugin-monaco-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vdesjs","download_url":"https://codeload.github.com/vdesjs/vite-plugin-monaco-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248638829,"owners_count":21137713,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-07-30T22:00:34.947Z","updated_at":"2025-04-12T22:25:09.337Z","avatar_url":"https://github.com/vdesjs.png","language":"JavaScript","funding_links":[],"categories":["Plugins","JavaScript"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# Vite Plugin Monaco Editor\n\nA plugin to simplify loading the [Monaco Editor](https://github.com/Microsoft/monaco-editor) with [vite](https://vitejs.dev/).\n\n- It uses Vite specific plugin hooks: configResolved, configureServer, transformIndexHtml.\n- It uses esbuild to bundle worker in the `node_modules/.monaco` directory, via the `server.middlewares` proxy http server for the bundle worker.\n\n## Installing\n\n```ts\n// make sure you have it installed monaco-editor.\n\nyarn add vite-plugin-monaco-editor -D\n\n// or\nnpm install --save-dev vite-plugin-monaco-editor\n```\n\n## Using\n\n- `vite.config.ts`:\n\n```ts\nimport { defineConfig } from 'vite';\nimport monacoEditorPlugin from 'vite-plugin-monaco-editor';\n\nexport default defineConfig({\n  plugins: [monacoEditorPlugin()],\n});\n```\n\n### Import all monaco functions\n\n- `index.ts`:\n\n```ts\nimport * as monaco from 'monaco-editor';\n\nmonaco.editor.create(document.getElementById('container'), {\n  value: 'console.log(\"Hello, world\")',\n  language: 'javascript',\n});\n```\n\n### Import part of monaco functions\n\nThe `import * as monaco from 'monaco-editor'` is import all features and languages of the Monaco Editor. Assume you only need part of the features and languages:\n\n- `customMonaco.ts`\n\n```ts\nimport 'monaco-editor/esm/vs/editor/editor.all.js';\nimport 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';\n\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n\nexport { monaco };\n```\n\nThe Complete list of imports: [customMonaco.ts](test/src/mona/customMonaco.ts)\n\n- `index.ts`\n\n```ts\nimport { monaco } from './customMonaco.ts';\nmonaco.editor.create(document.getElementById('container'), {\n  value: 'console.log(\"Hello, world\")',\n  language: 'javascript',\n});\n```\n\n## Options\n\n- `languageWorkers` (`string[]`) - include only a subset of the languageWorkers supported.\n\n  - default value: ['editorWorkerService', 'css', 'html', 'json', 'typescript'].\n  - Assuming only use css worker(editorWorkerService is must include base worker), you can set ['editorWorkerService', 'css']\n\n- `customWorkers` (`IWorkerDefinition[]`) - include your custom worker.\n\n  - default value: []\n  - example value: `[{label: \"graphql\", entry: \"monaco-graphql/esm/graphql.worker\"}]`, The `entry` is relative path in the node_modules Or you can set absolute path.\n\n- `publicPath` (`string`) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. Or you can set CDN e.g `https://unpkg.com/vite-plugin-monaco-editor@1.0.5/cdn`\n\n  - default value: `monacoeditorwork`\n\n- `globalAPI` (`boolean`) - specifies whether the editor API should be exposed through a global `monaco` object or not. This option is applicable to `0.22.0` and newer version of `monaco-editor`. Since `0.22.0`, the ESM version of the monaco editor does no longer define a global `monaco` object unless `global.MonacoEnvironment = { globalAPI: true }` is set ([change log](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0220-29012021)).\n  - default value: `false`.\n- `customDistPath` (`(root: string, buildOutDir: string, base: string) =\u003e string`) - Custom callback returns the worker path\n- `forceBuildCDN` (`boolean`) - If you use CDN, the build is skipped by default. Set to true if you want to generate woker\n  - default value: `false`\n\nSome languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker:\n\n| Language   | Instantiator |\n| ---------- | ------------ |\n| javascript | typescript   |\n| handlebars | html         |\n| scss, less | css          |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvdesjs%2Fvite-plugin-monaco-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvdesjs%2Fvite-plugin-monaco-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvdesjs%2Fvite-plugin-monaco-editor/lists"}