{"id":28395054,"url":"https://github.com/kachurun/monaco-esm","last_synced_at":"2025-06-27T01:31:15.973Z","repository":{"id":294317235,"uuid":"985533918","full_name":"kachurun/monaco-esm","owner":"kachurun","description":"Native ES module build of Monaco Editor with bundled workers and styles. No AMD, no config — just import and go.","archived":false,"fork":false,"pushed_at":"2025-06-16T14:39:19.000Z","size":5034,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-16T15:40:53.390Z","etag":null,"topics":["flexbe","monaco","monaco-editor","open-source"],"latest_commit_sha":null,"homepage":"https://flexbe.ai/","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/kachurun.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}},"created_at":"2025-05-18T01:09:14.000Z","updated_at":"2025-06-16T14:39:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"79892e0a-ad3a-4597-a053-5c1f3903627b","html_url":"https://github.com/kachurun/monaco-esm","commit_stats":null,"previous_names":["kachurun/monaco-esm"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kachurun/monaco-esm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kachurun%2Fmonaco-esm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kachurun%2Fmonaco-esm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kachurun%2Fmonaco-esm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kachurun%2Fmonaco-esm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kachurun","download_url":"https://codeload.github.com/kachurun/monaco-esm/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kachurun%2Fmonaco-esm/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262172364,"owners_count":23269993,"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":["flexbe","monaco","monaco-editor","open-source"],"created_at":"2025-05-31T19:11:34.294Z","updated_at":"2025-06-27T01:31:15.950Z","avatar_url":"https://github.com/kachurun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# monaco-esm\n\nMade with ❤️ by [flexbe.ai](https://flexbe.ai/) team\n\n[![monthly downloads](https://img.shields.io/npm/dm/monaco-esm)](https://www.npmjs.com/package/monaco-esm)\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n[![npm version](https://img.shields.io/npm/v/monaco-esm.svg?style=flat)](https://www.npmjs.com/package/monaco-esm)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/kachurun/monaco-esm/pulls)\n\n\u003e A native ES module build of Monaco Editor — no bundlers, no AMD, no RequireJS. Just import and start coding.\n\nCurrent Monaco version: \u003c!-- monaco-editor-version --\u003e`monaco-editor@^0.52.2`\u003c!-- /monaco-editor-version --\u003e\n\n---\n\n## Why this exists\n\nMonaco Editor powers VS Code — but using it outside of that context is a headache. By default, it's distributed as an AMD module and requires `require.js` to load. Even community tools like `@monaco-editor/loader` rely on dynamic CDN scripts and require additional setup for workers and styles.\n\nThis package provides a modern ESM-friendly build of Monaco Editor that can be used directly in the browser or in any bundler without dealing with `require.js`, manual worker registration, or separate CSS files.\n\n---\n\n## What it does\n\n- ✅ Native ES module build of Monaco Editor\n- ✅ Bundles all workers and CSS using `esbuild`\n- ✅ No external loader or config required\n- ✅ Works in modern browsers and with any bundler\n- ✅ Exports full Monaco API and TypeScript types\n\n---\n\n## Install\n\n```bash\nnpm install monaco-esm\n```\n\n---\n\n## Usage\n\n### With a bundler (Vite, Webpack, Rollup, etc.)\n\n```ts\nimport { monaco, loadCss } from 'monaco-esm';\n\nloadCss(); // Inject Monaco Editor styles into the page\n\nmonaco.editor.create(document.getElementById('container'), {\n  value: 'console.log(\"Hello, world!\");',\n  language: 'javascript'\n});\n```\n\n---\n\n### In the browser (no bundler)\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { monaco, loadCss } from 'https://esm.sh/monaco-esm';\n\n  loadCss();\n\n  monaco.editor.create(document.getElementById('container'), {\n    value: 'function hello(name = \"world\") {\\n  console.log(`Hello ${name}!`);\\n}',\n    language: 'javascript'\n  });\n\u003c/script\u003e\n```\n\n👉 [Live Example on CodeSandbox](https://codesandbox.io/p/sandbox/damp-hooks-7xcp4q)\n\n---\n\n## Why not use `@monaco-editor/loader`?\n\n`@monaco-editor/loader` solves part of the problem — but it still:\n\n- Loads Monaco via CDN\n- Requires `require.js` (AMD)\n- Needs custom worker setup\n- Doesn't inject styles\n\n`monaco-esm` removes all that friction:\n\n- Native ES module build\n- No CDN or AMD loader\n- Workers included and auto-registered\n- One-liner for CSS injection\n- Cleaner setup and better compatibility\n\n---\n\n## API Overview\n\nThis package exports:\n\n- `monaco`: Full Monaco Editor API\n- `loadCss(styleId?, doc?)`: Injects Monaco's built-in CSS into the document\n- Re-exports all types and APIs from `monaco-editor`\n\n---\n\n## TypeScript Support\n\nYou don't need to install `monaco-editor` separately. All types and APIs are re-exported:\n\n```ts\nimport type { monaco, editor } from 'monaco-esm';\n\nexport type MonacoEditor = typeof monaco;\nexport type MonacoModel = editor.ITextModel;\n```\n\n---\n\n## Entry Points\n\nThis package provides two standard Node-compatible entrypoints:\n\n- `dist/index.mjs` — ESM build (used by modern bundlers and `type: module` projects)\n- `dist/index.cjs` — CommonJS build (for Node.js environments)\n\nBy default, most tools will resolve the correct one automatically. You can also import explicitly if needed:\n\n```ts\n// ESM\nimport { monaco } from 'monaco-esm';\n\n// CommonJS\nconst { monaco } = require('monaco-esm');\n```\n\n---\n\n## Notes\n\n### Electron\n\nThis package works well in Electron. If you're loading workers in a sandboxed context, you may need to configure security policies accordingly.\n\n### Next.js\n\nYou can use `monaco-esm` in Next.js projects, but make sure to call `loadCss()` only on the client side (e.g., inside a `useEffect`).\n\n---\n\n## Advanced: `initMonaco` Customization\n\nThe `initMonaco` method is called automatically when you import this package, so you usually **do not need to call it yourself**. However, you can call it manually to customize Monaco's worker setup and TypeScript language service behavior.\n\n### Why customize?\n\nYou might want to:\n\n- Provide your own `getWorker` method to control how Monaco spawns web workers\n- Specify a `customTSWorkerPath` to load a custom TypeScript worker script (must export a `customTSWorkerFactory`)\n- Directly provide a `customTSWorkerFactory` function to extend or override the TypeScript language service worker\n\n### Usage\n\n```ts\nimport { initMonaco } from 'monaco-esm';\n\n// 1. Provide your own getWorker method\ninitMonaco({\n  getWorker: (workerId, label) =\u003e {\n    // Return a custom Worker instance\n    if (label === 'my-custom-language') {\n      return new Worker(...);\n    }\n    // ...handle other labels\n  },\n});\n\n// 2. Specify a custom TypeScript worker path\n//    This must set a `self.customTSWorkerFactory` function\ninitMonaco({\n  customTSWorkerPath: '/my-custom-ts-worker.js',\n});\n\n// 3. Extend the TypeScript language service with a custom factory\ninitMonaco({\n  // NOTE: This function will be stringified and passed to the worker, so you can't use closures here\n  customTSWorkerFactory: (TSWorkerClass, tsc, libs) =\u003e {\n    class CustomTSWorker extends TSWorkerClass {\n      constructor(ctx, createData) {\n        super(ctx, createData);\n        // Your custom logic here\n      }\n    }\n    return CustomTSWorker;\n  },\n});\n```\n\n- If you use `customTSWorkerFactory`, you can extend Monaco's TypeScript language service worker. See the [original tsWorker implementation](https://raw.githubusercontent.com/microsoft/monaco-editor/refs/heads/main/src/language/typescript/tsWorker.ts) for what you can override or extend.\n- If you use `customTSWorkerPath`, the file must assign a `customTSWorkerFactory` function to `self`.\n\n**Note:** These options are advanced and only needed for deep customization. For most users, the default setup is sufficient.\n\n---\n\n## License\n\nMIT — see [LICENSE](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkachurun%2Fmonaco-esm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkachurun%2Fmonaco-esm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkachurun%2Fmonaco-esm/lists"}