Generate interactive API documentation from OpenAPI definitions

This is the README for the 2.x version of Redoc (React-based). The README for the 1.x version is on the v1.x branch.

Forked Redoc

This includes information about this fork of Redoc. Proceed to the next section for original information about Redoc.

This is a fork of Redoc for the purpose of customizing the component for MongoDB documentation. Both the CLI and React component are used for the team's build process for static site generation.

Installation

Ensure Artifactory credentials are set up and set to NPM_BASE_64_AUTH and NPM_EMAIL env variables. This should be similar to the setup on Snooty. Below are the instructions to work with Redoc locally with custom MongoDB components, such as the Consistent Nav:

1. In redoc/root folder of this fork, run npm install.
2. In redoc/cli folder, run npm install.
3. In redoc/cli folder, run: npm link ../ ../node_modules/react/ ../node_modules/styled-components/. This will link certain CLI dependencies to be compatible with the local instance and fork of Redoc.

• ../ is for redoc.
• ../node_modules/react/ is to fix React hook errors.
• ../node_modules/styled-components/ is to fix styling issues.

4. In redoc/root folder, run: npm run bundle. This will create bundled files needed by the CLI / needed to run the CLI.

Running the CLI

Make sure to run npm run bundle on the root folder of this repo before running the CLI.

With node installed, run by doing the following:

node <path/to/redoc/cli/index.js> build <path/to/spec/file/or/url> --options <path/to/options.json> --output=<path/to/custom/output/file/name.html>

Options Available to include

Custom DOP options are available to include within a local JSON file.

Within your options.json in the root directory, specify the siteTitle, backNavigationPath, versionData, and/or ignoreIncompatibleTypes flag.

The siteTitle and backNavigationPath properties are used to personalize the SideMenuBackButton UI and navigation.

The ignoreIncompatibleTypes flag will silence only "Incompatible Types" errors in the build process.

The versionData property enables and populates the VersionSelector dropdown for versioned OpenAPI specs. The structure is as follows:

{
  "active": {
    "apiVersion": "2.0",
    "resourceVersion": "2023-02-14"
  },
  "rootUrl": "https://mongodb.com/docs/atlas/reference/api-resources-spec/v2",
  "resourceVersions": ["2022-09-09", "2022-10-18", "2023-02-14"]
}

After specifying all options, run the build:

node <path/to/redoc/cli/index.js> build <path/to/spec/file/or/url> --options options.json

Releasing

The Redoc React component and the Redoc CLI have 2 separate release processes. Because the Redoc CLI pulls its version of Redoc from GitHub, build artifacts are included in the version tag being installed.

See the sections below for release steps for each component. A pull request will be made with the necessary release changes. After merging the PR, a release commit will be pushed to the main branch of mongodb-forks/redoc after following the steps, which will trigger a GitHub workflow. The workflow is responsible for testing, building artifacts (for the Redoc component, if applicable), and creating a tag.

⚠️ Note: Ensure that your local clone of the mongodb-forks/redoc repo is clean and up-to-date with the main branch. Please check your remotes to ensure that the upstream remote is set to the mongodb-forks/redoc repo. Example:

$ git remote -v
upstream	https://github.com/mongodb-forks/redoc.git (fetch)
upstream	https://github.com/mongodb-forks/redoc.git (push)

Redoc

Releasing the Redoc React component can be done by:

1. Go to your local clone of the mongodb-forks/redoc repo and ensure you are on the latest iteration of the main branch.
2. Run npm version [major | minor | patch | prerelease --preid=rc].
   • A commit should have been pushed to a new releases/vX.Y.Z branch.
   • The creation of the new branch should create a new pull request.
3. Approve and merge the new pull request to the main branch.

Redoc CLI

Releasing the Redoc CLI can be done by:

1. Go to your local clone of the mongodb-forks/redoc repo and ensure you are on the latest iteration of the main branch.
2. Go to the cli/ directory.
3. Run npm install git+https://[email protected]/mongodb-forks/redoc#{VERSION_TAG} to update the version of Redoc that the CLI uses.
   • Example: npm install git+https://[email protected]/mongodb-forks/redoc#v1.0.0. You should see the version set in the CLI's package.json.
   • The module should be installed through https. Otherwise, it may be installed via ssh, causing an error during the Autobuilder's image build.
4. Run npm version [major | minor | patch | prerelease --preid=rc].
   • A commit should have been pushed to a new releases/@dop/[email protected] branch.
   • The creation of the new branch should create a new pull request.
5. Approve and merge the new pull request to the main branch.

About Redoc

Redoc is an open-source tool for generating documentation from OpenAPI (fka Swagger) definitions.

By default Redoc offers a three-panel, responsive layout:

• The left panel contains a search bar and navigation menu.
• The central panel contains the documentation.
• The right panel contains request and response examples.

Live demo

If you want to see how Redoc will render your OpenAPI definition, you can try it out online at https://redocly.github.io/redoc/.

A version of the Swagger Petstore API is displayed by default. To test it with your own OpenAPI definition, enter the URL for your definition and select TRY IT.

Redoc vs. Reference vs. Portals

Redoc is Redocly's community-edition product. Looking for something more? Checkout the following feature comparison of Redocly's premium products versus Redoc:

Features	Redoc	Reference	Portals
Specs
Swagger 2.0	√	√	√
OpenAPI 3.0	√	√	√
OpenAPI 3.1	√ (basic)	√	√
Theming
Fonts/colors	√	√	√
Extra theme options		√	√
Performance
Pagination		√	√
Search (enhanced)		√	√
Search (server-side)			√
Multiple APIs
Multiple versions		√	√
Multiple APIs			√
API catalog			√
Additional features
Try-it console		√	√
Automated code samples		√	√
Deep links		√	√
More SEO control			√
Contextual docs			√
Landing pages			√
React hooks for more control			√
Personalization			√
Analytics integrations			√
Feedback			Coming Soon

Refer to the Redocly's documentation for more information on these products:

• Portals
• Reference
• Redoc

Features

• Responsive three-panel design with menu/scrolling synchronization

• Multiple deployment options

• Server-side rendering (SSR) ready

• Ability to integrate your API introduction into the side menu

• Simple integration with create-react-app

  Example repo

• Command-line interface to bundle your docs into a zero-dependency HTML file

• Neat interactive documentation for nested objects
  

Customization options

• High-level grouping in side-menu with the x-tagGroups specification extension
• Branding/customizations using the theme option

Support

• OpenAPI v3.0 support
• Basic OpenAPI v3.1 support
• Broad OpenAPI v2.0 feature support (yes, it supports even discriminator)
  
• Code samples support (via vendor extension)
  

Releases

Important: all the 2.x releases are deployed to npm and can be used with Redocly-cdn:

• particular release, for example, v2.0.0: https://cdn.redoc.ly/redoc/v2.0.0/bundles/redoc.standalone.js
• latest release: https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js

Additionally, all the 1.x releases are hosted on our GitHub Pages-based CDN (deprecated):

• particular release, for example 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 - it will point to latest 1.x.x release since 2.x releases are not hosted on this CDN but on unpkg.

Version Guidance

Redoc Release	OpenAPI Specification
2.0.0-alpha.54	3.1, 3.0.x, 2.0
2.0.0-alpha.x	3.0, 2.0
1.19.x	2.0
1.18.x	2.0
1.17.x	2.0

Showcase

• Rebilly
• Docker Engine
• Zuora
• Discourse
• Commbox
• APIs.guru
• BoxKnight

Lint OpenAPI definitions

Redocly's CLI is an open source command-line tool that you can use to lint your OpenAPI definition. Linting helps you to catch errors and inconsistencies in your OpenAPI definition before publishing.

Refer to Redocly configuration in the OpenAPI documentation for more information.

Deployment

TL;DR final code example

To render your OpenAPI definition using Redoc, use the following HTML code sample and replace the spec-url attribute with the url or local file address to your definition.

<!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">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">

    <!--
    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://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
  </body>
</html>

For step-by-step instructions for how to get started using Redoc to render your OpenAPI definition, refer to the Redoc quickstart guide and How to use the HTML element.

Redoc CLI

For more information on Redoc's commmand-line interface, refer to Using the Redoc CLI.

Configuration

Security Definition location

You can inject the Security Definitions widget into any place in your definition description. For more information, refer to Security definitions injection.

OpenAPI specification extensions

Redoc uses the following specification extensions:

• x-logo - is used to specify API logo
• x-traitTag - useful for handling out common things like Pagination, Rate-Limits, etc
• x-codeSamples - 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
• x-additionalPropertiesName - ability to supply a descriptive name for the additional property keys
• x-summary - For Response object, use as the response button text, with description rendered under the button
• x-extendedDiscriminator - In Schemas, uses this to solve name-clash issues with the standard discriminator
• x-explicitMappingOnly - In Schemas, display a more descriptive property name in objects with additionalProperties when viewing the property list with an object

<redoc> options object

You can use all of the following options with the standalone version of the tag by kebab-casing them. For example, scrollYOffset becomes scroll-y-offset, and expandResponses becomes expand-responses.

• disableSearch - disable search indexing and search box.
• minCharacterLengthToInitSearch - set minimal characters length to init search, default 3, minimal 1.
• expandDefaultServerVariables - enable expanding default server variables, default false.
• expandResponses - specify which responses to expand by default by response codes. Values should be passed as comma-separated list without spaces e.g. expandResponses="200,201". Special value "all" expands all responses by default. Be careful: this option can slow-down documentation rendering time.
• generatedPayloadSamplesMaxDepth - set the maximum render depth for JSON payload samples (responses and request body). The default value is 10.
• maxDisplayedEnumValues - display only specified number of enum values. hide rest values under spoiler.
• hideDownloadButton - do not show "Download" spec button. THIS DOESN'T MAKE YOUR SPEC PRIVATE, it just hides the button.
• downloadFileName - set a custom file name for the downloaded API definition file.
• downloadDefinitionUrl - If the 'Download' button is visible in the API reference documentation (hideDownloadButton=false), the URL configured here will open when that button is selected. Provide it as an absolute URL with the full URI scheme.
• hideHostname - if set, the protocol and hostname is not shown in the operation definition.
• hideLoading - do not show loading animation. Useful for small docs.
• hideFab - do not show FAB in mobile view. Useful for implementing a custom floating action button.
• hideSchemaPattern - if set, the pattern is not shown in the schema.
• hideSingleRequestSampleTab - do not show the request sample tab for requests with only one sample.
• showObjectSchemaExamples - show object schema example in the properties, default false.
• expandSingleSchemaField - automatically expand single field in a schema
• schemaExpansionLevel - specifies whether to automatically expand schemas. Special value "all" expands all levels. The default value is 0.
• jsonSampleExpandLevel - set the default expand level for JSON payload samples (responses and request body). Special value "all" expands all levels. The default value is 2.
• hideSchemaTitles - do not display schema title next to to the type
• simpleOneOfTypeLabel - show only unique oneOf types in the label without titles
• sortEnumValuesAlphabetically - set to true, sorts all enum values in all schemas alphabetically
• sortOperationsAlphabetically - set to true, sorts operations in the navigation sidebar and in the middle panel alphabetically
• sortTagsAlphabetically - set to true, sorts tags in the navigation sidebar and in the middle panel alphabetically
• lazyRendering - Not implemented yet 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.
• menuToggle - if true clicking second time on expanded menu item will collapse it, default true.
• nativeScrollbars - use native scrollbar for sidemenu instead of perfect-scroll (scrolling performance optimization for big specs).
• onlyRequiredInSamples - shows only required fields in request samples.
• pathInMiddlePanel - show path link and HTTP verb in the middle panel instead of the right one.
• requiredPropsFirst - show required properties first ordered in the same order as in required array.
• scrollYOffset - 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; scrollYOffset 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).
• showExtensions - show vendor extensions ("x-" fields). Extensions used by Redoc are ignored. Can be boolean or an array of string with names of extensions to display.
• sortPropsAlphabetically - sort properties alphabetically.
• payloadSampleIdx - if set, payload sample will be inserted at this index or last. Indexes start from 0.
• theme - Redoc theme. For details check theme docs.
• untrustedSpec - 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!
• nonce - if set, the provided value will be injected in every injected HTML element in the nonce attribute. Useful when using CSP, see https://webpack.js.org/guides/csp/.
• sideNavStyle - can be specified in various ways:
  • summary-only: displays a summary in the sidebar navigation item. (default)
  • path-only: displays a path in the sidebar navigation item.
  • id-only: displays the operation id with a fallback to the path in the sidebar navigation item.
• showWebhookVerb - when set to true, shows the HTTP request method for webhooks in operations and in the sidebar.

<redoc> theme object

• spacing
  • unit: 5 # main spacing unit used in autocomputed theme values later
  • sectionHorizontal: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8
  • sectionVertical: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8
• breakpoints # breakpoints for switching three/two and mobile view layouts
  • small: '50rem'
  • medium: '85rem'
  • large: '105rem'
• colors
  • tonalOffset: 0.3 # default tonal offset used in computations
• typography
  • fontSize: '14px'
  • lineHeight: '1.5em'
  • fontWeightRegular: '400'
  • fontWeightBold: '600'
  • fontWeightLight: '300'
  • fontFamily: 'Roboto, sans-serif'
  • smoothing: 'antialiased'
  • optimizeSpeed: true
  • headings
    • fontFamily: 'Montserrat, sans-serif'
    • fontWeight: '400'
    • lineHeight: '1.6em'
  • code # inline code styling
    • fontSize: '13px'
    • fontFamily: 'Courier, monospace'
    • lineHeight: # COMPUTED: typography.lineHeight
    • fontWeight: # COMPUTED: typography.fontWeightRegular
    • color: '#e53935'
    • backgroundColor: 'rgba(38, 50, 56, 0.05)'
    • wrap: false # whether to break word for inline blocks (otherwise they can overflow)
  • links
    • color: # COMPUTED: colors.primary.main
    • visited: # COMPUTED: typography.links.color
    • hover: # COMPUTED: lighten(0.2 typography.links.color)
    • textDecoration: 'auto'
    • hoverTextDecoration: 'auto'
• sidebar
  • width: '260px'
  • backgroundColor: '#fafafa'
  • textColor: '#333333'
  • activeTextColor: # COMPUTED: theme.sidebar.textColor (if set by user) or theme.colors.primary.main
  • groupItems # Group headings
    • activeBackgroundColor: # COMPUTED: theme.sidebar.backgroundColor
    • activeTextColor: # COMPUTED: theme.sidebar.activeTextColor
    • textTransform: 'uppercase'
  • level1Items # Level 1 items like tags or section 1st level items
    • activeBackgroundColor: # COMPUTED: theme.sidebar.backgroundColor
    • activeTextColor: # COMPUTED: theme.sidebar.activeTextColor
    • textTransform: 'none'
  • arrow # sidebar arrow
    • size: '1.5em'
    • color: # COMPUTED: theme.sidebar.textColor
• logo
  • maxHeight: # COMPUTED: sidebar.width
  • maxWidth: # COMPUTED: sidebar.width
  • gutter: '2px' # logo image padding
• rightPanel
  • backgroundColor: '#263238'
  • width: '40%'
  • textColor: '#ffffff'
  • servers
    • overlay
      • backgroundColor: '#fafafa'
      • textColor: '#263238'
    • url
      • backgroundColor: '#fff'
• fab
  • backgroundColor: '#263238'
  • color: '#ffffff'

---

Development

see CONTRIBUTING.md