Need help with redoc?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

13.8K Stars 1.5K Forks MIT License 2.2K Commits 402 Opened issues


📘 OpenAPI/Swagger-generated API Reference Documentation

Services available


Need anything else?

Contributors list

ReDoc logo

OpenAPI/Swagger-generated API Reference Documentation

Build Status Coverage Status dependencies Status devDependencies Status npm License

bundle size npm Docker Build Status

This is README for

version of ReDoc (React based). README for
version is on the branch v1.x

ReDoc demo

Live demo

Deploy to Github ReDoc as a service Customization services


  • Extremely easy deployment
  • redoc-cli with ability to bundle your docs into zero-dependency HTML file
  • Server Side Rendering ready
  • The widest OpenAPI v2.0 features support (yes, it supports even
  • OpenAPI 3.0 support
  • Neat interactive documentation for nested objects
  • Code samples support (via vendor extension)
  • 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
    vendor extension
  • Simple integration with
  • Branding/customizations via


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


Important: all the 2.x releases are deployed to npm and can be used via jsdeliver: - particular release, e.g.

:[email protected]/bundles/redoc.standalone.js -
release:[email protected]/bundles/redoc.standalone.js

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

: -
release: -
release: - 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.x | 3.0, 2.0 | | 1.19.x | 2.0 | | 1.18.x | 2.0 | | 1.17.x | 2.0 |

Some Real-life usages



<!-- needed for adaptive design -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=",400,700%7CRoboto:300,400,700" rel="stylesheet">

ReDoc doesn't change outer page styles
  body {
    margin: 0;
    padding: 0;

<redoc spec-url=""></redoc>
<script src="[email protected]/bundles/redoc.standalone.js"> </script>

That's all folks!

IMPORTANT NOTE: if you work with untrusted user spec, use

option to prevent XSS security risks.

1. Install ReDoc (skip this step for CDN)

Install using npm:

npm i redoc

or using yarn:

yarn add redoc

2. Reference redoc script in HTML

For CDN:


For npm:


3. Add
 element to your page

4. Enjoy :smile:

Usage as a React component

Install peer dependencies required by ReDoc if you don't have them installed already:

npm i react react-dom mobx styled-components core-js


component from 'redoc' module:
import { RedocStandalone } from 'redoc';

and use it somewhere in your component:


Also you can pass options:

Here are detailed options docs.

You can also specify

callback which will be called each time Redoc has been fully rendered or when error occurs (with an error as the first argument). NOTE: It may be called multiply times if you change component properties
    if (!error) {

IE11 Support Notes

The Docker way

ReDoc is available as pre-built Docker image in official Docker Hub repository. You may simply pull & run it:

docker pull redocly/redoc
docker run -p 8080:80 redocly/redoc

Also you may rewrite some predefined environment variables defined in Dockerfile. By default ReDoc starts with demo Petstore spec located at
, but you may change this URL using environment variable
docker run -p 8080:80 -e SPEC_URL= redocly/redoc


See here


Security Definition location

You can inject Security Definitions widget into any place of your specification

. Check out details here.

Swagger vendor extensions

ReDoc makes use of the following vendor extensions: *

- is used to specify API logo *
- useful for handling out common things like Pagination, Rate-Limits, etc *
- specify operation code samples *
- specify JSON example for requests *
- mark schema param as a nullable *
- specify human-friendly names for the menu categories *
- group tags by categories in the side menu *
- ability to specify different servers for API (backported from OpenAPI 3.0) *
- ability to specify header parameter names to ignore *
- ability to supply a descriptive name for the additional property keys *
- For Response object, use as the response button text, with description rendered under the button *
- In Schemas, uses this to solve name-clash issues with the standard discriminator *
- In Schemas, display a more descriptive property name in objects with additionalProperties when viewing the property list with an object

 options object

You can use all of the following options with standalone version on tag by kebab-casing them, e.g.


  • disableSearch
    - disable search indexing and search box.
  • expandDefaultServerVariables
    - enable expanding default server variables, default
  • expandResponses
    - specify which responses to expand by default by response codes. Values should be passed as comma-separated list without spaces e.g.
    . Special value
    expands all responses by default. Be careful: this option can slow-down documentation rendering time.
  • 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.
  • hideHostname
    - if set, the protocol and hostname is not shown in the operation definition.
  • hideLoading
    - do not show loading animation. Useful for small docs.
  • 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.
  • expandSingleSchemaField
    - automatically expand single field in a schema
  • jsonSampleExpandLevel
    - set the default expand level for JSON payload samples (responses and request body). Special value
    expands all levels. The default value is
  • hideSchemaTitles
    - do not display schema
    next to to the type
  • simpleOneOfTypeLabel
    - show only unique oneOf types in the label without titles
  • 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
  • nativeScrollbars
    - use native scrollbar for sidemenu instead of perfect-scroll (scrolling performance optimization for big specs).
  • noAutoAuth
    - do not inject Authentication section automatically.
  • 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
  • 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;
    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
    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!

 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)
  • menu
    • width
      : '260px'
    • backgroundColor
      : '#fafafa'
    • textColor
      : '#333333'
    • activeTextColor
      : # COMPUTED: (if set by user) or theme.colors.primary.main
    • groupItems
      # Group headings
    • textTransform
      : 'uppercase'
    • level1Items
      # Level 1 items like tags or section 1st level items
    • textTransform
      : 'none'
    • arrow
      # menu arrow
    • size
      : '1.5em'
    • color
      : # COMPUTED:
  • logo
    • maxHeight
      : # COMPUTED: menu.width
    • maxWidth
      : # COMPUTED: menu.width
    • gutter
      : '2px' # logo image padding
  • rightPanel
    • backgroundColor
      : '#263238'
    • width
      : '40%'
    • textColor
      : '#ffffff'

Advanced usage of standalone version

Instead of adding

attribute to the
 element you can initialize ReDoc via globally exposed 
Redoc.init(specOrSpecUrl, options, element, callback?)
  • specOrSpecUrl
    is either JSON object with specification or an URL to the spec in
  • options
    options object
  • element
    DOM element to put ReDoc into
  • callback
    (optional) - callback to be called after Redoc has been fully rendered. It is also called on errors with error as the first argument
Redoc.init('', {
  scrollYOffset: 50
}, document.getElementById('redoc-container'))



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.