Skip to main content

⚡ Quick Start

Getting started with docusaurus-json-schema-plugin


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

npm install 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


Configuring docusaurus.config.js

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

Configuring website 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"]


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

Suppose you have the following asset defined :

"description":"Represent a street address such as ['1600','Pennsylvania','Avenue','NW']",
"description":"The address number"
"description":"The name of the street"
"description":"The type of street"
"description":"The city quadrant of the address"

Which you can use in your MDX pages as :

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>

Output examples


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