Skip to main content

Redoc

You can display the whole OpenAPI documentation using a React component

File format

You cannot import a React component inside a .md file.
Change your file extension to .mdx before importing the React Component.
Read more here about MDX in Docusaurus.

Import

import Redoc from '@theme/Redoc';

Props

NameTypeDescription
idStringWhen spec not provided, load the spec from docusaurus config. Use first spec if not defined
specOpenAPI specA JSON content spec to use
urlStringExternal URL to load spec file from
themeIdStringredocusaurus theme to use - default to theme-redoc
downloadSpecUrlStringPublic path to the spec file used, used by Redoc as download url

Examples

Basic example

It displays here the first element of the redocusaurus configuration.

import Redoc from '@theme/Redoc';

<Redoc />

External URL example

import Redoc from '@theme/Redoc';

<Redoc url="https://redocly.github.io/redoc/openapi.yaml"/>
Loading ...

Specific id example

import Redoc from '@theme/Redoc';

<Redoc id="using-single-yaml" />

Download url example

import Redoc from '@theme/Redoc';

<Redoc id="using-single-yaml" downloadSpecUrl="https://redocly.github.io/redoc/openapi.yaml" />

Webpack loader example

You can provide a JSON spec to the component like this. Webpack will load the file directly, you don't need to use redocusaurus configuration inside docusaurus.config.js.

import Redoc from '@theme/Redoc';
import openApi from './api-with-examples.json'

<Redoc spec={openApi} />
YAML support

You cannot load yaml file like this:

import openApi from './api-with-examples.yaml'

Without the right webpack configuration to handle such file format.