codemirror-json-schema

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

Features

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

json4

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

json5

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

Usage

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

json4

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)),
  ];
})

json5

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)),
  ],
});

Demo

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

API Docs

For more information, see the API Docs

Current Constraints:

• 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

Inspiration

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!

Our Goals

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