@dhcode/openapi-viewer-element
v0.2.2
Published
Webcomponent to display Swagger and OpenAPI RESTful API specifications.
Downloads
7
Maintainers
dhcodeReadme
OpenAPI Viewer Web Component
This Web component contains an UI to show API documentation based on Swagger v2 and OpenAPI v3 RESTful API specifications.
This UI is inspired by the Swagger UI project, but is more focused on doing API requests.
Usage
You can install it and use it from node_modules or include to from a CDN.
npm install @dhcode/openapi-viewer-element
<oav-openapi-viewer specurl="https://petstore.swagger.io/v2/swagger.json">
<script src="node_modules/@dhcode/openapi-viewer-element/openapi-viewer-element-es2015.js" type="module"></script>
<script src="node_modules/@dhcode/openapi-viewer-element/openapi-viewer-element-es5.js" nomodule defer></script>You can use any Swagger v2 json file or OpenAPI v3 json or yaml file to load a specification.
CDN Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>API Docs</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<oav-openapi-viewer-element
specurl="https://petstore.swagger.io/v2/swagger.json"
settings='{"showRawOperationDefinition":true}'
></oav-openapi-viewer-element>
<script src="//unpkg.com/@dhcode/openapi-viewer-element/openapi-viewer-element-es2015.js" type="module"></script>
<script src="//unpkg.com/@dhcode/openapi-viewer-element/openapi-viewer-element-es5.js" nomodule defer></script>
</body>
</html>Configuration options
See openapi-viewer.settings.ts