OpenAPI UI

A documentation UI and API Console with focus 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.

Demo

It is developed as Angular Library and Angular App.

Current state

This project is in its early stages. You can try it out and see if it works with your API specification.

If you find any issues please report them. Thank you.

Usage of the Web component (custom element)

See Web component README

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

Usage of the Angular Library

See Angular library README

Usage of the Angular App (for development)

git clone https://github.com/dhcode/openapi-ui.git
npm install
npm run start

Open localhost:4200

Browser Compatibility

This project aims to support the most common browsers.

• Chrome
• Firefox
• Safari
• Internet Explorer 11
• Microsoft Edge

Not supported features

• Example values for XML

TODO

• Integrate support for links
• Show generated commandline for curl
• Show generated code for JavaScript and other languages
• Increase test coverage
• Publish library to npm

Other libraries used

• ngx-ace-wrapper + brace + ace to show nicely formatted code
• ngx-markdown + marked to show nicely formatted descriptions, if markdown was used in a specification
• swagger-client to parse specifications and to create HTTP requests based on parameters
• openapi3-ts for OpenAPI specification typings

License

MIT