Using Markdown Extensions

Use Markdown Extensions by naming the file extension as .mdx and importing the extensions at the top of the file.

You can import a single extension:

import { RedocResponse } from '@redocly/ui';

Or multiple extensions at the same time:

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

We created a library (@redocly/ui) with components you can reference within any markdown extension file.

A markdown extension file is a combination of markdown and components.

Learn how to use some of our popular components below:

ReDoc Response

With Samples Panel:

<RedocResponse definitionId="petstore" pointer="#/components/responses/PetResponse" />

successful operation

Response Schema:
application/xml

Array

id	integer <int64>
category	object (Category)
name required	string
photoUrls required	Array of strings
tags	Array of objects (Tag)
status	string Enum: "available" "pending" "sold" pet status in the store

Content type

No sample

Without Samples Panel:

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

successful operation

Response Schema:
application/xml

Array

id	integer <int64>
category	object (Category)
name required	string
photoUrls required	Array of strings
tags	Array of objects (Tag)
status	string Enum: "available" "pending" "sold" pet status in the store

Jumbotron

<Jumbotron>
  <H1>Might be good for a home page</H1>
  <H2>or a landing page</H2>
  <Flex p={20} justifyContent="center">
    <Button inversed large to="https://github.com/Rebilly/ReDoc">
      Get Redocly
    </Button>
    <Button inversed transparent large to="markdown.md">
      Get Started
    </Button>
  </Flex>
</Jumbotron>