{"id":22125986,"url":"https://github.com/uwu/simple-monaco","last_synced_at":"2025-06-26T17:32:31.166Z","repository":{"id":51539615,"uuid":"520475724","full_name":"uwu/simple-monaco","owner":"uwu","description":"Monaco as easy to use UI components","archived":false,"fork":false,"pushed_at":"2024-01-26T22:14:25.000Z","size":208,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-08T20:59:33.131Z","etag":null,"topics":["code-editor","monaco","react","solid","svelte","vscode","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uwu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2022-08-02T11:46:24.000Z","updated_at":"2025-02-26T22:10:47.000Z","dependencies_parsed_at":"2024-11-15T20:30:14.270Z","dependency_job_id":"e95353bc-e90a-440c-bc83-9878409d3cb9","html_url":"https://github.com/uwu/simple-monaco","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"028713d5a7f094689cc900cdba10ad13c566d385"},"previous_names":["uwu/monaco-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/uwu/simple-monaco","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uwu%2Fsimple-monaco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uwu%2Fsimple-monaco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uwu%2Fsimple-monaco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uwu%2Fsimple-monaco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uwu","download_url":"https://codeload.github.com/uwu/simple-monaco/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uwu%2Fsimple-monaco/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262113478,"owners_count":23261035,"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":["code-editor","monaco","react","solid","svelte","vscode","vue"],"created_at":"2024-12-01T16:49:37.814Z","updated_at":"2025-06-26T17:32:31.130Z","avatar_url":"https://github.com/uwu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# uwu simple-monaco components\n\nThese are components that wrap Microsoft's great Monaco editor (from vscode!)\nfor the primary web UI frameworks, with a unified API.\n\nScroll down for generic docs, all props are reactive, comes with typescript defs/source when applicable.\n\n## Packages\n\n| pkg    | src                                                                                 | npm                                                     |\n| ------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------- |\n| react  | [packages/react](https://github.com/uwu/simple-monaco/tree/master/packages/react)   | [@uwu/monaco-react](https://npm.im/@uwu/monaco-react)   |\n| vue    | [packages/vue](https://github.com/uwu/simple-monaco/tree/master/packages/vue)       | [@uwu/monaco-vue](https://npm.im/@uwu/monaco-vue)       |\n| svelte | [packages/svelte](https://github.com/uwu/simple-monaco/tree/master/packages/svelte) | [@uwu/monaco-svelte](https://npm.im/@uwu/monaco-svelte) |\n| solid  | [packages/solid](https://github.com/uwu/simple-monaco/tree/master/packages/solid)   | [@uwu/monaco-solid](https://npm.im/@uwu/monaco-solid)   |\n| voby   | [packages/voby](https://github.com/uwu/simple-monaco/tree/master/packages/voby)     | [@uwu/monaco-voby](https://npm.im/@uwu/monaco-voby)     |\n\n## Important notes\n\nYou may use any theme from [_here_](https://github.com/brijeshb42/monaco-themes/tree/master/themes) by name.\n\nYou can use monaco from an npm package by passing it as `noCDN`.\nThis will only do anything on the first render of any `\u003cMonaco\u003e`, and will apply to all later uses of the component.\n\nIf you do not do this, monaco will just be loaded from jsDelivr.\n\nTo learn how the loading process works more in depth, please check [the docs for\n`@uwu/simple-monaco-core`](https://github.com/uwu/simple-monaco/tree/master/packages/simple-monaco-core).\n\n## API\n\nA UI component for the relevant framework is default exported. It does not take children and has the following props:\n\n### value (REQUIRED)\n\nThe current text value of the editor.\n\n| framework | type                 | notes                  |\n| --------- | -------------------- | ---------------------- |\n| react     | `string`             |                        |\n| vue       | N/A                  | use `v-model`          |\n| svelte    | `Writable\u003cstring\u003e`   | must be a svelte store |\n| solid     | `string`             |                        |\n| voby      | `Observable\u003cstring\u003e` |                        |\n\n### valOut\n\nThe setter of the state/signal.\n\n| framework | type               | notes                    |\n| --------- | ------------------ | ------------------------ |\n| react     | `(string) =\u003e void` |                          |\n| vue       | N/A                | use `v-model`            |\n| svelte    | N/A                | use the value store      |\n| solid     | `Setter\u003cstring\u003e`   |                          |\n| voby      | N/A                | Observable\u003c\u003e is writable |\n\n### lang (REQUIRED)\n\nThe programming language to use. Influences highlighting, completion, etc.\n\n| type     | notes |\n| -------- | ----- |\n| `string` |       |\n\n### theme\n\nThe colour theme to use to highlight code.\nAs mentioned before, a theme from [here](https://github.com/brijeshb42/monaco-themes/tree/master/themes) by name, a theme object and name,\nor url to a theme.\n\nAll instances must share the same theme for weird Monaco reasons.\n\n| type                                       | notes |\n| ------------------------------------------ | ----- |\n| `string \\| [string, IStandaloneThemeData]` |       |\n\n### readonly\n\nWhen set, the user cannot edit the contents of the editor. Setting value works fine.\n\n| type      | notes |\n| --------- | ----- |\n| `boolean` |       |\n\n### height\n\nSets the height of the monaco editor.\n\n| type     | notes             |\n| -------- | ----------------- |\n| `string` | defaults to 30rem |\n\n### width\n\nSets the height of the monaco editor.\n\n| type     | notes             |\n| -------- | ----------------- |\n| `string` | defaults to 20rem |\n\n### otherCfg\n\nOther configuration options to pass to the monaco editor (eg autolayout)\n\n| type            | notes          |\n| --------------- | -------------- |\n| `core.OtherCfg` | defaults to {} |\n\n### noCDN\n\nPass an instance of the monaco library instead of loading it from jsDelivr.\n\n| type     | notes |\n| -------- | ----- |\n| `Monaco` |       |\n\n### filename\n\nThis is used to set the \"URL\" of the model open in the editor.\nMostly this isnt necessary, but is sometimes necessary for things such as enabling\nJSX support in the typescript language via extension.\nThis doesn't show in the UI as monaco does not have the vscode tabbar.\n\nThis will be constructed into a URL for you of the form `inmemory://sm-model/...`.\n(The default URLs used by monaco are `inmemory://model/1`, then 2, 3, etc).\n\n| type     | notes |\n| -------- | ----- |\n| `string` |       |\n\n### editorRef\n\nAn escape hatch that gives you out the editor instance used by the component.\nThis is to keep this _simple_ library from becoming too big as if you need this your case is likely\nnot simple.\n\nWith this you are god.\n\n| framework | type                                                             | notes                                                           |\n| --------- | ---------------------------------------------------------------- | --------------------------------------------------------------- |\n| react     | `((core.WrappedEditor) =\u003e void) \\| Ref\u003ccore.WrappedEditor\u003e`      |                                                                 |\n| vue       | N/A                                                              | use the `editorRef` event.                                      |\n| svelte    | `((core.WrappedEditor) =\u003e void) \\| Writable\u003ccore.WrappedEditor\u003e` | must be a svelte store                                          |\n| solid     | `((core.WrappedEditor) =\u003e void)`                                 |                                                                 |\n| voby      | `((core.WrappedEditor) =\u003e void)`                                 | ObservableLike\u003cWrappedEditor\u003e is compatible with this signature |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuwu%2Fsimple-monaco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuwu%2Fsimple-monaco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuwu%2Fsimple-monaco/lists"}