DEV Community

loading...

OpenAPI for Docusaurus! πŸ“˜

Rohit Gohri
Full-Stack dev interested in DevOps, open-source, increasing developer productivity, doing things "right", and writing things down.
Originally published at rohit.page on ・1 min read

Introducing "Redocusaurus": Redoc for Docusaurus

Redocusaurus

npm downloads

What is it?

It is a preset that allows you to easily integrate OpenAPI documentation into your docs site made with docusaurus. It has 2 main components:

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.

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

How to set it up?

Install the preset

npm i --save redocusaurus

Enter fullscreen mode Exit fullscreen mode

Add it to your docusaurus.config.js:

module.exports = {
 // ...
 presets: [
   [
     'redocusaurus',
     {
       specs: [{
         routePath: '/api/',
         specUrl: 'https://redocly.github.io/redoc/openapi.yaml',
       }],
     }
   ],
 ],
 // ...
};

Enter fullscreen mode Exit fullscreen mode
  1. 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.

Github Repo

Find the source and know more on Github.

github badge

Discussion (2)

Collapse
andrewpierno profile image
Andrew Pierno

Does this still work? Just tried installing it. nothing happens. no routes on /api available.

Collapse
christopherhsieh profile image
Christopher Hsieh

Works well on my end, especially with the last few releases. Make sure all dependencies are updated.

One method of troubleshooting that worked well for me was to pull down redocusaurus’ source, and try running the project nested in the β€œexample” folder. If the example works then you could work backwards to find differences in your project.