🔎 @theme/JSONSchemaViewer

Configuration

Property	Type	Required ?	Note
schema	JSONSchema	Mandatory	JSON Schema Draft-07 / Draft 2019-09 / Draft 2020-12
resolverOptions	IResolveOpts	Optional	To resolve your $ref (by default, only inline references will be dereferenced).
viewerOptions	JSVOptions	Optional	Options for the viewer itself.
className	string	Optional	To customize the styles of the viewer, to override docusaurus styles on a specific page

Types

// Either Draft-07 / Draft 2019-09 / Draft 2020-12
type JSONSchema = unknown

type IResolveOpts = {
    // "IResolveOpts" options from @stoplightio/json-ref-resolver
    // More info on https://github.com/stoplightio/json-ref-resolver
    // https://github.com/stoplightio/json-ref-resolver/blob/master/src/types.ts
}

type JSVOptions = {
   /**
   * Should we display "examples" ?
   * @default false
   */
    showExamples?: boolean
    /**
     * To overwrite the order to display qualifier messages
     * @default ["nullable","deprecated","readOnly","writeOnly","enum","stringLength","objectProperties","no-extra-properties","arrayItems","arrayContains","no-extra-items","number-range","pattern","multipleOf","uniqueItems","contentEncoding","contentMediaType","contentSchema","default","const","examples"]
     */
    qualifierMessagesOrder?: CheckKey[]
    /**
     * To overwrite the printout of "description"
     * By default, print out as provided
     * @default undefined
     */
    DescriptionComponent?: (params: { description: string }) => JSX.Element
    /**
     * To overwrite the printout of "examples", "default", "const", and "enum"
     * By default, print out as provided
     * @default undefined
     */
    ValueComponent?: (params: { value: unknown; schema: JSONSchema }) => JSX.Element
    /**
     * To overwrite the default handling of unresolved $refs
     * By default, print out as provided
     * @default undefined
     */
    UnresolvedRefsComponent?: (params: { schema: JSONSchema }) => JSX.Element
}

type CheckKey =
  | "nullable"
  | "deprecated"
  | "readOnly"
  | "writeOnly"
  | "enum"
// minLength / maxLength
  | "stringLength"
// minProperties / maxProperties
  | "objectProperties"
  | "no-extra-properties"
// minItems / maxItems
  | "arrayItems"
// minContains / maxContains
  | "arrayContains"
  | "no-extra-items"
// minimum / exclusiveMinimum / maximum / exclusiveMaximum
  | "number-range"
  | "pattern"
  | "multipleOf"
  | "uniqueItems"
  | "default"
  | "const"
  | "examples"
  | "contentMediaType"
  | "contentEncoding"
  | "contentSchema"
// For unsolved recursive refs ($ref, $dynamicRef, ...)
  | "unsolvedRefs"

Examples

import React from "react"
import Layout from "@theme/Layout"
import JSONSchemaViewer from "@theme/JSONSchemaViewer"

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"
        }
    }

    return (
        <Layout
            title={`My super JSON Schema`}
            description="Description will go into a meta tag in <head />"
        >
            <JSONSchemaViewer schema={mySchema} />
        </Layout>
    )
}

import CodeBlock from '@theme/CodeBlock';
// To fetch a JSON file from your static folder
import Schema from "@site/static/schemas/examples/array/tuples.json";
import JSONSchemaViewer from "@theme/JSONSchemaViewer";

# Tuples

Viewer :

<JSONSchemaViewer schema={ Schema  } />

Source :

<CodeBlock language="json-schema">{JSON.stringify(Schema, null, 2)}</CodeBlock>

Configuration​

Types​

Examples​

Configuration

Types

Examples