mirror of https://github.com/Redocly/redoc.git synced 2024-11-22 08:36:33 +03:00

📘 OpenAPI/Swagger-generated API Reference Documentation

api-documentation documentation-generator documentation-tool hacktoberfest openapi openapi3 openapi31 openapi-specification reactjs redoc starred-redocly-repo starred-repo swagger

Go to file

Roman Hotsiy 84f3aee681 Update tests after refactoring		2016-12-25 19:15:24 +02:00
build	Fix minor issue in webpack dev config	2016-12-23 00:40:41 +02:00
demo	Enable lazyRendering for demo-pages	2016-11-30 13:26:56 +02:00
docs	Fix typo	2016-12-08 10:40:00 +01:00
lib	Update tests after refactoring	2016-12-25 19:15:24 +02:00
manual-types	Perfromance fix (tests still failing)	2016-11-30 11:55:37 +02:00
tests	Update tests after refactoring	2016-12-25 19:15:24 +02:00
.eslintignore	Updated eslint	2015-12-12 22:10:59 +02:00
.gitignore	update .gitignore	2016-12-22 01:36:04 +02: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	fix version number in changelog	2016-12-20 10:09:55 +01: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	update dependecies	2016-12-22 01:36:04 +02:00
protractor.conf.js	fix IE detection in protractor	2016-08-29 01:05:34 +03:00
README.md	add expand-responses option	2016-12-14 14:49:02 +02:00
tsconfig.json	disable tsc no-unused checks	2016-12-02 12:11:17 +02:00
tslint.json	Enable more strict checks for linter/tsc	2016-12-02 12:11:16 +02:00

README.md

ReDoc

OpenAPI/Swagger-generated API Reference Documentation

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 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.

Roadmap

performance optimizations
better navigation (menu improvements + search)
ability to simple branding/styling
built-in API Console
docs pre-rendering (performance and SEO)

Releases

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

particular release, e.g. v1.2.0: https://rebilly.github.io/ReDoc/releases/v1.2.0/redoc.min.js
v1.x.x release: https://rebilly.github.io/ReDoc/releases/v1.x.x/redoc.min.js
latest release: https://rebilly.github.io/ReDoc/releases/latest/redoc.min.js [not for production]

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
x-displayName - specify human-friendly names for the menu categories

`<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).
lazy-rendering - 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.
hide-hostname - if set, the protocol and hostname is not shown in the method definition.
expand-responses - specify which responses to expand by default by response codes. Values should be passed as comma-separated list without spaces e.g. expand-responses="200,201". Special value "all" expands all responses by default. Be careful: this option can slow-down documentation rendering time.

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.

README.md Unescape Escape