Codemirror extensions that add on @codemirror/lang-json's and codemirror-json5's grammars to add JSONSchema support!

It's at a very early stage, but usable.

• ✅ lints: validates json against schema
• ✅ hints: provides code completion (no complex types yet)
• ✅ infos: provides hover tooltip

• ✅ lints: validates json against schema
• ✅ infos: provides hover tooltip

You will need to install the relevant language mode for our library to use.

npm install --save @codemirror/lang-json codemirror-json-schema 

import { json } from "@codemirror/lang-json"; import { jsonSchemaLinting, jsonSchemaHover } from "codemirror-json-schema"; const schema = { type: "object", properties: { example: { type: "boolean", }, }, }; const state = EditorState.create({ doc: `{ "example": true }`, extensions: [ json(), linter(jsonParseLinter()), linter(jsonSchemaLinter(schema)), jsonLanguage.data.of({ autocomplete: jsonCompletion(schema), }), hoverTooltip(jsonSchemaHover(schema)), ]; })

npm install --save codemirror-json codemirror-json-schema json5 

import { json5 } from "codemirror-json5"; import { jsonSchemaLinting, jsonSchemaHover, } from "codemirror-json-schema/json5"; const schema = { type: "object", properties: { example: { type: "boolean", }, }, }; const json5State = EditorState.create({ doc: `{ example: true }`, extensions: [ json5(), linter(json5ParseLinter()), linter(json5SchemaLinter(schema)), hoverTooltip(json5SchemaHover(schema)), ], });

You can start with the deployed example to see a more comprehensive setup.

For more information, see the API Docs

• only linting & hover is available for oneOf, anyOf, allOf and other schema combination methods
• it only works with one json schema instance at a time, and doesn't yet fetch remote schemas. schema service coming soon!
• currently only tested with standard schemas using json4 spec. results may vary
• doesn't provide insert text on completion yet
• currently you can override the rendering of a hover. we plan to add the same for validation errors and autocomplete

monaco-json and monaco-yaml both provide these features, and I want the nascent codemirror 6 to have them as well!

also, json5 is slowly growing in usage, and it needs full language support!

• working GeoJSON spec linter & completion
• working variables json mode for cm6-graphql, ala monaco-graphql
• json5 + json4 json schema features for all!