Swagger UI

{"id":17376,"library":"swagger-ui-dist","title":"Swagger UI Dist","description":"swagger-ui-dist is an npm package that provides the compiled, production-ready 'dist' folder of Swagger UI as a direct, dependency-free module. It is designed for scenarios where users prefer to serve Swagger UI's static assets directly, without the 'swagger-ui' package installing its own dependencies. The current stable version is 5.32.4, with frequent patch releases addressing bug fixes and security updates, alongside regular minor releases introducing features like OpenAPI 3.2.0 support and dark mode. Its primary differentiator is offering a pre-built bundle, making it ideal for integration into existing web servers (e.g., Express, Koa) or static file serving environments, offering a lean alternative to the more feature-rich but dependency-laden 'swagger-ui' package.","status":"active","version":"5.32.4","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/swagger-api/swagger-ui","tags":["javascript"],"install":[{"cmd":"npm install swagger-ui-dist","lang":"bash","label":"npm"},{"cmd":"yarn add swagger-ui-dist","lang":"bash","label":"yarn"},{"cmd":"pnpm add swagger-ui-dist","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily consumed in browser contexts after serving. For server-side Node.js ESM, use named import. CommonJS `require` for UI components is typically incorrect for this package's bundle usage.","wrong":"const SwaggerUIBundle = require('swagger-ui-dist').SwaggerUIBundle","symbol":"SwaggerUIBundle","correct":"import { SwaggerUIBundle } from 'swagger-ui-dist'"},{"note":"Used as a plugin preset for Swagger UI. Similar to SwaggerUIBundle, for browser consumption.","wrong":"const SwaggerUIStandalonePreset = require('swagger-ui-dist').SwaggerUIStandalonePreset","symbol":"SwaggerUIStandalonePreset","correct":"import { SwaggerUIStandalonePreset } from 'swagger-ui-dist'"},{"note":"This utility function is specifically for Node.js environments to get the filesystem path to the 'dist' assets and is primarily exported via CommonJS. It will throw an error if called outside Node.js.","wrong":"import { getAbsoluteFSPath } from 'swagger-ui-dist'","symbol":"getAbsoluteFSPath","correct":"const getAbsoluteFSPath = require('swagger-ui-dist').getAbsoluteFSPath"}],"quickstart":{"code":"const express = require('express');\nconst path = require('path');\nconst swaggerUiDist = require('swagger-ui-dist');\n\nconst app = express();\nconst port = 3000;\n\n// Get the absolute file system path to the swagger-ui-dist directory\nconst swaggerUiAssetPath = swaggerUiDist.getAbsoluteFSPath();\n\n// Serve the static Swagger UI files from the node_modules directory\napp.use('/swagger-ui', express.static(swaggerUiAssetPath));\n\n// Endpoint to display Swagger UI\napp.get('/api-docs', (req, res) => {\n const swaggerSpecUrl = '/swagger.json'; // URL to your OpenAPI spec\n\n res.send(`\n \n \n \n \n Swagger UI\n \n \n \n \n \n \n

\n \n \n \n \n \n `);\n});\n\n// Example API spec endpoint\napp.get('/swagger.json', (req, res) => {\n res.json({\n openapi: '3.0.0',\n info: {\n title: 'Example API',\n version: '1.0.0',\n description: 'A simple example API served with Swagger UI.',\n },\n paths: {\n '/hello': {\n get: {\n summary: 'Returns a greeting',\n responses: {\n '200': {\n description: 'Successful response',\n content: {\n 'application/json': {\n schema: {\n type: 'object',\n properties: {\n message: {\n type: 'string',\n example: 'Hello from Example API!',\n },\n },\n },\n },\n },\n },\n },\n },\n },\n },\n });\n});\n\napp.listen(port, () => {\n console.log(`Server is running on http://localhost:${port}`);\n console.log(`Swagger UI available at http://localhost:${port}/api-docs`);\n});","lang":"javascript","description":"Sets up an Express.js server to serve Swagger UI from its 'dist' folder, providing an API documentation endpoint."},"warnings":[{"fix":"To opt out, add `\"scarfSettings\": { \"enabled\": false }` to your `package.json` or run `SCARF_ANALYTICS=false npm install`.","message":"The `swagger-ui-dist` package uses Scarf for anonymized installation analytics, which runs during `npm install`. This data helps maintainers. Users can opt out by setting `scarfSettings.enabled: false` in `package.json` or `SCARF_ANALYTICS=false` environment variable during installation.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to `swagger-ui-dist@5.32.4` or higher to ensure these critical security vulnerabilities are patched.","message":"Versions 5.32.2 and 5.32.4 addressed several high-severity CVEs by upgrading alpine packages, libpng, and zlib (e.g., CVE-2026-33416, CVE-2026-33636, CVE-2026-22184). Older versions are vulnerable to these issues.","severity":"breaking","affected_versions":"<5.32.4"},{"fix":"If integrating into a modern JavaScript build pipeline, consider using the `swagger-ui` package directly instead of `swagger-ui-dist`.","message":"This package, `swagger-ui-dist`, is specifically for serving static assets and is 'dependency-free'. If you intend to use Swagger UI programmatically within a bundler like Webpack or Browserify, `swagger-ui` (without '-dist') is often the more suitable package, as it handles its own dependencies.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `getAbsoluteFSPath` is only invoked in your Node.js server-side code, not within client-side bundles.","message":"The `getAbsoluteFSPath` function is designed for Node.js environments. Attempting to call `getAbsoluteFSPath()` in a browser environment will result in an error, as it relies on Node.js-specific modules like `path`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"This function is server-side only. Call `getAbsoluteFSPath` in your Node.js application to resolve the path and then serve those files. Do not include this call in client-side code that runs in a browser.","cause":"Attempting to call `require('swagger-ui-dist').getAbsoluteFSPath()` or `import { getAbsoluteFSPath } from 'swagger-ui-dist'` in a browser environment.","error":"Error: getAbsoluteFSPath can only be called within a Nodejs environment"},{"fix":"Verify that your HTML includes `` and that the path is correct and accessible by your web server. Ensure the initialization script runs after the bundle is loaded.","cause":"The `swagger-ui-bundle.js` script was not correctly loaded or executed in the HTML page before `SwaggerUIBundle` was accessed.","error":"ReferenceError: SwaggerUIBundle is not defined"},{"fix":"Run `npm install swagger-ui-dist` or `yarn add swagger-ui-dist` in your project directory. Ensure your Node.js process has access to `node_modules`.","cause":"The `swagger-ui-dist` package has not been installed or cannot be resolved by your module loader.","error":"Cannot find module 'swagger-ui-dist'"}],"ecosystem":"npm","meta_description":null}