{"id":32411600,"url":"https://github.com/jsonnext/codemirror-json-schema","last_synced_at":"2025-10-25T14:18:43.954Z","repository":{"id":181613163,"uuid":"664601107","full_name":"jsonnext/codemirror-json-schema","owner":"jsonnext","description":"A JSONSchema enabled mode for codemirror 6, for json4 and json5, inspired by monaco-json","archived":false,"fork":false,"pushed_at":"2025-04-21T12:59:17.000Z","size":456,"stargazers_count":99,"open_issues_count":24,"forks_count":25,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-16T01:50:15.848Z","etag":null,"topics":["codemirror-mode","codemirror6","json","json-schema","json5"],"latest_commit_sha":null,"homepage":"https://codemirror-json-schema.netlify.app","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/jsonnext.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2023-07-10T10:39:50.000Z","updated_at":"2025-10-11T11:50:08.000Z","dependencies_parsed_at":"2023-07-19T10:15:34.068Z","dependency_job_id":"e6b57aca-eea5-439b-9388-c40fd9d184fa","html_url":"https://github.com/jsonnext/codemirror-json-schema","commit_stats":null,"previous_names":["acao/cm6-language-json-schema","acao/cm6-json-schema","acao/codemirror-json-schema"],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/jsonnext/codemirror-json-schema","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonnext%2Fcodemirror-json-schema","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonnext%2Fcodemirror-json-schema/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonnext%2Fcodemirror-json-schema/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonnext%2Fcodemirror-json-schema/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsonnext","download_url":"https://codeload.github.com/jsonnext/codemirror-json-schema/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonnext%2Fcodemirror-json-schema/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280938223,"owners_count":26416905,"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","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["codemirror-mode","codemirror6","json","json-schema","json5"],"created_at":"2025-10-25T14:18:43.092Z","updated_at":"2025-10-25T14:18:43.945Z","avatar_url":"https://github.com/jsonnext.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Codemirror 6 extensions that provide full [JSON Schema](https://json-schema.org/) support for `@codemirror/lang-json` \u0026 `codemirror-json5` language modes\n\n\u003ca href=\"https://npmjs.com/codemirror-json-schema\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dm/codemirror-json-schema?label=npm%20downloads\"\u003e\n\u003c/a\u003e\n\n![screenshot of the examples with json4 and json5 support enabled](./dev/public/example.png)\n\n## Features\n\nThis is now a full-featured library for json schema for `json`, `json5` and `yaml` as cm6 extensions!\n\n- ✅ lint validation messages from json schema\n- ✅ autocompletion with insert text from json schema\n- ✅ hover tooltips\n- ✅ dynamic, per-editor-instance schemas using codemirror `StateField` and linting refresh\n- ✅ markdown rendering for `schema.description` and custom `formatHover` and `formatError` configuration\n\n## Resources\n\n- [Changelog](./CHANGELOG.md)\n- [Comprehensive example](https://github.com/acao/cm6-json-schema/blob/main/dev/index.ts)\n- [API Docs](./docs/)\n\n## Usage\n\nTo give you as much flexibility as possible, everything codemirror related is a peer or optional dependency\n\nBased on whether you want to support json4, json5 or both, you will need to install the relevant language mode for our library to use.\n\n### Breaking Changes:\n\n- 0.7.0 - this version introduces markdown rendering in place of returning html strings, so any usage of `formatHover` and/or `formatError` configuration will be passed to `markdown-it` which doesn't handle html by default.\n- 0.5.0 - this breaking change only impacts those following the \"custom usage\" approach, it _does not_ effect users using the high level, \"bundled\" `jsonSchema()` or `json5Schema()` modes. See the custom usages below to learn how to use the new `stateExtensions` and `handleRefresh` exports.\n\n### json4\n\nwith `auto-install-peers true` or similar:\n\n```\nnpm install --save @codemirror/lang-json codemirror-json-schema\n```\n\nwithout `auto-install-peers true`:\n\n```\nnpm install --save @codemirror/lang-json codemirror-json-schema @codemirror/language @codemirror/lint @codemirror/view @codemirror/state @lezer/common\n```\n\n#### Minimal Usage\n\nThis sets up `@codemirror/lang-json` and our extension for you.\nIf you'd like to have more control over the related configurations, see custom usage below\n\n```ts\nimport { EditorState } from \"@codemirror/state\";\nimport { jsonSchema } from \"codemirror-json-schema\";\n\nconst schema = {\n  type: \"object\",\n  properties: {\n    example: {\n      type: \"boolean\",\n    },\n  },\n};\n\nconst json5State = EditorState.create({\n  doc: \"{ example: true }\",\n  extensions: [jsonSchema(schema)],\n});\n```\n\n#### Custom Usage\n\nThis approach allows you to configure the json mode and parse linter, as well as our linter, hovers, etc more specifically.\n\n```ts\nimport { EditorState } from \"@codemirror/state\";\nimport { linter } from \"@codemirror/lint\";\nimport { hoverTooltip } from \"@codemirror/view\";\nimport { json, jsonParseLinter, jsonLanguage } from \"@codemirror/lang-json\";\n\nimport {\n  jsonSchemaLinter,\n  jsonSchemaHover,\n  jsonCompletion,\n  stateExtensions,\n  handleRefresh\n} from \"codemirror-json-schema\";\n\nconst schema = {\n  type: \"object\",\n  properties: {\n    example: {\n      type: \"boolean\",\n    },\n  },\n};\n\nconst state = EditorState.create({\n  doc: `{ \"example\": true }`,\n  extensions: [\n    json(),\n    linter(jsonParseLinter(), {\n      // default is 750ms\n      delay: 300\n    }),\n    linter(jsonSchemaLinter(), {\n      needsRefresh: handleRefresh,\n    }),\n    jsonLanguage.data.of({\n      autocomplete: jsonCompletion(),\n    }),\n    hoverTooltip(jsonSchemaHover()),\n    stateExtensions(schema)\n  ];\n})\n```\n\n### json5\n\nwith `auto-install-peers true` or similar:\n\n```\nnpm install --save codemirror-json5 codemirror-json-schema\n```\n\nwithout `auto-install-peers true`:\n\n```\nnpm install --save codemirror-json5 codemirror-json-schema @codemirror/language @codemirror/lint @codemirror/view @codemirror/state @lezer/common\n```\n\n#### Minimal Usage\n\nThis sets up `codemirror-json5` mode for you.\nIf you'd like to have more control over the related configurations, see custom usage below\n\n```ts\nimport { EditorState } from \"@codemirror/state\";\nimport { json5Schema } from \"codemirror-json-schema/json5\";\n\nconst schema = {\n  type: \"object\",\n  properties: {\n    example: {\n      type: \"boolean\",\n    },\n  },\n};\n\nconst json5State = EditorState.create({\n  doc: `{\n    example: true,\n    // json5 is awesome!\n  }`,\n  extensions: [json5Schema(schema)],\n});\n```\n\n#### Custom Usage\n\nThis approach allows you to configure the json5 mode and parse linter, as well as our linter, hovers, etc more specifically.\n\n```ts\nimport { EditorState } from \"@codemirror/state\";\nimport { linter } from \"@codemirror/lint\";\nimport { json5, json5ParseLinter, json5Language } from \"codemirror-json5\";\nimport {\n  json5SchemaLinter,\n  json5SchemaHover,\n  json5Completion,\n} from \"codemirror-json-schema/json5\";\nimport { stateExtensions, handleRefresh } from \"codemirror-json-schema\";\n\nconst schema = {\n  type: \"object\",\n  properties: {\n    example: {\n      type: \"boolean\",\n    },\n  },\n};\n\nconst json5State = EditorState.create({\n  doc: `{\n    example: true,\n    // json5 is awesome!\n  }`,\n  extensions: [\n    json5(),\n    linter(json5ParseLinter(), {\n      // the default linting delay is 750ms\n      delay: 300,\n    }),\n    linter(\n      json5SchemaLinter({\n        needsRefresh: handleRefresh,\n      })\n    ),\n    hoverTooltip(json5SchemaHover()),\n    json5Language.data.of({\n      autocomplete: json5Completion(),\n    }),\n    stateExtensions(schema),\n  ],\n});\n```\n\n### Dynamic Schema\n\nIf you want to, you can provide schema dynamically, in several ways.\nThis works the same for either json or json5, using the underlying codemirror 6 StateFields, via the `updateSchema` method export.\n\nIn this example\n\n- the initial schema state is empty\n- schema is loaded dynamically based on user input\n- the linting refresh will be handled automatically, because it's built into our bundled `jsonSchema()` and `json5Schema()` modes\n\n```ts\nimport { EditorState } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\n\nimport { json5Schema } from \"codemirror-json-schema/json5\";\n\nimport { updateSchema } from \"codemirror-json-schema\";\n\nconst json5State = EditorState.create({\n  doc: `{\n    example: true,\n    // json5 is awesome!\n  }`,\n  // note: you can still provide initial\n  // schema when creating state\n  extensions: [json5Schema()],\n});\n\nconst editor = new EditorView({ state: json5State });\n\nconst schemaSelect = document.getElementById(\"schema-selection\");\n\nschemaSelect!.onchange = async (e) =\u003e {\n  const val = e.target!.value!;\n  if (!val) {\n    return;\n  }\n  // parse the remote schema spec to json\n  const data = await (\n    await fetch(`https://json.schemastore.org/${val}`)\n  ).json();\n  // this will update the schema state field, in an editor specific way\n  updateSchema(editor, data);\n};\n```\n\nif you are using the \"custom path\" with this approach, you will need to configure linting refresh as well:\n\n```ts\nimport { linter } from \"@codemirror/lint\";\nimport { json5SchemaLinter } from \"codemirror-json-schema/json5\";\nimport { handleRefresh } from \"codemirror-json-schema\";\n\nconst state = EditorState.create({\n  // ...\n  extensions: [\n    linter(json5SchemaLinter(), {\n      needsRefresh: handleRefresh,\n    })\n  ];\n}\n```\n\n## Current Constraints:\n\n- currently only tested with standard schemas using json4 spec. results may vary\n- doesn't place cursor inside known insert text yet\n- currently you can only override the texts and rendering of a hover. we plan to add the same for validation errors and autocomplete\n\n## Inspiration\n\n`monaco-json` and `monaco-yaml` both provide json schema features for json, cson and yaml, and we want the nascent codemirror 6 to have them as well!\n\nAlso, json5 is slowly growing in usage, and it needs full language support for the browser!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsonnext%2Fcodemirror-json-schema","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsonnext%2Fcodemirror-json-schema","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsonnext%2Fcodemirror-json-schema/lists"}