Using MDX

Use MDX by naming the file extension as .mdx and importing the components at the top of the file.

You can import a single extension:

Copy
Copied
import { OpenApiResponse } from '@redocly/developer-portal/ui';

Or multiple extensions at the same time:

Copy
Copied
import {
  Box,
  Button,
  FlexSection,
  Flex,
  Jumbotron,
  H1,
  H2,
  Link,
  ThinTile,
  WideTile,
  Emphasis,
  SectionHeader,
 } from '@redocly/developer-portal/ui';

We created a library (@redocly/developer-portal/ui) with components you can reference.

Try and create an MDX file which renders one of your API's response objects.

With Samples Panel:

Copy
Copied
<OpenApiResponse definitionId="petstore" pointer="#/components/responses/PetResponse" />

successful operation

Response Schema:
Array
id
integer <int64>
object (Category)
name
required
string
photoUrls
required
Array of strings
Array of objects (Tag)
status
string

pet status in the store

Enum: "available" "pending" "sold"
No sample

Without Samples Panel:

Copy
Copied
<OpenApiResponse definitionId="petstore" pointer="#/components/responses/PetResponse" hideSamples={true} />

successful operation

Response Schema:
Array
id
integer <int64>
object (Category)
name
required
string
photoUrls
required
Array of strings
Array of objects (Tag)
status
string

pet status in the store

Enum: "available" "pending" "sold"

Other components

What other components would you like to see? Let us know. We're adding new components.

Developing new components

A developer familiar with React can create new components. We left a sample component at /components/Counter.tsx. Inspect it and its usage at /developer-portal/custom-component.mdx.