RapiDoc - Examples & Demo

Vanilla HTML

Just copy the below code and save it in an html file. Then open it using a browser (you do not need any server) https://codesandbox.io/s/vanilla-js-template-98gc2?file=/index.html

      
        <!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>

If you do not want to depend on the CDN, just download it from there and store it in a place that you can access

In JavaScript Apps (integration with other frameworks)

Install RapiDoc

      
        npm install rapidoc
        // (feel free to use yarn)

You can now use the Web Components like any other HTML tag. (Just do an import for it to be recognized by the browser)

Usage in React

https://codesandbox.io/s/upbeat-sea-4tfo7?file=/src/App.js

      
        import React, { Component } from 'react';
        import 'rapidoc'; // <-- import rapidoc

        export class MyApiDoc extends Component {
          render() {
            return <rapi-doc 
              spec-url = "https://petstore.swagger.io/v2/swagger.json" 
              render-style = "read"
              style = {{ height: "100vh", width: "100%" }}
            >
            </rapi-doc>
          }
        }

Usage in Vue (Single File Component)

https://codesandbox.io/s/nostalgic-sky-jlts7?file=/src/App.vue

      
        <template>
          <rapi-doc 
            spec-url = "https://petstore.swagger.io/v2/swagger.json" 
            render-style = "read" 
            style = "height:100vh; width:100%"
          > </rapi-doc>
        </template>

        <script>
          import 'rapidoc';
        </script>