Zum Hauptinhalt springen
Version: 0.x

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>
object (Category)
name
required
string
photoUrls
required
Array of strings
Array of objects (Tag)
status
string
Enum: "available" "pending" "sold"

pet status in the store

{
  • "id": 0,
  • "category": {
    },
  • "name": "doggie",
  • "photoUrls": [
    ],
  • "tags": [
    ],
  • "status": "available"
}

Import Schema Model (with example) in Docs

import ApiSchema from '@theme/ApiSchema';

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

Results

id
integer <int64>
object (Category)
name
required
string
photoUrls
required
Array of strings
Array of objects (Tag)
status
string
Enum: "available" "pending" "sold"

pet status in the store

{
  • "id": 0,
  • "category": {
    },
  • "name": "doggie",
  • "photoUrls": [
    ],
  • "tags": [
    ],
  • "status": "available"
}

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

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

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