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

Possible values: non-empty

Category name

sub

object

Test Sub Category

prop1 string

Dumb Property

name stringrequired

The name given to a pet

photoUrls url[]required

Possible values: <= 20

The list of URL to a cute photos featuring pet

friend

tags

Tag[]

required

Possible values: >= 1

Tags attached to the pet

Array [

id int64

name string

Possible values: non-empty

Tag name

]

status string

Possible values: [available, pending, sold]

Pet status in the store

petType

string

Possible values: [cat, dog, bee]

Type of a pet

cat

huntingSkill stringrequired

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

Default value: lazy

The measured skill for hunting

dog

packSize int32required

Possible values: >= 1

Default value: 1

The size of the pack the dog is from

bee

honeyPerDay numberrequired

Default value: 0

Average amount of honey produced per day in ounces

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

Possible values: non-empty

Category name

sub

object

Test Sub Category

prop1 string

Dumb Property

name stringrequired

The name given to a pet

photoUrls url[]required

Possible values: <= 20

The list of URL to a cute photos featuring pet

friend

tags

Tag[]

required

Possible values: >= 1

Tags attached to the pet

Array [

id int64

name string

Possible values: non-empty

Tag name

]

status string

Possible values: [available, pending, sold]

Pet status in the store

petType

string

Possible values: [cat, dog, bee]

Type of a pet

cat

huntingSkill stringrequired

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

Default value: lazy

The measured skill for hunting

dog

packSize int32required

Possible values: >= 1

Default value: 1

The size of the pack the dog is from

bee

honeyPerDay numberrequired

Default value: 0

Average amount of honey produced per day in ounces