or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddistribution.mdindex.mdplugins.mdsystem.md
tile.json

index.mddocs/

Swagger UI

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