Skip to main content

Installation

  1. Install redocusaurus:

npm

npm i --save redocusaurus
# OR
yarn add redocusaurus babel-plugin-styled-components@^2
  1. Add it as a preset to your docusaurus config along with @docusaurus/preset-classic and pass options:

    • Pass it a path to a local OpenAPI YAML file

      // docusaurus.config.js

      module.exports = {
      // ...
      presets: [
      // .. Your other presets' config
      '@docusaurus/preset-classic',
      // Redocusaurus config
      [
      'redocusaurus',
      {
      // Plugin Options for loading OpenAPI files
      specs: [
      {
      spec: 'openapi/openapi.yaml',
      route: '/api/',
      },
      ],
      // Theme Options for modifying how redoc renders them
      theme: {
      // Change with your site colors
      primaryColor: '#1890ff',
      },
      },
      ],
      ],
      // ...
      };
    • Pass it a OpenAPI spec URL

      // docusaurus.config.js

      module.exports = {
      // ...
      presets: [
      // .. Your other presets' config
      '@docusaurus/preset-classic',
      // Redocusaurus config
      [
      'redocusaurus',
      {
      // Plugin Options for loading OpenAPI files
      specs: [
      {
      spec: 'https://redocly.github.io/redoc/openapi.yaml',
      route: '/api/',
      },
      ],
      // Theme Options for modifying how redoc renders them
      theme: {
      // Change with your site colors
      primaryColor: '#1890ff',
      },
      },
      ],
      ],
      // ...
      };
  2. Add babel-plugin-styled-components to the plugins array of your babel.config.js:

    module.exports = {
    presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
    plugins: ['babel-plugin-styled-components']
    };

The API Doc will be available at the path specific by route. To skip adding a route altogether just don't set the route property. You will still be able to reference schema elements manually using Schema Imports or create Custom React Pages using the data and theme components.

Options

specs

An array of plugin options, see plugin options for individual option details.

theme

Pass options to customize the theme, see theme options for individual option details.