{"id":13496273,"url":"https://github.com/remcohaszing/monaco-yaml","last_synced_at":"2025-05-14T02:09:46.727Z","repository":{"id":37476322,"uuid":"122921635","full_name":"remcohaszing/monaco-yaml","owner":"remcohaszing","description":"YAML support for Monaco Editor","archived":false,"fork":false,"pushed_at":"2025-05-08T17:23:20.000Z","size":4385,"stargazers_count":298,"open_issues_count":7,"forks_count":76,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-13T13:50:23.841Z","etag":null,"topics":["json-schema","monaco","monaco-editor","yaml"],"latest_commit_sha":null,"homepage":"https://monaco-yaml.js.org","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/remcohaszing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null},"funding":{"github":"remcohaszing"}},"created_at":"2018-02-26T06:08:04.000Z","updated_at":"2025-05-08T17:23:24.000Z","dependencies_parsed_at":"2024-05-10T15:25:13.604Z","dependency_job_id":"60eaf241-e6ad-43d1-b32f-3dc52ee42263","html_url":"https://github.com/remcohaszing/monaco-yaml","commit_stats":{"total_commits":326,"total_committers":28,"mean_commits":"11.642857142857142","dds":"0.36809815950920244","last_synced_commit":"5beb6100a538391effba847f09bca32d99972b8a"},"previous_names":["pengx17/monaco-yaml"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmonaco-yaml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmonaco-yaml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmonaco-yaml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmonaco-yaml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remcohaszing","download_url":"https://codeload.github.com/remcohaszing/monaco-yaml/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254053298,"owners_count":22006717,"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":["json-schema","monaco","monaco-editor","yaml"],"created_at":"2024-07-31T19:01:44.897Z","updated_at":"2025-05-14T02:09:41.712Z","avatar_url":"https://github.com/remcohaszing.png","language":"TypeScript","funding_links":["https://github.com/sponsors/remcohaszing"],"categories":["Editor Components","TypeScript"],"sub_categories":[],"readme":"# Monaco YAML\n\n[![ci workflow](https://github.com/remcohaszing/monaco-yaml/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/monaco-yaml/actions/workflows/ci.yaml)\n[![npm version](https://img.shields.io/npm/v/monaco-yaml)](https://www.npmjs.com/package/monaco-yaml)\n[![npm downloads](https://img.shields.io/npm/dm/monaco-yaml)](https://www.npmjs.com/package/monaco-yaml)\n[![demo](https://img.shields.io/badge/demo-monaco--yaml.js.org-61ffcf.svg)](https://monaco-yaml.js.org)\n[![netlify status](https://api.netlify.com/api/v1/badges/20b08937-99d0-4882-b9a3-d5f09ddd29b7/deploy-status)](https://app.netlify.com/sites/monaco-yaml/deploys)\n\nYAML language plugin for the Monaco Editor. It provides the following features when editing YAML\nfiles:\n\n- Code completion, based on JSON schemas or by looking at similar objects in the same file\n- Hovers, based on JSON schemas\n- Validation: Syntax errors and schema validation\n- Formatting using Prettier\n- Document Symbols\n- Automatically load remote schema files (by enabling DiagnosticsOptions.enableSchemaRequest)\n- Links from JSON references.\n- Links and hover effects from YAML anchors.\n- Code folding.\n\nSchemas can also be provided by configuration. See\n[here](https://github.com/remcohaszing/monaco-yaml/blob/main/index.d.ts) for the API that the plugin\noffers to configure the YAML language support.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Examples](#examples)\n- [API](#api)\n  - [`configureMonacoYaml(monaco, options?)`](#configuremonacoyamlmonaco-options)\n- [FAQ](#faq)\n  - [Does this work with the Monaco UMD bundle?](#does-this-work-with-the-monaco-umd-bundle)\n  - [Does this work with Monaco Editor from a CDN?](#does-this-work-with-monaco-editor-from-a-cdn)\n  - [Does this work with `@monaco-editor/loader` or `@monaco-editor/react`?](#does-this-work-with-monaco-editorloader-or-monaco-editorreact)\n  - [Is the web worker necessary?](#is-the-web-worker-necessary)\n  - [Does it work without a bundler?](#does-it-work-without-a-bundler)\n  - [How do I integrate `monaco-yaml` with a framework? (Angular, React, Vue, etc.)](#how-do-i-integrate-monaco-yaml-with-a-framework-angular-react-vue-etc)\n  - [Does `monaco-yaml` work with `create-react-app`?](#does-monaco-yaml-work-with-create-react-app)\n  - [Why doesn’t it work with Vite?](#why-doesnt-it-work-with-vite)\n  - [Why isn’t `monaco-yaml` working? Official Monaco language extensions do work.](#why-isnt-monaco-yaml-working-official-monaco-language-extensions-do-work)\n  - [Using Monaco webpack loader plugin](#using-monaco-webpack-loader-plugin)\n  - [Why is syntax highlighting not working?](#why-is-syntax-highlighting-not-working)\n  - [Why does it try to download my schema even when I provided one as an object?](#why-does-it-try-to-download-my-schema-even-when-i-provided-one-as-an-object)\n- [Contributing](#contributing)\n- [Credits](#credits)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install monaco-yaml\n```\n\n## Usage\n\nBefore implementing `monaco-yaml`, or even Monaco editor, it’s recommended to learn the\n[basic concepts](https://github.com/microsoft/monaco-editor#concepts) of Monaco editor.\n\nTo configure `monaco-yaml`, call [`configureMonacoYaml`](#configuremonacoyamlmonaco-options).\n\n```typescript\nimport * as monaco from 'monaco-editor'\nimport { configureMonacoYaml } from 'monaco-yaml'\n\nconfigureMonacoYaml(monaco, {\n  enableSchemaRequest: true,\n  schemas: [\n    {\n      // If YAML file is opened matching this glob\n      fileMatch: ['**/.prettierrc.*'],\n      // Then this schema will be downloaded from the internet and used.\n      uri: 'https://json.schemastore.org/prettierrc.json'\n    },\n    {\n      // If YAML file is opened matching this glob\n      fileMatch: ['**/person.yaml'],\n      // The following schema will be applied\n      schema: {\n        type: 'object',\n        properties: {\n          name: {\n            type: 'string',\n            description: 'The person’s display name'\n          },\n          age: {\n            type: 'integer',\n            description: 'How old is the person in years?'\n          },\n          occupation: {\n            enum: ['Delivery person', 'Software engineer', 'Astronaut']\n          }\n        }\n      },\n      // And the URI will be linked to as the source.\n      uri: 'https://github.com/remcohaszing/monaco-yaml#usage'\n    }\n  ]\n})\n\nconst prettierc = monaco.editor.createModel(\n  'singleQuote: true\\nproseWrap: always\\nsemi: yes\\n',\n  undefined,\n  monaco.Uri.parse('file:///.prettierrc.yaml')\n)\n\nmonaco.editor.createModel(\n  'name: John Doe\\nage: 42\\noccupation: Pirate\\n',\n  undefined,\n  monaco.Uri.parse('file:///person.yaml')\n)\n\nmonaco.editor.create(document.getElementById('editor'), {\n  automaticLayout: true,\n  model: prettierc\n})\n```\n\nAlso make sure to register the web worker. When using Webpack 5, this looks like the code below.\nOther bundlers may use a different syntax, but the idea is the same. Languages you don’t used can be\nomitted.\n\n```js\nwindow.MonacoEnvironment = {\n  getWorker(moduleId, label) {\n    switch (label) {\n      case 'editorWorkerService':\n        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url))\n      case 'css':\n      case 'less':\n      case 'scss':\n        return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url))\n      case 'handlebars':\n      case 'html':\n      case 'razor':\n        return new Worker(\n          new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url)\n        )\n      case 'json':\n        return new Worker(\n          new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url)\n        )\n      case 'javascript':\n      case 'typescript':\n        return new Worker(\n          new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url)\n        )\n      case 'yaml':\n        return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url))\n      default:\n        throw new Error(`Unknown label ${label}`)\n    }\n  }\n}\n```\n\n## Examples\n\nA demo is available on [monaco-yaml.js.org](https://monaco-yaml.js.org).\n\nSome usage examples can be found in the\n[examples](https://github.com/remcohaszing/monaco-yaml/tree/main/examples) directory.\n\n## API\n\n`monaco-yaml` has the following exports:\n\n### `configureMonacoYaml(monaco, options?)`\n\nConfigure `monaco-yaml`.\n\n\u003e **Note**: There may only be one configured instance of `monaco-yaml` at a time.\n\n#### Arguments\n\n- `monaco` (`object`): The Monaco editor module. Typically you get this by importing\n  `monaco-editor`. Third party integrations often expose it as the global `monaco` variable instead.\n- `options` (`object`): Options to configure `monaco-yaml`.\n\n#### Options\n\n- `completion` (`boolean`): If set, enable schema based autocompletion. (Default: `true`)\n- `customTags` (`string[]`): A list of custom tags. (Default: `[]`)\n- `enableSchemaRequest` (`boolean`): If set, the schema service will load schema content on-demand.\n  (Default: `false`)\n- `format` (`boolean`): Prettier from the bundle. (Default: `true`)\n- `hover` (`boolean`): If set, enable hover typs based the JSON schema. (Default: `true`)\n- `isKubernetes` (`boolean`): If true, a different diffing algorithm is used to generate error\n  messages. (Default: `false`)\n- `schemas` (`object[]`): A list of known schemas and/or associations of schemas to file names.\n  (Default: `[]`)\n- `validate` (`boolean`): based validation. (Default: `true`)\n- `yamlVersion` (`'1.1' | '1.2'`): The YAML version to use for parsing. (Default: `1,2`)\n\n#### Returns\n\nAn object that can be used to dispose or update `monaco-yaml`.\n\n## FAQ\n\n### Does this work with the Monaco UMD bundle?\n\nYes, starting from version 5.0.0\n\n### Does this work with Monaco Editor from a CDN?\n\nYes, starting from version 5.0.0\n\n### Does this work with `@monaco-editor/loader` or `@monaco-editor/react`?\n\nYes, starting from version 5.0.0\n\n### Is the web worker necessary?\n\nYes. The web worker provides the core functionality of `monaco-yaml`.\n\n### Does it work without a bundler?\n\nNo. `monaco-yaml` uses dependencies from `node_modules`, so they can be deduped and your bundle size\nis decreased. This comes at the cost of not being able to use it without a bundler.\n\n### How do I integrate `monaco-yaml` with a framework? (Angular, React, Vue, etc.)\n\n`monaco-yaml` only uses the Monaco Editor. It’s not tied to a framework, all that’s needed is a DOM\nnode to attach the Monaco Editor to. See the\n[Monaco Editor examples](https://github.com/microsoft/monaco-editor/tree/main/samples) for examples\non how to integrate Monaco Editor in your project, then configure `monaco-yaml` as described above.\n\n### Does `monaco-yaml` work with `create-react-app`?\n\nYes, but you’ll have to eject. See\n[#92 (comment)](https://github.com/remcohaszing/monaco-yaml/issues/92#issuecomment-905836058) for\ndetails.\n\n### Why doesn’t it work with Vite?\n\nSome users have experienced the following error when using Vite:\n\n```\nUncaught (in promise) Error: Unexpected usage\n  at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js)\n  at webWorker.js\n```\n\nAs a workaround, create a file named `yaml.worker.js` in your own project with the following\ncontents:\n\n```js\nimport 'monaco-yaml/yaml.worker.js'\n```\n\nThen in your Monaco environment `getWorker` function, reference this file instead of referencing\n`monaco-yaml/yaml.worker.js` directly:\n\n```js\nimport YamlWorker from './yaml.worker.js?worker'\n\nwindow.MonacoEnvironment = {\n  getWorker(moduleId, label) {\n    switch (label) {\n      // Handle other cases\n      case 'yaml':\n        return new YamlWorker()\n      default:\n        throw new Error(`Unknown label ${label}`)\n    }\n  }\n}\n```\n\n### Why isn’t `monaco-yaml` working? Official Monaco language extensions do work.\n\nThis is most likely due to the fact that `monaco-yaml` is using a different instance of the\n`monaco-editor` package than you are. This is something you’ll want to avoid regardless of\n`monaco-editor`, because it means your bundle is significantly larger than it needs to be. This is\nlikely caused by one of the following issues:\n\n- A code splitting misconfiguration\n\n  To solve this, try inspecting your bundle using for example\n  [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). If\n  `monaco-editor` is in there twice, this is the issue. It’s up to you to solve this, as it’s\n  project-specific.\n\n- You’re using a package which imports `monaco-editor` for you, but it’s using a different version.\n\n  You can find out why the `monaco-editor` is installed using `npm ls monaco-editor` or\n  `yarn why monaco-editor`. It should exist only once, but it’s ok if it’s deduped.\n\n  You may be able to solve this by deleting your `node_modules` folder and `package-lock.json` or\n  `yarn.lock`, then running `npm install` or `yarn install` respectively.\n\n### Using Monaco webpack loader plugin\n\nIf you’re using\n[monaco webpack plugin](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin), then\ninstead of the above code, you can extend the plugin’s configuration. Extend your\n`webpack.config.js` file with the following:\n\n```js\nimport { MonacoWebpackPlugin } from 'monaco-editor-webpack-plugin'\n\nexport default {\n  // ...the rest of your webpack configuration...\n  plugins: [\n    new MonacoWebpackPlugin({\n      languages: ['yaml'],\n      customLanguages: [\n        {\n          label: 'yaml',\n          entry: 'monaco-yaml',\n          worker: {\n            id: 'monaco-yaml/yamlWorker',\n            entry: 'monaco-yaml/yaml.worker'\n          }\n        }\n      ]\n    })\n  ]\n}\n```\n\nYou can also refer to the\n[example](https://github.com/remcohaszing/monaco-yaml/tree/main/examples/monaco-editor-webpack-plugin)\nof a complete project.\n\n### Why is syntax highlighting not working?\n\nSyntax highlighting is provided by Monaco editor itself, not by `monaco-yaml`. If you use a build\ntool to filter languages or features, make sure to include the `yaml` language. If you import Monaco\neditor from `monaco-editor/esm/vs/editor/editor.api.js` and cherry-pick features manually, make sure\nto also import `monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js`. If you use\n`monaco-editor-core`, make sure to import `monaco-languages/release/esm/yaml/yaml.contribution.js`.\n\n### Why does it try to download my schema even when I provided one as an object?\n\nYou may have provided a schema configured like this:\n\n```Javascript\n{\n  uri: \"http://example.com\",\n  fileMatch: [\"file_name.yml\"],\n  schema: {\n    $schema: \"http://json-schema.org/draft-07/schema#\",\n    $id: \"http://example.com\",\n    title: \"placeholder title\",\n    description: \"placeholder description\",\n    type: \"object\",\n    properties: {\n      name: {\n        description: \"name property description\",\n        type: \"string\",\n      },\n    },\n    required: [\"name\"],\n  },\n}\n```\n\nAnd would be surprised to see the error:\n\n\u003e `Unable to load schema from '\u003chttp://example.com\u003e': Failed to fetch.`\n\nIt happens because plugin uses schema URI not only as the URL to download the schema from, but also\nto determine the schema name. To fix this, change the `uri` parameter to\n`http://example.com/schema-name.json`.\n\n## Contributing\n\nPlease see our [contributing guidelines](CONTRIBUTING.md)\n\n## Credits\n\nOriginally [@kpdecker](https://github.com/kpdecker) forked this repository from\n[`monaco-json`](https://github.com/microsoft/monaco-json) by\n[@microsoft](https://github.com/microsoft) and rewrote it to work with\n[`yaml-language-server`](https://github.com/redhat-developer/yaml-language-server) instead. Later\nthe repository maintenance was taken over by [@pengx17](https://github.com/pengx17). Eventually the\nrepository was tranferred to the account of [@remcohaszing](https://github.com/remcohaszing), who is\ncurrently maintaining this repository with the help of [@fleon](https://github.com/fleon) and\n[@yazaabed](https://github.com/yazaabed).\n\nThe heavy processing is done in\n[`yaml-language-server`](https://github.com/redhat-developer/yaml-language-server), best known for\nbeing the backbone for [`vscode-yaml`](https://github.com/redhat-developer/vscode-yaml). This\nrepository provides a thin layer to add functionality provided by `yaml-language-server` into\n`monaco-editor`.\n\n## License\n\n[MIT](https://github.com/remcohaszing/monaco-yaml/blob/main/LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fmonaco-yaml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremcohaszing%2Fmonaco-yaml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fmonaco-yaml/lists"}