Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-10 19:06:34 +03:00
Code Issues Packages Projects Releases Wiki Activity
📘 OpenAPI/Swagger-generated API Reference Documentation
1,398 Commits 13 Branches 225 Tags 86 MiB
TypeScript 98.1%
JavaScript 0.8%
Shell 0.4%
HTML 0.4%
Dockerfile 0.3%
e0223494c2
Go to file
Roman Hotsiy e0223494c2
feat: use new Context API for options
2018-03-17 22:04:37 +02:00
.github chore: improve basic benchmark 2018-01-29 13:09:38 +02:00
.vscode chore: use latest RC of typescript 2018-03-16 17:02:12 +02:00
benchmark chore: update all deps to latest 2018-03-17 18:50:55 +02:00
bin chore: various CLI fixes 2018-03-14 08:24:52 +02:00
demo chore: migrate to webpack 4 2018-03-17 17:58:28 +02:00
docs feat: add ignoredHeaderParameters option 2017-09-21 11:36:18 +03:00
e2e chore: disable broken e2e test 2018-03-17 19:13:44 +02:00
src feat: use new Context API for options 2018-03-17 22:04:37 +02:00
.editorconfig Initial React rewrite 2017-10-12 00:01:37 +03:00
.gitignore chore: various CLI fixes 2018-03-14 08:24:52 +02:00
.npmignore chore: various CLI fixes 2018-03-14 08:24:52 +02:00
.travis.yml chore: setup cypress record 2018-03-17 21:09:18 +02:00
CHANGELOG.md chore: Release 2.0.0-alpha.15 🔖 2018-03-17 00:03:27 +02:00
custom.d.ts chore: migrate to webpack 4 2018-03-17 17:58:28 +02:00
cypress.json chore: setup cypress record 2018-03-17 21:09:18 +02:00
docker-compose.yml Use a small docker image (600MB savings) (#271) by @alairock 2017-05-24 12:36:23 +03:00
LICENSE Update LICENSE 2015-10-30 07:56:43 -05:00
package.json feat: use new Context API for options 2018-03-17 22:04:37 +02:00
README.md chore: add bundlesize test + update readme 2018-03-17 19:56:08 +02:00
tsconfig.json chore: migrate to ts-loader 2018-03-17 15:16:56 +02:00
tslint.json refactor: switch to simple Tooltip (🗜 yet another 83kB to bundle size) 2018-02-09 13:41:26 +02:00
webpack.config.ts chore: update all deps to latest 2018-03-17 18:50:55 +02:00
yarn.lock feat: use new Context API for options 2018-03-17 22:04:37 +02:00

README.md

ReDoc logo

OpenAPI/Swagger-generated API Reference Documentation

Build Status Coverage Status Tested on APIs.guru dependencies Status devDependencies Status npm bundle size

npm License

REACT-REWRITE: WORK IN PROGRESS

To try locally run:

yarn install
npm start

ReDoc demo

Live demo

Deploy to Github ReDoc as a service Customization services

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)
  • React rewrite
  • docs pre-rendering (performance and SEO)
  • ability to simple branding/styling
  • built-in API Console

Releases

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

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

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

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://unpkg.com/redoc@2.0.0-alpha.1/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 install redoc --save

2. Reference redoc script in HTML

For CDN:

<script src="https://unpkg.com/redoc@2.0.0-alpha.1/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

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/swagger.json"
  options={{
    nativeScrollbars: true,
    theme: { colors: { main: '#dd5522' } },
  }}
/>

Here are detailed options docs.

ReDoc CLI

You can use redoc cli by installing redoc globally or using npx.

Twe following commans are available:

  • redoc serve [spec] - starts the server with spec rendered with ReDoc. Supports SSR mode (--ssr) and can watch the spec (--watch)
  • redoc bundle [spec] - bundles spec and ReDoc into zero-dependency HTML file.

For more details run redoc --help.

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> options object

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

  • 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!
  • 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);
  • suppressWarnings - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
  • 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.
  • hideHostname - if set, the protocol and hostname is not shown in the operation definition.
  • 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.
  • requiredPropsFirst - show required properties first ordered in the same order as in required array.
  • noAutoAuth - do not inject Authentication section automatically
  • pathInMiddlePanel - show path link and HTTP verb in the middle panel instead of the right one
  • hideLoading - do not show loading animation. Useful for small docs
  • nativeScrollbars - use native scrollbar for sidemenu instead of perfect-scroll (scrolling performance optimization for big specs)
  • theme - ReDoc theme. Not documented yet. For details check source code: theme.ts

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)
  • 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
Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
  scrollYOffset: 50
}, document.getElementById('redoc-container'))

Development

Running local dev-server

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

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