tessl/npm-swagger-ui

Interactive web interface for visualizing and testing OpenAPI (Swagger) specifications with built-in request execution capabilities.

—

Pending

Overview

Eval results

Files

Swagger UI

Name: tessl/npm-swagger-ui
Author: tessl

Swagger UI is a comprehensive web-based tool for visualizing and interacting with OpenAPI (Swagger) specifications. It provides an interactive interface that allows developers and API consumers to explore API endpoints, test requests, and understand API structure without requiring implementation code.

Package Information

Package Name: swagger-ui
Package Type: npm
Language: JavaScript (React-based)
Installation: npm install swagger-ui

Core Imports

import SwaggerUI from "swagger-ui";

For CommonJS:

const SwaggerUI = require("swagger-ui");

For standalone/browser usage:

<script src="https://unpkg.com/swagger-ui-dist@5.28.1/swagger-ui-bundle.js"></script>

Basic Usage

import SwaggerUI from "swagger-ui";

// Initialize with OpenAPI specification URL
const ui = SwaggerUI({
  dom_id: '#swagger-ui',
  url: 'https://petstore.swagger.io/v2/swagger.json'
});

// Initialize with specification object
const ui = SwaggerUI({
  dom_id: '#swagger-ui',
  spec: {
    openapi: "3.0.0",
    info: { title: "My API", version: "1.0.0" },
    paths: { /* ... */ }
  }
});

Architecture

Swagger UI is built around several key components:

Core System: Plugin-based architecture with Redux state management
Rendering Engine: React-based UI components with customizable layouts
Plugin System: Extensible plugin architecture with 22+ built-in plugins
Configuration: Comprehensive options for customizing behavior and appearance
Distribution Formats: Multiple build targets for different deployment scenarios

Capabilities

Main Constructor

Primary initialization function for creating Swagger UI instances with comprehensive configuration options.

function SwaggerUI(options: SwaggerUIOptions): SwaggerUISystem;

interface SwaggerUIOptions {
  // Core configuration
  dom_id?: string;
  domNode?: Element;
  spec?: object;
  url?: string;
  urls?: Array<{ url: string; name: string }>;
  
  // Display options
  layout?: string;
  docExpansion?: "list" | "full" | "none";
  deepLinking?: boolean;
  displayOperationId?: boolean;
  displayRequestDuration?: boolean;
  
  // Interaction options
  tryItOutEnabled?: boolean;
  supportedSubmitMethods?: string[];
  
  // Plugin system
  presets?: any[];
  plugins?: any[];
  
  // Many additional options...
}

Configuration

Plugin System

Extensible plugin architecture with built-in plugins for authentication, layout, validation, and more.

interface SwaggerUISystem {
  plugins: {
    Auth: AuthPlugin;
    Configs: ConfigsPlugin;
    DeepLinking: DeepLinkingPlugin;
    Err: ErrPlugin;
    Filter: FilterPlugin;
    // 17+ additional plugins
  };
  presets: {
    base: BasePreset;
    apis: ApisPreset;
  };
}

Plugin System

Distribution Packages

Multiple distribution formats for different deployment scenarios including bundled, standalone, and React component versions.

// swagger-ui-dist package exports
interface SwaggerUIDistExports {
  SwaggerUIBundle: typeof SwaggerUI;
  SwaggerUIStandalonePreset: StandalonePreset;
  absolutePath(): string;
  getAbsoluteFSPath(): string;
}

Distribution Packages

System Configuration

Advanced configuration management with type casting, validation, and environment-specific options.

interface SwaggerUIConfig {
  defaults: SwaggerUIOptions;
  merge(target: object, ...sources: object[]): object;
  typeCast(options: object): object;
  typeCastMappings: object;
}

System Configuration

Install with Tessl CLI