OpenAPI for Docusaurus! 📘

Introducing "Redocusaurus": Redoc for Docusaurus

Redocusaurus

What is it?

It is a preset for docusaurus, with 2 main components:

• docusaurus-theme-redoc

Using Redoc as a React component, this provides 2 theme components, @theme/ApiDoc and @theme/Redoc. You can use them directly in js pages in Docusaurus.

• docusaurus-plugin-redoc

This creates routes from your OpenAPI files or URLs and renders with the components provided by the theme.

How to set it up?

1. Install the preset

   npm i --save redocusaurus
   

2. Add it to your docusaurus.config.js:

   module.exports = {
    // ...
    presets: [
      // ...
      [
        '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',
          },
        },
      ],
    ],
    // ...
   };
   

3. Rebuild your site and you will have your OpenAPI docs available at the /api/ route.

Extra features over directly using Redoc

The theme includes redoc settings and some custom css to make it match the @docusaurus/classic theme. Along with support for dark mode.

Read more in the docs - https://redocusaurus.vercel.app/

API Icon by mikicon from the Noun Project