⚡ Quick Start

Getting started with docusaurus-json-schema-plugin

Installation

Install docusaurus-json-schema-plugin using your desired package manager :

npm
Yarn
pnpm

npm install docusaurus-json-schema-plugin

yarn add docusaurus-json-schema-plugin

pnpm add docusaurus-json-schema-plugin

NPM only

When installing with npm, add this to the previous command : --prefer-dedupe

Why --prefer-dedupe ? Because of Invalid Hook Call Warning common issue in projets

Configuration

Configuring `docusaurus.config.js`

docusaurus.config.js
{
   // Allows use of @theme/JSONSchemaEditor or @theme/JSONSchemaViewer
   themes: ["docusaurus-json-schema-plugin"],
}

Configuring website `tsconfig.json`

tsconfig.json
{
  "extends": "@tsconfig/docusaurus/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "resolveJsonModule": true,
    // Extending "@tsconfig/docusaurus/tsconfig.json".types with "docusaurus-json-schema-plugin"
    "types": ["node", "@docusaurus/module-type-aliases", "@docusaurus/theme-classic", "docusaurus-json-schema-plugin"]
  }
}

Usage

You are free to fetch your JSON Schema the way you want

From a static asset
From the web
From ...

Suppose you have the following asset defined :

/static/schemas/mySuperSchema.json
{
   "type":"array",
   "description":"Represent a street address such as ['1600','Pennsylvania','Avenue','NW']",
   "items":false,
   "prefixItems":[
      {
         "type":"number",
         "description":"The address number"
      },
      {
         "type":"string",
         "description":"The name of the street"
      },
      {
         "enum":[
            "Street",
            "Avenue",
            "Boulevard"
         ],
         "description":"The type of street"
      },
      {
         "enum":[
            "NW",
            "NE",
            "SW",
            "SE"
         ],
         "description":"The city quadrant of the address"
      }
   ]
}

Which you can use in your MDX pages as :

/docs/example.mdx
import CodeBlock from '@theme/CodeBlock';
import Schema from "@site/static/schemas/mySuperSchema.json";
import JSONSchemaViewer from "@theme/JSONSchemaViewer";

# My super Schema 

<JSONSchemaViewer schema={ Schema } />

# Source :

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

Suppose your specifications are available somewhere ( Github Gists / Bitbucket Snippets / ... )

/src/pages/API.tsx
import React from "react"
import Layout from "@theme/Layout"
import JSONSchemaViewer from "@theme/JSONSchemaViewer"

export default function ExamplePage(): JSX.Element {
    const [schema, setSchema] = React.useState(undefined as undefined | Error | unknown);

    React.useEffect( () => {
        fetch(
            // TODO Your link here
            "https://gist.githubusercontent.com/jy95/...",
            {
                headers: {
                    'Accept': 'application/json',
                }
            }
        )
            .then((response) => response.json())
            .then((data) => setSchema(data))
            .catch( (err) => setSchema(err) )
    }, [schema])

    return (
        <Layout
            title={`My super JSON Schema`}
            description="Description will go into a meta tag in <head />"
        >
            {schema === undefined && <div>Loading ...</div>}
            {schema !== undefined && schema instanceof Error && <div>Houston we have a problem : {schema.message}</div>}
            {schema !== undefined && !(schema instanceof Error) && <JSONSchemaViewer schema={schema} />}
        </Layout>
    )
}

Which you can see by access related page (e.g. /API in that case )

With the two previous From sections, you get the point that there are unlimited possibilities :

JSON Schema directly defined in the code
NPM packages that exports JSON Schema directly
...

Output examples

tip

We have many examples available on documentation . Check them to see lib in action 😉

Installation​

Configuration​

Configuring docusaurus.config.js​

Configuring website tsconfig.json​

Usage​

Output examples​