Use Redoc in HTML

To render API documentation in an HTML page, start with the template below and replace the spec-url value with the local file path or URL of your API description.

Show Code example

<!DOCTYPE html>
<html>
  <head>
    <title>Redoc</title>
    <!-- needed for adaptive design -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">

    <!--
    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://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
  </body>
</html>

Open the HTML file in your browser to see the HTML documentation rendering.

Configure Redoc

Redoc is highly configurable, find a full list of configuration options on the dedicated page. To configure Redoc in HTML, add the property names to the HTML tag:

<redoc 
  spec-url='http://petstore.swagger.io/v2/swagger.json' 
  required-props-first=true
></redoc>

Theme configuration

For theme configuration, supply options as a JSON string:

<redoc 
  spec-url='http://petstore.swagger.io/v2/swagger.json'
  required-props-first=true
  theme='{
    "sidebar": {
      "backgroundColor": "lightblue"
    }
  }'
></redoc>

Check out the list of options for theme configuration for more customization options.

Advanced options

The Redoc object

The Redoc object offers an init function:

Redoc.init(specOrSpecUrl, options, element, callback)

Parameters:

specOrSpecUrl: JSON object with OpenAPI definition or file name/URL
options: See the configuration reference
element: Target DOM element
callback(optional): Called after rendering or on error

Example implementation:

Show Example implementation

<!DOCTYPE html>
<html>
  <head />
  <body>
    <H1>Redoc in action</H1>
    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
    <div id="redoc-container"></div>

    <script>
      Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
        "expandResponses": "200,400"
      }, document.getElementById('redoc-container'))
    </script>
  </body>
</html>

Self-host dependencies

CDN
Self-hosted

<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>

First install redoc:

npm install redoc

Then reference locally:

<script src="node_modules/redoc/bundles/redoc.standalone.js"></script>

Documentation Index

​Use Redoc in HTML

​Configure Redoc

​Theme configuration

​Advanced options

​The Redoc object

​Self-host dependencies