Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-26 18:43:43 +03:00
Code Issues Packages Projects Releases Wiki Activity
📘 OpenAPI/Swagger-generated API Reference Documentation
832 Commits 13 Branches 225 Tags 86 MiB
TypeScript 98.1%
JavaScript 0.8%
Shell 0.4%
HTML 0.4%
Dockerfile 0.3%
9e661c4a7d
Go to file
Roman Hotsiy 9e661c4a7d
build module + bundle only on tags: now working
2016-11-02 12:27:02 +02:00
build remove unused import from webpack config 2016-11-01 16:59:29 +02:00
demo Add description for securityDefinitions 2016-11-01 10:08:54 +02:00
docs Security definitions docs 2016-10-31 12:32:17 +02:00
lib Fix content scrolling on language switch (#130) 2016-11-02 11:37:33 +02:00
manual-types Fix npm start on windows, fixes #119, #118 2016-09-28 00:30:33 +03:00
tests remove too big spec from e2e test 2016-11-01 17:23:51 +02:00
.eslintignore Updated eslint 2015-12-12 22:10:59 +02:00
.gitignore Move to webpack + AoT compilation ✨ 2016-08-28 21:46:10 +03:00
.npmignore prepare for npm publish 2016-01-12 23:36:23 +02:00
.travis.yml build module + bundle only on tags: now working 2016-11-02 12:27:02 +02:00
bower.json Add additional keywords 2016-02-24 18:25:49 +02:00
CHANGELOG.md Update CHANGELOG 2016-10-14 13:20:17 +03:00
docker-compose.yml Add Docker development environment 2016-11-01 11:56:06 -07:00
karma.conf.js Ignore changes (watcher) during tests 2016-08-29 12:05:44 +03:00
LICENSE Update LICENSE 2015-10-30 07:56:43 -05:00
package.json fix unit tests 2016-11-02 10:40:06 +02:00
protractor.conf.js fix IE detection in protractor 2016-08-29 01:05:34 +03:00
README.md Merge pull request #132 from bfirsh/docker-development-environment 2016-11-01 23:32:40 +02:00
tsconfig.json Enable noEmitHelpers in tsconfig 2016-10-31 19:27:59 +02:00
tslint.json Enabled a few codelyzer rules 2016-10-23 20:36:34 +03:00

README.md

ReDoc

OpenAPI/Swagger-generated API Reference Documentation

Build Status Coverage Status Tested on APIs.guru dependencies Status devDependencies Status Stories in Ready

npm Bower License

Browser Compatibility

ReDoc demo

Live demo

Features

  • Extremely easy deployment
  • It’s free and open-source project under MIT license
  • The widest OpenAPI features support (yes, it supports even discriminator)
  • Neat 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.

Roadmap

  • docs pre-rendering (performance and SEO)
  • ability to simple customization
  • built-in API Console

Releases

We host latest and all the previous ReDoc releases on GitHub Pages-based CDN:

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 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://rebilly.github.io/ReDoc/releases/latest/redoc.min.js"> </script>
  </body>
</html>

That's all folks!

1. Install ReDoc (skip this step for CDN)

Install using bower:

bower install redoc

or using npm:

npm install redoc --save

2. Reference redoc script in HTML

For CDN:

<script src="https://rebilly.github.io/ReDoc/releases/latest/redoc.min.js"> </script>

For bower:

<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

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-nullable - mark schema param as a nullable

<redoc> tag attributes

  • 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);
  • suppress-warnings - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
  • hide-hostname - if set, the protocol and hostname is not shown in the method definition.

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 <redoc> tag attribute names as the keys, e.g.:

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

Development

Running local dev-server

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

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