or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

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

plugins.mddocs/

Plugin System

Swagger UI's extensible plugin architecture enables customization of functionality through a comprehensive collection of built-in plugins and support for custom plugins.

Capabilities

Plugin Architecture

Core plugin system structure and registration mechanism.

interface SwaggerUISystem {
  /** Register plugins with the system */
  register(plugins: any[]): void;
  
  /** Get the configured system instance */
  getSystem(): SwaggerUISystem;
  
  /** Render the UI to a DOM node */
  render(domNode: Element, component: string): void;
  
  /** Update system configuration */
  setConfigs(options: object): void;
}

Built-in Plugins

Comprehensive collection of built-in plugins for core functionality.

interface SwaggerUIPlugins {
  /** Authentication and authorization handling */
  Auth: AuthPlugin;
  
  /** Configuration management */
  Configs: ConfigsPlugin;
  
  /** Deep linking functionality for URLs (exported as DeepLining due to source typo) */
  DeepLining: DeepLinkingPlugin;
  
  /** Error handling and display */
  Err: ErrPlugin;
  
  /** Operation filtering capabilities */
  Filter: FilterPlugin;
  
  /** Icon components and management */
  Icons: IconsPlugin;
  
  /** JSON Schema Draft 5 support */
  JSONSchema5: JSONSchema5Plugin;
  
  /** JSON Schema Draft 5 sample generation */
  JSONSchema5Samples: JSONSchema5SamplesPlugin;
  
  /** JSON Schema Draft 2020-12 support */
  JSONSchema202012: JSONSchema202012Plugin;
  
  /** JSON Schema Draft 2020-12 sample generation */
  JSONSchema202012Samples: JSONSchema202012SamplesPlugin;
  
  /** Layout components and management */
  Layout: LayoutPlugin;
  
  /** Logging functionality */
  Logs: LogsPlugin;
  
  /** OpenAPI 3.0 specification support */
  OpenAPI30: OpenAPI30Plugin;
  
  /** OpenAPI 3.1 specification support */
  OpenAPI31: OpenAPI31Plugin;
  
  /** Completion callback handling */
  OnComplete: OnCompletePlugin;
  
  /** Request code snippet generation */
  RequestSnippets: RequestSnippetsPlugin;
  
  /** Specification handling and parsing */
  Spec: SpecPlugin;
  
  /** HTTP client integration */
  SwaggerClient: SwaggerClientPlugin;
  
  /** Utility functions and helpers */
  Util: UtilPlugin;
  
  /** View components and rendering */
  View: ViewPlugin;
  
  /** Legacy view support */
  ViewLegacy: ViewLegacyPlugin;
  
  /** Download functionality */
  DownloadUrl: DownloadUrlPlugin;
  
  /** Syntax highlighting for code blocks */
  SyntaxHighlighting: SyntaxHighlightingPlugin;
  
  /** Version management */
  Versions: VersionsPlugin;
  
  /** Safe rendering utilities */
  SafeRender: SafeRenderPlugin;
}

Plugin Presets

Pre-configured plugin collections for common use cases.

interface SwaggerUIPresets {
  /** Base preset with core functionality */
  base: BasePreset;
  
  /** APIs preset optimized for API documentation */
  apis: ApisPreset;
}

Authentication Plugin

Handles various authentication schemes including OAuth2, API keys, and basic authentication.

interface AuthPlugin {
  /** Configure authentication schemes */
  configureAuth(authDefinitions: object): void;
  
  /** Authorize with specific scheme */
  authorize(auth: object): void;
  
  /** Logout from authentication */
  logout(): void;
  
  /** Get current authorization state */
  getAuthorization(): object;
}

Request Snippets Plugin

Generates code snippets for API requests in multiple programming languages.

interface RequestSnippetsPlugin {
  /** Available code generators */
  generators: {
    curl_bash: { title: "cURL (bash)"; syntax: "bash" };
    curl_powershell: { title: "cURL (PowerShell)"; syntax: "powershell" };
    curl_cmd: { title: "cURL (CMD)"; syntax: "bash" };
  };
  
  /** Generate code snippet for operation */
  generateSnippet(operation: object, language: string): string;
}

Deep Linking Plugin

Enables URL-based navigation to specific operations and tags.

interface DeepLinkingPlugin {
  /** Navigate to specific operation */
  navigateToOperation(operationId: string): void;
  
  /** Navigate to specific tag */
  navigateToTag(tagName: string): void;
  
  /** Get current URL state */
  getCurrentState(): object;
}

Filter Plugin

Provides operation filtering capabilities based on tags and operation properties.

interface FilterPlugin {
  /** Set filter criteria */
  setFilter(filterText: string): void;
  
  /** Clear current filter */
  clearFilter(): void;
  
  /** Get filtered operations */
  getFilteredOperations(): object[];
}

Syntax Highlighting Plugin

Handles syntax highlighting for code examples and responses.

interface SyntaxHighlightingPlugin {
  /** Available highlighting themes */
  themes: string[];
  
  /** Highlight code block */
  highlight(code: string, language: string): string;
  
  /** Set highlighting theme */
  setTheme(theme: string): void;
}

Specification Plugin

Manages OpenAPI specification loading, parsing, and validation.

interface SpecPlugin {
  /** Load specification from URL */
  loadSpec(url: string): Promise<object>;
  
  /** Parse specification object */
  parseSpec(spec: object): object;
  
  /** Validate specification */
  validateSpec(spec: object): ValidationResult;
  
  /** Get current specification */
  getCurrentSpec(): object;
}

interface ValidationResult {
  isValid: boolean;
  errors: ValidationError[];
}

interface ValidationError {
  message: string;
  path: string[];
  level: "error" | "warning";
}

Usage Examples

Using Built-in Plugins:

import SwaggerUI from "swagger-ui";

const ui = SwaggerUI({
  dom_id: '#swagger-ui',
  url: 'https://api.example.com/openapi.json',
  plugins: [
    SwaggerUI.plugins.DownloadUrl,
    SwaggerUI.plugins.RequestSnippets
  ]
});

Using Presets:

const ui = SwaggerUI({
  dom_id: '#swagger-ui',
  url: 'https://api.example.com/openapi.json',
  presets: [
    SwaggerUI.presets.apis,
    SwaggerUI.presets.base
  ]
});

Custom Plugin Registration:

import SwaggerUI from "swagger-ui";

// Custom plugin example
const MyCustomPlugin = () => ({
  statePlugins: {
    myFeature: {
      actions: {
        myAction: () => ({ type: "MY_ACTION" })
      },
      reducers: {
        "MY_ACTION": (state) => state.set("customData", "value")
      }
    }
  }
});

const ui = SwaggerUI({
  dom_id: '#swagger-ui',
  url: 'https://api.example.com/openapi.json',
  plugins: [
    SwaggerUI.plugins.Auth,
    SwaggerUI.plugins.RequestSnippets,
    MyCustomPlugin
  ]
});

Accessing Plugin System:

const ui = SwaggerUI({
  dom_id: '#swagger-ui',
  url: 'https://api.example.com/openapi.json'
});

// Access the system after initialization
const system = ui.getSystem();

// Use plugin functionality
system.authActions.authorize({
  username: "user",
  password: "pass"
});