Skip to main content

Schema Imports

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

huntingSkill
required
string
Default: "lazy"
Enum: "clueless" "lazy" "adventurous" "aggressive"

The measured skill for hunting

Example
{
  • "id": 0,
  • "category": {
    },
  • "name": "Guru",
  • "photoUrls": [
    ],
  • "friend": { },
  • "tags": [
    ],
  • "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

huntingSkill
required
string
Default: "lazy"
Enum: "clueless" "lazy" "adventurous" "aggressive"

The measured skill for hunting

Example
{
  • "id": 0,
  • "category": {
    },
  • "name": "Guru",
  • "photoUrls": [
    ],
  • "friend": { },
  • "tags": [
    ],
  • "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: [
    '@docusaurus/preset-classic',
    [
      'redocusaurus',
      {
        specs: [
          {
            id: 'using-single-yaml',
            spec: 'openapi/single-file/openapi.yaml',
            route: '/examples/using-single-yaml/',
          },
          {
            id: 'using-remote-url',
            spec: 'https://redocly.github.io/redoc/openapi.yaml',
            route: '/examples/using-remote-url/',
          },
        ],
        theme: {
          /**
           * Highlight color for docs
           */
          primaryColor: '#1890ff',
          /**
           * Options to pass to redoc
           * @see https://github.com/redocly/redoc#redoc-options-object
           */
          options: { disableSearch: true },
        },
      },
    ],
  ],
  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

huntingSkill
required
string
Default: "lazy"
Enum: "clueless" "lazy" "adventurous" "aggressive"

The measured skill for hunting

Example
{
  • "id": 0,
  • "category": {
    },
  • "name": "Guru",
  • "photoUrls": [
    ],
  • "friend": { },
  • "tags": [
    ],
  • "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

huntingSkill
required
string
Default: "lazy"
Enum: "clueless" "lazy" "adventurous" "aggressive"

The measured skill for hunting

Example
{
  • "id": 0,
  • "category": {
    },
  • "name": "Guru",
  • "photoUrls": [
    ],
  • "friend": { },
  • "tags": [
    ],
  • "status": "available",
  • "petType": "cat",
  • "huntingSkill": "adventurous"
}