Skip to main content

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

    Pet ID

    category

    Category

    Categories this pet belongs to

    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

    Example: Guru
    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

    Tag ID

    name string

    Tag name

    Possible values: non-empty

  • ]

  • status string

    Pet status in the store

    Enum ValueDescription
    availableWhen the pet is available
    pendingWhen the pet is being sold
    soldWhen 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]

    huntingSkill stringrequired

    The measured skill for hunting

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

    Default value: lazy
    Example: adventurous

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

    Pet ID

    category

    Category

    Categories this pet belongs to

    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

    Example: Guru
    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

    Tag ID

    name string

    Tag name

    Possible values: non-empty

  • ]

  • status string

    Pet status in the store

    Enum ValueDescription
    availableWhen the pet is available
    pendingWhen the pet is being sold
    soldWhen 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]

    huntingSkill stringrequired

    The measured skill for hunting

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

    Default value: lazy
    Example: adventurous