📘 OpenAPI/Swagger-generated API Reference Documentation
Go to file
2020-08-14 17:45:41 -04:00
.github chore: simplify .github workflow 2020-05-25 16:49:00 +03:00
.vscode chore: use latest RC of typescript 2018-03-16 17:02:12 +02:00
benchmark chore: migrate yarn -> npm 2020-03-17 11:06:03 +02:00
cli chore(deps): bump prismjs from 1.20.0 to 1.21.0 in /cli (#1344) 2020-08-11 15:19:11 +03:00
config/docker fix: add security headers to Docker nginx config (#1244) 2020-05-14 10:33:09 +03:00
demo feat: add webhooks support (#1304) 2020-08-14 16:33:25 +03:00
docs Updated x-servers link to point to valid location. (#1267) 2020-05-24 23:06:08 +03:00
e2e feat: add webhooks support (#1304) 2020-08-14 16:33:25 +03:00
src feat: add webhooks support (#1304) 2020-08-14 16:33:25 +03:00
tests/e2e feat: add callbacks support (#1224) 2020-04-08 14:04:58 +03:00
typings chore: upgrade deps 2020-07-25 20:15:14 +03:00
.dockerignore chore: migrate yarn -> npm 2020-03-17 11:06:03 +02:00
.editorconfig Initial React rewrite 2017-10-12 00:01:37 +03:00
.eslintrc.js chore: fix eslint errors 2020-07-25 20:15:14 +03:00
.gitignore chore: migrate yarn -> npm 2020-03-17 11:06:03 +02:00
.npmignore fix: fix typings on npm 2018-05-31 15:41:57 +03:00
.travis.yml chore: remove tokens from .travis.yml 2020-07-24 19:51:42 +03:00
CHANGELOG.md chore: Release 2.0.0-rc.37 🔖 2020-08-14 16:38:00 +03:00
custom.d.ts chore: update deps 2019-03-11 17:14:14 +02:00
cypress.json chore: inconsistent local and travis, Revert "tests: add basic screenshot test for schema view" 2018-09-28 16:49:34 +03:00
karma.conf.js chore: try fix chrome headless on travis 2018-01-21 21:57:48 +02:00
LICENSE Update LICENSE 2018-05-08 10:23:45 -05:00
package-lock.json chore: Release 2.0.0-rc.37 🔖 2020-08-14 16:38:00 +03:00
package.json chore: Release 2.0.0-rc.37 🔖 2020-08-14 16:38:00 +03:00
README.md Update README.md 2020-08-14 17:45:41 -04:00
tsconfig.json chore: migrate tslint -> eslint 2020-03-17 11:52:33 +02:00
tsconfig.lib.json chore: skipLibCheck 2020-07-13 11:29:53 +03:00
tslint.json chore: fix tslint and tests 2020-03-16 19:15:40 +02:00
webpack.config.ts chore: upgrade deps 2020-07-25 20:15:14 +03:00

ReDoc logo

ReDoc transforms your OpenAPI definition into comprehensive and interactive documentation, fast.

Build Status Coverage Status dependencies Status devDependencies Status npm License npm Docker Build Status

The current ReDoc version is 2.0. For older version please see the v1.x branch.

What's In This Document

Demo

ReDoc live demo

Features

All of these features are available in our open source community edition.

  • Deploy extremely fast via CDN, npm, CLI, or Docker.
  • Bundle your docs into a zero-dependency HTML file (when using redoc-cli).
  • Integrate with any React app, with client or server-side rendering.
  • Take full advantage of OpenAPI 2.0/3.0 features, from discriminator to allOf.

  • Use interactive documentation for nested objects



  • Include code samples (via vendor extension)



  • Get a fully responsive, three-panel design out of the box (with menu/scrolling synchronization)
  • Integrate your API Introduction into the side menu (with support for deep linking)
  • Create high-level groupings in the side menu with the x-tagGroups vendor extension
  • Match your docs and your brand by using the theme option

Premium Features

These features are availale in our hosted or on-premise premium edition.

  • SEO Friendly URLs
  • 10x Page Load Speed
  • 'Try It' API console
    • Multiple Servers
    • OAS3 security schemes
  • Enhanced Search
  • Additional Theming Control
  • Embedded Markdown

Live Examples

Roadmap

  • OpenAPI v3.0 support
  • performance optimizations
  • better navigation (menu improvements + search)
  • React rewrite
  • docs pre-rendering (performance and SEO)
  • use redoc-cli under the hood
  • address accessibility issues
  • add support for links (OpenAPI v3)
  • add x-webhooks support

Getting Started

Do you need to create, contribute to, or split an OpenAPI definition? We created create-openapi-repo just for you.

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">
    <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.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.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 npm:

npm i redoc

or using yarn:

yarn add redoc

2. Reference redoc script in HTML

For CDN:

<script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"> </script>

For npm:

<script src="node_modules/redoc/bundles/redoc.standalone.js"> </script>

3. Add <redoc> element to your page

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

4. Enjoy 😄

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@^4.2.0 styled-components core-js

Import RedocStandalone component from 'redoc' module:

import { RedocStandalone } from 'redoc';

and use it somewhere in your component:

<RedocStandalone specUrl="url/to/your/spec"/>

or

<RedocStandalone spec={/* spec as an object */}/>

Also you can pass options:

<RedocStandalone
  specUrl="http://rebilly.github.io/RebillyAPI/openapi.json"
  options={{
    nativeScrollbars: true,
    theme: { colors: { primary: { main: '#dd5522' } } },
  }}
/>

Here are detailed options docs.

You can also specify onLoaded 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

<RedocStandalone
  specUrl="http://rebilly.github.io/RebillyAPI/openapi.json"
  onLoaded={error => {
    if (!error) {
      console.log('Yay!');
    }
  }}
/>

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 http://petstore.swagger.io/v2/swagger.json, but you may change this URL using environment variable SPEC_URL:

docker run -p 8080:80 -e SPEC_URL=https://api.example.com/openapi.json redocly/redoc

ReDoc CLI

redoc-cli allows you to run a local server that renders your spec with ReDoc, and to bundle ReDoc and your spec into a zero-dependency HTML file.

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:

<redoc> options object

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

  • disableSearch - disable search indexing and search box.
  • 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.
  • 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.
  • 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 '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
  • 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 false.
  • 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 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.
  • suppressWarnings - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
  • payloadSampleIdx - if set, payload sample will be inserted at this index or last. Indexes start from 0.
  • theme - ReDoc theme. Not documented yet. For details check source code: theme.ts.
  • 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!

Advanced usage of standalone version

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

Redoc.init(specOrSpecUrl, options, element, callback?)
  • specOrSpecUrl is either JSON object with specification or an URL to the spec in JSON or YAML format
  • 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 also on errors with error as the first argument
Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
  scrollYOffset: 50
}, document.getElementById('redoc-container'))

Releases

Important: all the 2.x releases are deployed to npm and can be used via jsdeliver:

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

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

Development

Want to help us build ReDoc? Awesome! Please read our Contributing Guide first.