rapidoc
Version:
RapiDoc - Open API spec viewer with built in console
251 lines (243 loc) • 6.72 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>RapiDoc</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
</head>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const docEl = document.getElementById('thedoc');
docEl.addEventListener('before-try', (e) => {
e.detail.request.headers.append('AAA-BBB', 'CCC DDDD');
});
});
</script>
<body>
<!--
Some sample spec to try
https://api.apis.guru/v2/specs/stripe.com/2019-02-19/swagger.json
https://api.apis.guru/v2/specs/github.com/v3/swagger.json
https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json
https://petstore.swagger.io/v2/swagger.json
https://assets.zuora.com/zuora-documentation/swagger.yaml <<< Large spec with lot of markdown
./specs/petstore_anyof.yaml <<< contains complex one-of with inline primitives and recursive objects
./specs/oneof1.yaml <<< nested oneof
https://cesdev.eng.sonicwall.com/api/q/openapi
-->
<rapi-doc
spec-url = "./specs/temp.yaml"
id="thedoc"
theme = "dark"
render-style="focused"
schema-style="tree"
show-method-in-nav-bar = "true"
use-path-in-nav-bar = "true"
show-components = "true"
show-info = "true"
show-header = "true"
allow-search = "true"
allow-advanced-search = "true"
allow-spec-url-load="false"
allow-spec-file-download="true"
allow-server-selection = "true"
allow-authentication = "true"
update-route="false"
remove-endpoints-with-badge-label-as="one"
match-type="regex"
persist-auth="true"
scroll-behavior="smooth"
allow-try = "false"
show-curl-before-try = "true"
></rapi-doc>
<!--
<rapi-doc-mini
style= "width:600px; padding:0 10px"
id = "thedoc"
spec-url="./specs/code-highlight.yaml"
theme = "light"
schema-style = 'table'
sort-endpoints-by = "method"
layout = "column"
match-paths = "post /code"
paths-expanded = "true"
> </rapi-doc-mini>
<br/>
<rapi-doc-mini
style= "width:600px; padding:0 10px"
id = "thedoc"
spec-url="./specs/code-highlight.yaml"
theme = "light"
schema-style = 'table'
sort-endpoints-by = "method"
layout = "column"
match-paths = "get /code"
> </rapi-doc-mini>
-->
<!--
<rapi-doc
id = "thedoc"
spec-url="./specs/code-highlight.yaml"
theme = "light"
render-style = "view"
schema-style = 'tree'
sort-endpoints-by = "method"
show-info = "false"
show-header = "false"
allow-server-selection = "false"
allow-authentication = "false"
> </rapi-doc>
<rapi-doc
id = "thedoc"
spec-url="https://petstore.swagger.io/v2/swagger.json1"
render-style = "read"
load-fonts = "false"
show-header = "false"
>
<div slot="nav-logo" style="width:100%; display: flex;justify-content: center;">
<button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('schema-style', 'table')" >Table</button>
<button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('schema-style', 'tree')" >Tree</button>
</div>
<div slot="put-/pet" style="width:100%; display: flex;justify-content: center;">
<b style="color:red"> Hello world</b>
</div>
</rapi-doc>
-->
<!--
<rapi-doc id = "thedoc" ></rapi-doc>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
let docEl = document.getElementById("thedoc");
let strSpec = `
{
"openapi": "3.0.1",
"info": {
"title": "My API",
"version": "v1"
},
"paths": {
"/api/Todo/complicated": {
"get": {
"tags": [
"Todo"
],
"summary": "Complicated action.",
"responses": {
"200": {
"description": "Returns a complicated class.",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/ComplicatedClass"
}
}
}
}
}
}
}
},
"components": {
"schemas": {
"Tag": {
"enum": [
0,
1,
2
],
"type": "integer",
"description": "Tag for TodoItem.",
"format": "int32"
},
"InnerEnum": {
"enum": [
1
],
"type": "integer",
"description": "Inner enum.",
"format": "int32"
},
"SecondInnerEnum": {
"enum": [
0
],
"type": "integer",
"description": "Second inner enum.",
"format": "int32"
},
"SecondInnerEnumSecondInnerClass": {
"type": "object",
"properties": {
"innerEnum": {
"allOf": [
{
"$ref": "#/components/schemas/SecondInnerEnum"
}
],
"description": "Second inner enum."
}
},
"additionalProperties": false,
"description": "Second inner class."
},
"InnerClass": {
"type": "object",
"properties": {
"innerEnum": {
"type": "array",
"items": {
"$ref": "#/components/schemas/InnerEnum"
},
"description": "List of inner enums.",
"nullable": true
},
"secondInnerClass": {
"allOf": [
{
"$ref": "#/components/schemas/SecondInnerEnumSecondInnerClass"
}
],
"description": "Second inner class.",
"nullable": true
}
},
"additionalProperties": false,
"description": "Inner class."
},
"ComplicatedClass": {
"type": "object",
"properties": {
"tag": {
"allOf": [
{
"$ref": "#/components/schemas/Tag"
}
],
"description": "Tag."
},
"innerClass": {
"allOf": [
{
"$ref": "#/components/schemas/InnerClass"
}
],
"description": "Inner class.",
"nullable": true
}
},
"additionalProperties": false,
"description": "Complicated class for testing enums."
}
}
}
}
`;
let objSpec = JSON.parse(strSpec);
docEl.loadSpec(objSpec);
})
</script>
-->
</body>
</html>