Examples & Demos

List of all examples

Basic (DEMO)

Just copy the below code and save it in an html file. Then open it using a browser 
<!doctype html> <!-- Important: must specify -->
<html>
  <head>
    <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 characters -->
    <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
  </head>
  <body>
    <rapi-doc
      spec-url = "https://petstore.swagger.io/v2/swagger.json"
    > </rapi-doc>
  </body>
</html>

Dark Theme (DEMO)

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme = "dark"
>
</rapi-doc>

Read Mode (DEMO)

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  render-style = "read"
>
</rapi-doc>

Schema Style: Tabular (DEMO)

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme = "dark"
  schema-style="table"
>
</rapi-doc>

Change Header Color With Dark Theme (DEMO)

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  header-color="#2d87e2"
  theme = "dark"
>
</rapi-doc>

Integrate with other HTML document - No <iframe> (DEMO)

<rapi-doc
  spec-url = "https://petstore.swagger.io/v2/swagger.json"
  theme = 'dark'
  show-header = 'false'
  show-info = 'false'
  allow-authentication ='false'
  allow-server-selection = 'false'
  allow-api-list-style-selection ='false'
  theme = 'dark'
  render-style = "read"
>
</rapi-doc>

Change Font (DEMO)

<head>
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>

<body>
  <rapi-doc
    spec-url = "https://petstore.swagger.io/v2/swagger.json"
    regular-font = "Nunito"
    render-style = "read"
  >
  </rapi-doc>
</body>

Change Logo (DEMO)

<rapi-doc
  spec-url = "https://api.apis.guru/v2/specs/googleapis.com/youtube/v3/openapi.yaml"
  primary-color = "#CC0000"
  render-style = "read"
>
  <img
    slot="nav-logo"
    src="https://img.icons8.com/color/48/000000/youtube-play.png"
  />
</rapi-doc>

Add HTML content inside the spec (DEMO)

<rapi-doc spec-url="https://petstore.swagger.io/v2/swagger.json">

  <!-- content at the top -->
  <p> This is an example of adding external HTML content. </li>
  <p> You may add: </li>
  <ul>
    <li> Tables </li>
    <li> Text </li>
    <li> Images </li>
    <li> Links </li>
    <li> Any HTML content </li>
  </ul>

  <!-- content at the bottom -->
  <p slot="footer"> This content will apear at the bottom </p>

</rapi-doc>

Mix your own HTML (DEMO)

The below example adds a single click authorization functionality to swagger's petstore spec.
(Look for the blue button and the text-box on the header which is added by the below html) 
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>
  .btn{
    width: 90px;
    height: 32px;
    font-size:13px;
    background-color: #47AFE8;
    color: #fff;
    border: none;
    margin: 0 2px;
    border-radius: 2px;
    cursor:pointer;
    outline:none;
  }
  .txt{
    width: 100px;
    height: 30px;
    font-size:13px;
    background-color: transparent;
    border: 1px solid #47AFE8;
    color: #fff;
    padding:0 8px;
    margin: 0 2px;
    border-radius: 2px;
    outline:none;
  }
  rapi-doc{
    width:100%;
  }
</style>

<script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
<script>
  function setApiKey(){
    const docEl = document.getElementById('thedoc');
    const keyInputEl = document.getElementById('key-val-input');
    docEl.setAttribute('api-key-name','api_key');
    docEl.setAttribute('api-key-location','header');
    docEl.setAttribute('api-key-value',keyInputEl.value);
  }
</script>
</head>
<body>

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  allow-authentication ="false"
>
  <!--
    below html is custom html that adds an input field and a button in header
    on clicking the button the 'api-key-value' is set to the value in input box
  -->
  <div slot='header' style='display:flex; margin:0 16px;'>
    <input class='txt' id='key' type='text' >
    <button class='btn' onclick='setApiKey()' > Login </button >
  </div>
</rapi-doc>

</body>
</html>

Playground - change attributes using JavaScript   DEMO