Skip to main content

✏️ @theme/JSONSchemaEditor

Configuration​

PropertyTypeRequired ?Note
schemaJSONSchema | JSONSchema[]MandatoryJSON Schema(s) supported by monaco-editor, which powers VS Code - Currently, it supports all draft versions from Draft 4 to JSON Schema Draft 2020-12
diagnosticsOptionsMonacoEditorPropsOptionalOptions for Monaco Editor diagnostic (useful for instance to enable enableSchemaRequest)
....MonacoEditorPropsOptionalProperties of react-monaco-editor

Examples​

import React from "react"
import Layout from "@theme/Layout"
import JSONSchemaEditor from "@theme/JSONSchemaEditor"
// import { useColorMode } from "@docusaurus/theme-common"

export default function ExamplePage(): JSX.Element {

  // You are free to fetch your schema in your own way (load local file, fetch, ...) :)
  const mySchema = {
    "type": "object",
    "properties": {
      "builtin": {
        "type": "number"
      }
    },
    "patternProperties": {
      "^S_": {
        "type": "string"
      },
      "^I_": {
        "type": "integer"
      }
    },
    "additionalProperties": {
      "type": "string"
    }
  }

  // https://docusaurus.io/docs/api/themes/configuration#use-color-mode
  return (
    <Layout
      title={`My super JSON Schema`}
      description="Description will go into a meta tag in <head />"
    >
      {/* You can "useColorMode" if you want to take into account current Docusaurus color */}
      <JSONSchemaEditor schema={mySchema} theme={"vs-dark"} />
    </Layout>
  )
}