openapi-explorer

OpenAPI Explorer - Currently Under Development

Web Component Custom Element for Open-API spec viewing, with automatic integration for React and Vue.

(This project was forked from RapiDoc, and provides a cleaner skimmed down version of the functionality which works out of the box!)

Get started now

npm i openapi-explorer

Quick start example

• import 'openapi-explorer';

<openapi-explorer :id="apiExplorer" :spec-url="openapiSpecificationUrl">
  <div slot="overview">
    <h1>The API</h1>
  </div>
</openapi-explorer>

Features

• OpenAPI 3.0
• Works with any framework
• View resources, models, and directly make API calls
• Better Usability,
  • Request fields are pre-populated with default data
  • Takes only one click to make an API call
• Branding and Personalization features makes it easy to follow any style guide
  • Fully customizeable theme
• Plenty of customization options
  • Add external contents at the top and bottom of the document, you may add images, link, text, forms etc
  • Allows disabling API calling feature
  • All properties are reactive
  • Style the element with standard css (change padding, position, border, margin )
• Responsive so it works on mobile
• Lightweight and fast

Documentation

Mutate request and responses

requestInterceptor(event) {
  Object.assign(event.detail.request.options.headers, { Authorization: `Bearer ${userToken}` });
},
responseInterceptor(event) {
  if (event.detail.response?.status === 401) {
    this.enableSignupModal = true;
  }
}

Dynamically update spec example

The user's id into the specification property to be used automatically in the UI

onSpecLoaded(data) {
  const updateTag = tag => {
    const picker = value => {
      if (!value || typeof value !== 'object') {
        return value;
      }

      if (value.name === 'userId') {
        value.schema = Object.assign({ default: userId }, value.schema);
        return value;
      }

      return undefined;
    };
    return lodash.cloneDeepWith(tag, picker);
  };

  data.detail.tags = data.detail.tags.map(tag => updateTag(tag));
}

Examples

Examples and Test cases

Build Process

# Clone / Download the project then
npm install

# build will generate openapi-explorer.min.js
npm run build 

Contribution

Contributions Guide