Importing MDX

tip

For more background see the official documentation for importing MDX on docusaurus.io

Let's say you're working on supporting documentation for your API and you want to reference a particular schema. With Docusaurus, you can import generated *.schema.mdx files and use them as components!

Standalone Schema

Standalone Schema

import PetSchema from './petstore/schemas/pet.schema.mdx';

<PetSchema />

Pet

A pet

petType object

A pet

Possible values: [cat, dog, bee]

cat

huntingSkillstringrequired

The measured skill for hunting

Possible values: [clueless, lazy, adventurous, aggressive]

Default value: lazy

Example: adventurous

dog

packSizeint32required

The size of the pack the dog is from

Possible values: >= 1

Default value: 1

bee

honeyPerDaynumberrequired

Average amount of honey produced per day in ounces

Default value: 0

Example: 3.14

idint64

Pet ID

category Category

Categories this pet belongs to

idint64

Category ID

namestring

Category name

Possible values: non-empty

sub object

Test Sub Category

prop1string

Dumb Property

namestringrequired

The name given to a pet

Example: Guru

photoUrlsurl[]required

The list of URL to a cute photos featuring pet

Possible values: <= 20

friendcircular(Pet)

tags Tag[]required

Tags attached to the pet

Possible values: >= 1

Array [

idint64

Tag ID

namestring

Tag name

Possible values: non-empty

]

statusstring

Pet status in the store

Enum Value	Description
available	When the pet is available
pending	When the pet is being sold
sold	When the pet has been sold. These descriptions can contain line breaks and also links

Possible values: [available, pending, sold]

Schema in BrowserWindow

tip

The BrowserWindow component implemented by docusaurus.io was adapted for this example. Aside from visually framing a schema it also supports passing custom styles to the schema component itself.

Schema wrapped in BrowserWindow component

import PetSchema from './petstore/schemas/pet.schema.mdx';
import BrowserWindow from '@site/src/components/BrowserWindow';

<BrowserWindow bodyStyle={{height: 350, overflow: "auto", fontSize: "80%"}} url="https://docusaurus-openapi.tryingpan.dev/advanced#schema-inside-browserwindow">

<PetSchema />

</BrowserWindow>

https://docusaurus-openapi.tryingpan.dev/advanced#schema-inside-browserwindow

Pet

A pet

petType object

A pet

Possible values: [cat, dog, bee]

cat

huntingSkillstringrequired

The measured skill for hunting

Possible values: [clueless, lazy, adventurous, aggressive]

Default value: lazy

Example: adventurous

dog

packSizeint32required

The size of the pack the dog is from

Possible values: >= 1

Default value: 1

bee

honeyPerDaynumberrequired

Average amount of honey produced per day in ounces

Default value: 0

Example: 3.14

idint64

Pet ID

category Category

Categories this pet belongs to

idint64

Category ID

namestring

Category name

Possible values: non-empty

sub object

Test Sub Category

prop1string

Dumb Property

namestringrequired

The name given to a pet

Example: Guru

photoUrlsurl[]required

The list of URL to a cute photos featuring pet

Possible values: <= 20

friendcircular(Pet)

tags Tag[]required

Tags attached to the pet

Possible values: >= 1

Array [

idint64

Tag ID

namestring

Tag name

Possible values: non-empty

]

statusstring

Pet status in the store

Enum Value	Description
available	When the pet is available
pending	When the pet is being sold
sold	When the pet has been sold. These descriptions can contain line breaks and also links

Possible values: [available, pending, sold]