Configuration

interface CoreConfigOptions {
  /** DOM element ID where SwaggerUI will render (required if domNode not provided) */
  dom_id?: string;
  
  /** DOM element where SwaggerUI will render (overrides dom_id if provided) */
  domNode?: Element;
  
  /** OpenAPI specification object (takes precedence over url) */
  spec?: object;
  
  /** URL pointing to OpenAPI specification file */
  url?: string;
  
  /** Array of API definition objects for topbar selection */
  urls?: Array<{ url: string; name: string }>;
  
  /** Primary spec name when using urls array */
  "urls.primaryName"?: string;
  
  /** URL to external configuration document */
  configUrl?: string;
  
  /** Enable URL query parameter configuration override */
  queryConfigEnabled?: boolean;
}

interface DisplayConfigOptions {
  /** Layout component name */
  layout?: "BaseLayout" | "StandaloneLayout" | string;
  
  /** Default expansion behavior for operations and tags */
  docExpansion?: "list" | "full" | "none";
  
  /** Maximum number of tagged operations to display */
  maxDisplayedTags?: number;
  
  /** Enable/disable operation filtering or set filter string */
  filter?: boolean | string;
  
  /** Show operation IDs in the operations list */
  displayOperationId?: boolean;
  
  /** Show request duration for Try it out requests */
  displayRequestDuration?: boolean;
  
  /** Enable deep linking for tags and operations */
  deepLinking?: boolean;
  
  /** Show vendor extensions in the UI */
  showExtensions?: boolean;
  
  /** Show common vendor extensions */
  showCommonExtensions?: boolean;
}

interface ModelConfigOptions {
  /** Default rendering mode for models */
  defaultModelRendering?: "example" | "model";
  
  /** Default expansion depth for individual models */
  defaultModelExpandDepth?: number;
  
  /** Default expansion depth for models section */
  defaultModelsExpandDepth?: number;
}

interface InteractionConfigOptions {
  /** Enable Try it out functionality */
  tryItOutEnabled?: boolean;
  
  /** HTTP methods supported for Try it out */
  supportedSubmitMethods?: Array<"get" | "put" | "post" | "delete" | "options" | "head" | "patch" | "trace">;
  
  /** Send credentials with CORS requests */
  withCredentials?: boolean;
  
  /** Show mutated request in Try it out */
  showMutatedRequest?: boolean;
  
  /** Function to intercept outgoing requests */
  requestInterceptor?: (request: any) => any;
  
  /** Function to intercept incoming responses */
  responseInterceptor?: (response: any) => any;
}

interface AuthConfigOptions {
  /** OAuth2 redirect URL */
  oauth2RedirectUrl?: string;
  
  /** Persist authorization data between sessions */
  persistAuthorization?: boolean;
}

interface CodeGenConfigOptions {
  /** Enable request code snippet generation */
  requestSnippetsEnabled?: boolean;
  
  /** Configuration for request snippets */
  requestSnippets?: {
    generators?: {
      [key: string]: {
        title: string;
        syntax: string;
      };
    };
    defaultExpanded?: boolean;
    languages?: string[] | null;
  };
}

interface ValidationConfigOptions {
  /** URL for external specification validator */
  validatorUrl?: string;
}

interface StylingConfigOptions {
  /** Syntax highlighting configuration */
  syntaxHighlight?: {
    activated: boolean;
    theme: string;
  };
}

interface SortingConfigOptions {
  /** Custom sorting function for operations */
  operationsSorter?: ((a: any, b: any) => number) | "alpha" | "method";
  
  /** Custom sorting function for tags */
  tagsSorter?: (a: any, b: any) => number;
}

interface PluginConfigOptions {
  /** Array of plugin presets to load */
  presets?: any[];
  
  /** Array of individual plugins to load */
  plugins?: any[];
  
  /** Initial Redux state */
  initialState?: object;
  
  /** Inline function overrides */
  fn?: object;
  
  /** Inline component overrides */
  components?: object;
}

interface CallbackConfigOptions {
  /** Callback invoked when rendering is complete */
  onComplete?: () => void;
  
  /** Function to transform model properties */
  modelPropertyMacro?: (property: any) => any;
  
  /** Function to transform parameters */
  parameterMacro?: (parameter: any) => any;
  
  /** Custom uncaught exception handler */
  uncaughtExceptionHandler?: (error: Error) => void;
}

interface FileUploadConfigOptions {
  /** Supported media types for file uploads */
  fileUploadMediaTypes?: string[];
}

import SwaggerUI from "swagger-ui";

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

const ui = SwaggerUI({
  dom_id: '#swagger-ui',
  spec: myApiSpec,
  layout: 'StandaloneLayout',
  displayOperationId: true,
  displayRequestDuration: true,
  requestSnippetsEnabled: true,
  requestSnippets: {
    defaultExpanded: true,
    languages: ['curl_bash', 'javascript']
  },
  syntaxHighlight: {
    activated: true,
    theme: 'monokai'
  },
  onComplete: () => {
    console.log('Swagger UI loaded successfully');
  }
});

const ui = SwaggerUI({
  dom_id: '#swagger-ui',
  urls: [
    { url: 'https://api1.example.com/openapi.json', name: 'API v1' },
    { url: 'https://api2.example.com/openapi.json', name: 'API v2' }
  ],
  "urls.primaryName": 'API v2',
  layout: 'StandaloneLayout'
});