OpenAPI Spec Viewer

Features

Quickstart (Use from CDN)

Just copy the below script in an html, and open it in a browser !!!

<!doctype html> <!-- Important: must specify, else rendering will be effected -->
<html>
  <head>
    <meta charset="utf-8"> <!-- Important: The Custom element uses utf8 charecters -->
    <script src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
  </head>
  <body>
    <rapi-doc 
      spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json" 
    ></rapi-doc>
  </body>  
</html>

Demo & Examples

Use in a HTML/JS based project

npm install --save rapidoc 

#only needed you dont have a local webserver
npm install http-server -g 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="module" src="./node_modules/rapidoc/dist/rapidoc-min.js"></script>
</head>
<body>
    <rapi-doc 
      spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json" 
    ></rapi-doc>
</body>
</html>
  http-server -p 9000

Attributes

Attribute Description Default
spec-url url of the OpenAPI spec to view (empty)
server API Server URL which will be used while trying out the APIs. This can be changed later using the UI (empty)
api-key-name Name of the API key that will be send while trying out the APIs (empty)
api-key-value Value of the API key that will be send while trying out the APIs Authorization
api-key-location determines where you want to place the key. allowed values are 'header' or 'query' header
show-try 'TRY' feature allows you to make REST request to the API server. To disable this feature set it to false true
show-authentication Authentication feature allows the user to set http(basic & bearer) or api-key which is typically a token(or JWT) sent using the request-header or query-string. You may supply this information using api--key-???? attributes too. To hide the authentication section set it to false true
show-info show/hide the documents info section true
show-header true, false true
heading-text Heading Text on top-left corner (empty)
header-color Hex color code on various controls such as buttons, tabs #444444
primary-color Hex color code on various controls such as buttons, tabs #FF791A
regular-font Font Name(s) to be used for regular text rapidoc, Helvetica, Arial
mono-font Font Name(s) to be used for monospaced text Monaco, 'Andale Mono', 'Roboto Mono'
theme light, dark light
layout request/response placement (row, column) row

Slots

Slot Name Description
(default) any content placed inside <`rapi-doc`> will be shown under the header
logo use this slot to replace the logo
footer The conents of this slot will appear at the bottom of the spec