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>
<html>
<head>
<meta charset="utf-8">
<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
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';
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>