redoc

What is redoc?

Redoc is an open-source tool for generating interactive API documentation from OpenAPI (formerly Swagger) definitions. It provides a user-friendly interface for exploring and understanding API endpoints, parameters, and responses.

What are redoc's main functionalities?

Render API Documentation

This feature allows you to render API documentation from an OpenAPI specification file. The `init` method takes the path to the OpenAPI file, optional configuration options, and the HTML element where the documentation should be rendered.

const Redoc = require('redoc');
Redoc.init('path/to/your/openapi.yaml', {
  scrollYOffset: 50
}, document.getElementById('redoc-container'));

Customization Options

Redoc allows for extensive customization of the rendered documentation. You can change the theme, colors, fonts, and other styles to match your branding.

const Redoc = require('redoc');
Redoc.init('path/to/your/openapi.yaml', {
  theme: {
    colors: {
      primary: {
        main: '#dd5522'
      }
    }
  }
}, document.getElementById('redoc-container'));

Standalone HTML Generation

Redoc provides a CLI tool to generate a standalone HTML file from an OpenAPI specification. This can be useful for hosting static API documentation without needing a server.

const { exec } = require('child_process');
exec('npx redoc-cli bundle path/to/your/openapi.yaml', (error, stdout, stderr) => {
  if (error) {
    console.error(`Error: ${error.message}`);
    return;
  }
  if (stderr) {
    console.error(`Stderr: ${stderr}`);
    return;
  }
  console.log(`Stdout: ${stdout}`);
});

Other packages similar to redoc

swagger-ui

Swagger UI is another popular tool for generating interactive API documentation from OpenAPI specifications. It offers a more traditional interface compared to Redoc and is highly customizable. Swagger UI is often used in conjunction with other Swagger tools for a complete API development workflow.

api-docs

API Docs is a lightweight tool for generating API documentation from OpenAPI specifications. It focuses on simplicity and ease of use, making it a good choice for smaller projects or teams that need quick and straightforward documentation.

spectacle

Spectacle is a tool for generating API documentation from OpenAPI specifications with a focus on readability and user experience. It offers a clean and modern interface, similar to Redoc, but with different customization options and features.

README

OpenAPI/Swagger-generated API Reference Documentation

This is README for `1.x` version of ReDoc. `2.x` README is on the master branch

Live demo

Features

• Extremely easy deployment
• The widest OpenAPI v2.0 features support (yes, it supports even discriminator)
  
• Neat interactive documentation for nested objects
  
• Code samples support (via vendor extension)
  
• Progressive loading with lazy-rendering options
  
• Responsive three-panel design with menu/scrolling synchronization
• Integrate API Introduction into side menu - ReDoc takes advantage of markdown headings from OpenAPI description field. It pulls them into side menu and also supports deep linking.
• High-level grouping in side-menu via x-tagGroups vendor extension
• Multiple ReDoc instances on single page (example)

Roadmap

• OpenAPI v3.0 support
• performance optimizations
• better navigation (menu improvements + search)
• ability to simple branding/styling
• built-in API Console
• docs pre-rendering (performance and SEO)

Releases

We host the latest and all the previous ReDoc releases on GitHub Pages-based CDN:

• particular release, e.g. v1.2.0: https://rebilly.github.io/ReDoc/releases/v1.2.0/redoc.min.js
• v1.x.x release: https://rebilly.github.io/ReDoc/releases/v1.x.x/redoc.min.js
• latest release: https://rebilly.github.io/ReDoc/releases/latest/redoc.min.js this file is updated with each release of ReDoc and may introduce breaking changes. Not recommended to use in production. Use particular release or v1.x.x.

Version Guidance

ReDoc Release	OpenAPI Specification
1.19.x	2.0
1.18.x	2.0
1.17.x	2.0

Some Real-life usages

• Rebilly
• Docker Engine
• Zuora
• Shopify Draft Orders
• Discourse
• APIs.guru

Deployment

TL;DR

<!DOCTYPE html>
<html>
  <head>
    <title>ReDoc</title>
    <!-- needed for adaptive design -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--
    ReDoc doesn't change outer page styles
    -->
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
    <script src="https://rebilly.github.io/ReDoc/releases/latest/redoc.min.js"> </script>
  </body>
</html>

That's all folks!

IMPORTANT NOTE: if you work with untrusted user spec, use untrusted-spec option to prevent XSS security risks.

1. Install ReDoc (skip this step for CDN)

Install using yarn:

yarn add redoc

or using npm:

npm install redoc --save

2. Reference redoc script in HTML

For CDN:

<script src="https://rebilly.github.io/ReDoc/releases/latest/redoc.min.js"> </script>

For npm:

<script src="node_modules/redoc/dist/redoc.min.js"> </script>

3. Add <redoc> element to your page

<redoc spec-url="url/to/your/spec"></redoc>

4. Enjoy :smile:

Configuration

Security Definition location

You can inject Security Definitions widget into any place of your specification description. Check out details here.

Swagger vendor extensions

ReDoc makes use of the following vendor extensions:

• x-logo - is used to specify API logo
• x-traitTag - useful for handling out common things like Pagination, Rate-Limits, etc
• x-code-samples - specify operation code samples
• x-examples - specify JSON example for requests
• x-nullable - mark schema param as a nullable
• x-displayName - specify human-friendly names for the menu categories
• x-tagGroups - group tags by categories in the side menu
• x-servers - ability to specify different servers for API (backported from OpenAPI 3.0)
• x-ignoredHeaderParameters - ability to specify header parameter names to ignore

<redoc> tag attributes

• spec-url - relative or absolute url to your spec file;
• untrusted-spec - if set, the spec is considered untrusted and all HTML/markdown is sanitized to prevent XSS. Disabled by default for performance reasons. Enable this option if you work with untrusted user data!
• scroll-y-offset - If set, specifies a vertical scroll-offset. This is often useful when there are fixed positioned elements at the top of the page, such as navbars, headers etc; scroll-y-offset can be specified in various ways:
  • number: A fixed number of pixels to be used as offset;
  • selector: selector of the element to be used for specifying the offset. The distance from the top of the page to the element's bottom will be used as offset;
  • function: A getter function. Must return a number representing the offset (in pixels);
• suppress-warnings - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
• lazy-rendering - if set, enables lazy rendering mode in ReDoc. This mode is useful for APIs with big number of operations (e.g. > 50). In this mode ReDoc shows initial screen ASAP and then renders the rest operations asynchronously while showing progress bar on the top. Check out the demo for the example.
• hide-hostname - if set, the protocol and hostname is not shown in the operation definition.
• hide-download-button - do not show "Download" spec button. THIS DOESN'T MAKE YOUR SPEC PRIVATE, it just hides the button.
• expand-responses - specify which responses to expand by default by response codes. Values should be passed as comma-separated list without spaces e.g. expand-responses="200,201". Special value "all" expands all responses by default. Be careful: this option can slow-down documentation rendering time.
• required-props-first - show required properties first ordered in the same order as in required array.
• no-auto-auth - do not inject Authentication section automatically
• path-in-middle-panel - show path link and HTTP verb in the middle panel instead of the right one
• hide-loading - do not show loading animation. Useful for small docs
• native-scrollbars - use native scrollbar for sidemenu instead of perfect-scroll (scrolling performance optimization for big specs)

Advanced usage

Instead of adding spec-url attribute to the <redoc> element you can initialize ReDoc via globally exposed Redoc object:

Redoc.init(specOrSpecUrl, options)

specOrSpecUrl is either JSON object with specification or an URL to the spec in JSON or YAML format. options is javascript object with camel-cased version of <redoc> tag attribute names as the keys, e.g.:

Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
  scrollYOffset: 50
})

---

Development

Running local dev-server

• Clone repository git clone https://github.com/Rebilly/ReDoc.git
• Go to the project folder cd ReDoc
• Install dependencies npm install
• (optional) Replace demo/swagger.yaml with your own schema
• Start the server npm start
• Open http://localhost:9000

Alternatively, Docker can be used by just running docker-compose up.