Redocly / Redoc

<div align="center">

Learn what's new in Redoc 3.x →

Generate beautiful API documentation from OpenAPI, AsyncAPI, and GraphQL

</div>

About Redoc

Redoc is an open source tool for generating documentation from OpenAPI (formerly Swagger), AsyncAPI, and GraphQL 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.

<img alt="Redoc demo" src="https://raw.githubusercontent.com/Redocly/redoc/main/images/redoc-layouts.gif">

Live demo

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

A version of the Redocly Cafe API is displayed by default. To test it with your own API 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.2, OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0
• Support for AsyncAPI 3.x and GraphQL (SDL) — the format is detected from the document
• MCP (Model Context Protocol) server documentation with the x-mcp specification extension
• Improved built-in search
• Copy, Open in ChatGPT, and Open in Claude actions on every page to work with the docs in your AI assistant
• Dark mode and theming with CSS variables
• 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 React
• Code samples support (with the x-codeSamples specification extension) <br>

Usage

Redoc Community Edition is available as an HTML tag, a React component, and via the Redocly CLI (also distributed as a Docker image).

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="https://example.com/openapi.yaml"></redoc>
    <script type="module" src="https://cdn.redoc.ly/redoc/v3.x/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, an AsyncAPI definition, or a GraphQL schema. The JavaScript library can also be installed locally using npm and served from your own server, see the HTML deployment documentation for more details.

Use the React component

import { RedocStandalone } from 'redoc';

<RedocStandalone specUrl="https://example.com/openapi.yaml" />;

More usage options

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

Redoc vs. hosted Redoc

Redoc is Redocly's community-edition product. Looking for something more? We also offer Redoc with support for specifications like SOAP and additional features including:

• Try-it panel (Replay)
• Automated code samples
• Mock server
• Feedback widgets
• Role-based access control
• Full customization
• Lint

Documentation and resources

• Realm + Reunite - we take care of the hosting, which includes everything you need for documentation.
• Redoc - detailed documentation for this open source project
• Command-line interface to bundle your docs into a web-ready HTML file
• API linting, bundling, and much more with open source Redocly CLI

Showcase

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

• Rebilly
• Docker Engine
• Zuora
• Discourse
• APIs.guru
• BoxKnight
• Quaderno API

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-badges - specify operation badges
• x-enumDescriptions - list of the enum values and descriptions to include in the documentation
• 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-mcp - document MCP (Model Context Protocol) servers, their tools and capabilities
• x-servers - ability to specify different servers for API (backported from OpenAPI 3.0)