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.