You can import model definitions from your API schema and render them in your Docusaurus Docs. You'll need to create an .mdx file and import the React Component. Read more here about MDX in Docusaurus.

Import Schema Model in Docs

The pointer prop is passed on to Redoc.

import ApiSchema from '@theme/ApiSchema';

<ApiSchema pointer="#/components/schemas/Pet" />;

Results

id	integer <int64> Pet ID Find more info here
	object Categories this pet belongs to
name required	string The name given to a pet
photoUrls required	Array of strings <url> <= 20 items [ items <url > ] The list of URL to a cute photos featuring pet
friend	object Recursive
	Array of objects (Tag) non-empty Tags attached to the pet
status	string Enum: "available" "pending" "sold" Pet status in the store
petType	string Type of a pet catdogbeecat
huntingSkill required	string Default: "lazy" Enum: "clueless" "lazy" "adventurous" "aggressive" The measured skill for hunting

Example

catdogbeecat

{

• "id": 0,
• "category": {

  • "id": 0,
  • "name": "string",
  • "sub": {

    • "prop1": "string"

    }

  },
• "name": "Guru",
• "photoUrls": [

  • "string"

  ],
• "friend": { },
• "tags": [

  • {

    • "id": 0,
    • "name": "string"

    }

  ],
• "status": "available",
• "petType": "cat",
• "huntingSkill": "adventurous"

}

Import Schema Model (with example) in Docs

import ApiSchema from '@theme/ApiSchema';

<ApiSchema example pointer="#/components/schemas/Pet" />;

Results

id	integer <int64> Pet ID Find more info here
	object Categories this pet belongs to
name required	string The name given to a pet
photoUrls required	Array of strings <url> <= 20 items [ items <url > ] The list of URL to a cute photos featuring pet
friend	object Recursive
	Array of objects (Tag) non-empty Tags attached to the pet
status	string Enum: "available" "pending" "sold" Pet status in the store
petType	string Type of a pet catdogbeecat
huntingSkill required	string Default: "lazy" Enum: "clueless" "lazy" "adventurous" "aggressive" The measured skill for hunting

Example

catdogbeecat

{

• "id": 0,
• "category": {

  • "id": 0,
  • "name": "string",
  • "sub": {

    • "prop1": "string"

    }

  },
• "name": "Guru",
• "photoUrls": [

  • "string"

  ],
• "friend": { },
• "tags": [

  • {

    • "id": 0,
    • "name": "string"

    }

  ],
• "status": "available",
• "petType": "cat",
• "huntingSkill": "adventurous"

}

Importing Schema Model with multiple OpenAPI schemas

If you have multiple APIs loaded with redocusaurus, then it is recommended to add ids to the config so that you can refer them when loading schema models.

docusaurus.config.js

const config = {
  presets: [
    [
      'redocusaurus',
      {
        specs: [
          {
            id: 'using-spec-url',
            specUrl: 'https://redocly.github.io/redoc/openapi.yaml',
            routePath: '/examples/using-spec-url/',
          },
          {
            id: 'using-relative-url',
            specUrl: `${process.env.DEPLOY_BASE_URL || '/'}openapi-page.yaml`,
            routePath: '/examples/using-relative-url/',
          },
        ],
        theme: {
          /**
           * Highlight color for docs
           */
          primaryColor: '#1890ff',
          /**
           * Options to pass to redoc
           * @see https://github.com/redocly/redoc#redoc-options-object
           */
          redocOptions: { hideDownloadButton: false, disableSearch: true },
        },
      },
    ],
    '@docusaurus/preset-classic',
  ],
  title: 'Redocusaurus',
};

import ApiSchema from '@theme/ApiSchema';

<ApiSchema id="using-single-yaml" pointer="#/components/schemas/Pet" />;
<ApiSchema id="using-remote-url" pointer="#/components/schemas/Pet" />;

Results

For ID id="using-single-yaml"

id	integer <int64> Pet ID Find more info here
	object Categories this pet belongs to
name required	string The name given to a pet
photoUrls required	Array of strings <url> <= 20 items [ items <url > ] The list of URL to a cute photos featuring pet
friend	object Recursive
	Array of objects (Tag) non-empty Tags attached to the pet
status	string Enum: "available" "pending" "sold" Pet status in the store
petType	string Type of a pet catdogbeecat
huntingSkill required	string Default: "lazy" Enum: "clueless" "lazy" "adventurous" "aggressive" The measured skill for hunting

Example

catdogbeecat

{

• "id": 0,
• "category": {

  • "id": 0,
  • "name": "string",
  • "sub": {

    • "prop1": "string"

    }

  },
• "name": "Guru",
• "photoUrls": [

  • "string"

  ],
• "friend": { },
• "tags": [

  • {

    • "id": 0,
    • "name": "string"

    }

  ],
• "status": "available",
• "petType": "cat",
• "huntingSkill": "adventurous"

}

For ID id="using-remote-url"

id	integer <int64> Pet ID Find more info here
	object Categories this pet belongs to
name required	string The name given to a pet
photoUrls required	Array of strings <url> <= 20 items [ items <url > ] The list of URL to a cute photos featuring pet
friend	object Recursive
	Array of objects (Tag) non-empty Tags attached to the pet
status	string Enum: "available" "pending" "sold" Pet status in the store
petType	string Type of a pet catdogbeecat
huntingSkill required	string Default: "lazy" Enum: "clueless" "lazy" "adventurous" "aggressive" The measured skill for hunting

Example

catdogbeecat

{

• "id": 0,
• "category": {

  • "id": 0,
  • "name": "string",
  • "sub": {

    • "prop1": "string"

    }

  },
• "name": "Guru",
• "photoUrls": [

  • "string"

  ],
• "friend": { },
• "tags": [

  • {

    • "id": 0,
    • "name": "string"

    }

  ],
• "status": "available",
• "petType": "cat",
• "huntingSkill": "adventurous"

}