Swagger UI's extensible plugin architecture enables customization of functionality through a comprehensive collection of built-in plugins and support for custom plugins.
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;
}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;
}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;
}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;
}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;
}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;
}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[];
}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;
}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";
}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"
});