node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


API Connect Explorer

Getting Started

To get up and running:

npm install
npm start

This will install, build, and then run the API Explorer.


API Connect Explorer can be configured either via binding properties (if the consuming application is Angular), or by a global variable apiConnectExplorer:

  apis: [<array_of_OpenAPI_files_as_json>], // required
  apps: [{
    name: string,
    redirectUri: string,
    credentials: [{
      id: string,
      description: string
  }], // optional
  options: {
    fixedCredentials: {
      clientId; string,
      clientSecret: string
    }, // optional
    menuView: 'tags' | 'operations', // defaults to operations
    nestedTags: boolean, // defaults to false
    tryIt: boolean, //defaults to true
    languages: string[], // defaults to curl, ruby, python, php, java, node, go and swift
    defaultLanguage: string, // defaults to the first in the language array
    showSoapCodeSnippets: boolean, // defaults to true
    showSoapSwaggerDownload: boolean, // defaults to true
    showApiVersion: boolean, // defaults to true
    showCorsWarnings: boolean, // defaults to true
    apiImageUrl: string, // optional
    loginLink: string, // optional
    loggedIn: boolean, // optional
    deferBootstrap: boolean, // optional
    proxyUrl: string // optional

fixedCredentials: provide a clientId and / or a clientSecret up-front, and prevent the relevant inputs being rendered

authentication: provide a default username and / or password up-front.

apps: an array of applications defining credentials and redirect URIs. If provided, they will be represented as a selectable option to the user to save entering details in each operation.

menuView: a choice of 'tags' or 'operations' - the left hand menu will either group operations by tag, or render them as a simple list in the order in which they are defined in the OpenAPI document.

nestedTags: if menuView is set to 'tags', setting this option to true will cause the array of operation tags to be treated as a nested heirarchy. An operation tagged with ['one', 'two', 'three'] will be rendered one -> two -> three. Set to false, the operation would appear in each tag category one, two, and three.

tryIt: controls whether or not to show the inline test tool

languages: an array of languages for which to generate code samples. Supported languages are curl, ruby, python, php, java, node, go, swift, c, and csharp.

defaultLanguage: default code language to display

showSoapCodeSnippets: show code snippets for SOAP APIs

showSoapSwaggerDownload: show swagger download for SOAP APIs

showApiVersion: shows the version number for an API

showCorsWarnings: shows warnings when CORS errors are suspected

apiImageUrl: URL for an image that represents the API

loginLink: if users are required to log in to your system in order to access their client credentials, specify the login link here. it will then be displayed prominently above the credentials section if the user is not logged in.

loggedIn: set this to true if the user is logged in and any provided login link should be suppressed.

deferBootstrap: prevent automatic bootstrapping by angular. Bootstrapping will need to be carried out by the application.

proxyUrl: set this to the relative URL of a proxy service. The test tool will invoke the service with a body which follows this structure:

  method: 'PUT',
  url: 'https://somewhere?query=true',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  body: '{"foo":"bar"}'

The body property can be not present if the request does not have a body.

The proxy should just pass any response (success or error) straight through, unmodified. To avoid a cross origin request the proxyUrl should be a relative URL to where a proxy service is running.

Changing Configuration

Configuration can be modified at any time. If the configuration is specified at the global level, a manual event trigger is required:

dispatchEvent(new Event('apiConnectExplorerUpdate'));