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

id int64

category

Category

id int64

Category ID

name string

Category name

Possible values: non-empty

sub

object

Test Sub Category

prop1 string

Dumb Property

name stringrequired

The name given to a pet

photoUrls url[]required

The list of URL to a cute photos featuring pet

Possible values: <= 20

friend

tags

Tag[]

required

Tags attached to the pet

Possible values: >= 1

Array [

id int64

name string

Tag name

Possible values: non-empty

]

status string

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]

petType

string

Type of a pet

Possible values: [cat, dog, bee]

cat

huntingSkill stringrequired

The measured skill for hunting

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

Default value: lazy

dog

packSize int32required

The size of the pack the dog is from

Possible values: >= 1

Default value: 1

bee

honeyPerDay numberrequired

Average amount of honey produced per day in ounces

Default value: 0

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

id int64

category

Category

id int64

Category ID

name string

Category name

Possible values: non-empty

sub

object

Test Sub Category

prop1 string

Dumb Property

name stringrequired

The name given to a pet

photoUrls url[]required

The list of URL to a cute photos featuring pet

Possible values: <= 20

friend

tags

Tag[]

required

Tags attached to the pet

Possible values: >= 1

Array [

id int64

name string

Tag name

Possible values: non-empty

]

status string

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]

petType

string

Type of a pet

Possible values: [cat, dog, bee]

cat

huntingSkill stringrequired

The measured skill for hunting

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

Default value: lazy

dog

packSize int32required

The size of the pack the dog is from

Possible values: >= 1

Default value: 1

bee

honeyPerDay numberrequired

Average amount of honey produced per day in ounces

Default value: 0