📘 OpenAPI/Swagger-generated API Reference Documentation
Go to file
2016-03-14 15:29:27 -04:00
build use deploy-to-gh-pages module 2016-02-23 11:35:32 +02:00
demo JSONSchema tree and table 2016-03-14 15:29:27 -04:00
docs doc styling fixes 2016-02-01 19:49:57 +02:00
lib JSONSchema tree and table 2016-03-14 15:29:27 -04:00
tests Exclude incorrect spec from e2e tests 2016-02-22 16:12:17 +02:00
.codeclimate.yml fix codeclimate config 2015-12-26 19:47:35 +02:00
.eslintignore Updated eslint 2015-12-12 22:10:59 +02:00
.eslintrc IE10, IE9 Fixes 2016-02-10 13:19:50 +02:00
.gitignore Setup coverage and coveralls 2015-12-13 12:37:58 +02:00
.npmignore prepare for npm publish 2016-01-12 23:36:23 +02:00
.travis.yml use deploy-to-gh-pages module 2016-02-23 11:35:32 +02:00
bower.json Add additional keywords 2016-02-24 18:25:49 +02:00
gulpfile.js Initial configuration + build tasks 2015-10-03 12:38:41 +03:00
karma.conf.js Upgrade to Angular 2.0.0-beta.3 + refactoring 2016-02-11 13:38:44 +02:00
LICENSE Update LICENSE 2015-10-30 07:56:43 -05:00
package.json v0.6.6 2016-03-13 02:24:00 +02:00
protractor.conf.js Uncomment firefox in protractor conf 2016-01-21 18:54:13 +02:00
README.md Fix link in README 2016-03-13 02:48:17 +02:00
system.config.js reinstall angular beta.6 due to failing build on travis 2016-02-16 20:20:11 +02:00

ReDoc

Build Status Coverage Status Code Climate David Stories in Ready

npm Bower License

Browser Compatibility

Swagger-generated API Reference Documentation

Live demo

Deployment

tl;dr

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

    <!--
    ReDoc uses font options from the parent element
    So override default browser styles
    -->
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #333;
      }
    </style>
  </head>
  <body>
    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json'>
    </redoc>
    <script src="bower_components/redoc/dist/redoc.min.js"> </script>
  </body>
</html>

1. Install redoc

Install using bower:

bower install redoc

or using npm:

npm install redoc --save

Alternatively you can just download redoc.min.js.

2. Reference redoc script in HTML

Then reference redoc.min.js in your HTML page:

<script src="bower_components/redoc/dist/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 😄

Configuration

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

Options

  • spec-url - relative or absolute url to your spec file
  • 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).

Advanced usage

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

Redoc.init(specUrl, options)

options is javascript object with camel-cased version of options names as the keys. For example:

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

Running locally

  1. Clone repository git clone https://github.com/Rebilly/ReDoc.git
  2. Go to the project folder cd ReDoc
  3. Install node modules and front-end dependencies npm install npm run jspm-install
  4. (optional) Replace demo/swagger.json with your own schema
  5. Start the server npm start
  6. Open http://localhost:9000