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"
/>

Incorrect definitionId: "petstore"

Without Samples Panel:

Copy

Copied

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

Incorrect definitionId: "petstore"

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.