Code Monkey home page Code Monkey logo

redoc's Introduction

Redoc logo

Generate beautiful API documentation from OpenAPI

npm License

bundle size npm jsDelivr status

About Redoc

Redoc is an open source tool for generating documentation from OpenAPI (formerly Swagger) definitions.

By default Redoc offers a three-panel, responsive layout:

  • The left panel contains a search bar and navigation menu.
  • The central panel contains the documentation.
  • The right panel contains request and response examples.

Redoc demo

Live demo

If you want to see how Redoc renders your OpenAPI definition, you can try it out online at https://redocly.github.io/redoc/.

A version of the Swagger Petstore API is displayed by default. To test it with your own OpenAPI definition, enter the URL for your definition and select TRY IT.

Redoc features

  • Responsive three-panel design with menu/scrolling synchronization
  • Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0
  • Ability to integrate your API introduction into the side menu
  • High-level grouping in side menu with the x-tagGroups specification extension
  • Simple integration with create-react-app
  • Code samples support (with vendor extension)
    code samples in action

Usage

Redoc is provided as a CLI tool (also distributed as a Docker image), HTML tag, and React component.

Generate documentation from the CLI

If you have Node installed, quickly generate documentation using npx:

npx @redocly/cli build-docs openapi.yaml 

The tool outputs by default to a file named redoc-static.html that you can open in your browser.

Redocly CLI does more than docs; check it out and add linting, bundling, and more to your API workflow.

Add an HTML element to the page

Create an HTML page, or edit an existing one, and add the following within the body tags:

    <redoc spec-url="http://petstore.swagger.io/v2/swagger.json"></redoc>
    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>

Open the HTML file in your browser, and your API documentation is shown on the page.

Add your own spec-url to the <redoc> tag; this attribute can also be a local file. The JavaScript library can also be installed locally using npm and served from your own server, see the HTML deployment documentation for more details.

More usage options

Check out the deployment documentation for more options, and detailed documentation for each.

Redoc vs. Redocly API Reference

Redoc is Redocly's community-edition product. Looking for something more? We also offer hosted API reference documentation with additional features including:

  • Try-it console
  • Automated code samples
  • Pagination
  • Extra theme options

Documentation and resources

Showcase

A sample of the organizations using Redocly tools in the wild:

Pull requests to add your own API page to the list are welcome

Configuration

Redoc is highly configurable, see the configuration documentation for details.

OpenAPI specification extensions

Redoc uses the following specification extensions:

  • x-logo - is used to specify API logo
  • x-traitTag - useful for tags that refer to non-navigation properties like Pagination, Rate-Limits, etc
  • x-codeSamples - 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
  • x-additionalPropertiesName - ability to supply a descriptive name for the additional property keys
  • x-summary - for Response object, use as the response button text, with description rendered under the button
  • x-extendedDiscriminator - in Schemas, uses this to solve name-clash issues with the standard discriminator
  • x-explicitMappingOnly - in Schemas, display a more descriptive property name in objects with additionalProperties when viewing the property list with an object

Releases

The README for the 1.x version is on the v1.x branch.

All the 2.x releases are deployed to npm and can be used with Redocly-cdn:

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

Development

see CONTRIBUTING.md

redoc's People

Contributors

adamaltman avatar alexvarchuk avatar anastasiia-developer avatar andriyl avatar bfirsh avatar brendo avatar brushmate avatar cesarlevel avatar dependabot[bot] avatar hcloward avatar ivangoncharov avatar jderusse avatar kedashoe avatar khorolets avatar knidarkness avatar leocete avatar lornajane avatar m-mohr avatar marshevskyy avatar mike-stead-deltatre avatar nanov avatar oprysk avatar romanhotsiy avatar romanpidkostelnyi avatar stasiukanya avatar swapnilogale avatar tatomyr avatar waldyrious avatar zakcodes avatar zalesky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

redoc's Issues

Group operation parameters by type

Currently all parameters dump together in one list.
It should be separate lists for different parameter type, like: header, body, query, path, etc.

Relatively slow loading on IE11/Edge

On big schemas IE11/Edge works slower relative to other browsers.

The key bottleneck is generation a lot of ui elements for schema representations

Cleanup bower package

Currently Bower package has to many unneeded files and dirs:

$ ls bower_components/redoc/ -1
bower.json
dist
docs
gulpfile.js
karma.conf.js
LICENSE
package.json
protractor.conf.js
README.md
system.config.js

Render JsonSchema constraints

  • readOnly
  • minLength
  • maxLength
  • pattern
  • minItems
  • maxItems
  • multipleOf
  • defaults
  • file payload
  • readOnly - don't show readOnly fields in request schema
  • No need to mark readOnly in response

to be continued...

x-environments

Idea of sandbox, live, integration, test, and other environments.

Show supported mime types for form parameters

From Swagger 2.0 spec:

Used to describe the payload of an HTTP request when either application/x-www-form-urlencoded, multipart/form-data or both are used as the content type of the request

It's good to show which mime types supported for 'form' parameters in this particular method.

Demo with non-default swagger file provide incorrect persistent links

Add in-page search with result highlighting (feature request)

It would be great to implement an in-page search with results highlighting similar to something available here: http://docs.fidor.de (just enter the word "unique" within the search input field and click on one of the found references)

If you look at http://docs.fidor.de/javascripts/all.js there are a lot of open source JavaScript libraries that helps to implement search and highlight the results, like:

Looks like it is possible to implement an in-page search with support from those libraries that would add a lot of credits to the wonderful ReDoc project! This may become a killing feature of the project ;)

Thank you in advance!

allOf works incorrect

id:
  description: The customer identifier string
  readOnly: true
  allOf:
    - $ref: "#/definitions/ResourceId"

throws error but it is correct definition

API Console feature

Implement API Console functionality.

Each method in ReDoc will have a button: “Try this method” which will open interactive console modal window.

There is the list of key features that should be implemented in the first version:

  • Ability to send GET, POST, PUT, DELETE, UPDATE requests
  • Ability to input/use/save authorization credentials
  • Show UI for easy entering parameters for path, headers, query and body (payload) parameters
  • UI should show selectbox for enums, checkboxes for boolean, text input for other simple types
  • Request should be validated before send according to OpenAPI spec
  • Support different environments (e.g. sandbox, dev, testing, etc) through OpenAPI vendor extension (each env will have unique base url and description) + ability to set default env specially for API-console
  • For most parts response will be shown “as is”. JSON response will be only prettified (with possibility of collapsing). The other responses will be represented as strings.
  • Show response headers that are documented in swagger. HTTP response headers that are not documented will be hidden under “Show undocumented response headers” button

Show errors and warnings in the top of the page

As suggested by @darklynx in #6

Possibility to configure displayed error level (warnings/errors), possibility to disable any warnings/errors.
Also show general errors (loading, parsing error)

  • general errors (404 while loading file, parsing error)
  • internal errors
  • warnings

redoc-cli: test script to run on user-supplied openapi spec

It would be useful to have script or tool to run in browser tests on user's Swagger spec.
It could be as simple as running a headless browser and check that there is no errors or warnings.
Would be the ideal test to integrate into CI just before deploying Swagger spec.
Important thing is to output banner which explains that this errors could be unrelated to Swagger spec but purely ReDoc issues and if so ask user to open issue in ReDoc repo.

Extend tests

Need move some of removed unit tests to e2e:

  • click on menu item should scroll to element
  • scroll down/up should update active item in menu
  • expand schema
  • discriminator buttons
  • expand examples
  • permanent links

Also need to add unit tests for services

Feature: synchronize code samples

If some language was selected for an operation this language should be automatically selected for all other operations (where it is specified)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.