swagger-ui-react

swagger-ui-react is the React-flavored distribution of Swagger UI, the reference renderer for OpenAPI (formerly Swagger) specifications. Instead of exposing the vanilla-JS constructor function that the core swagger-ui package ships, this flavor exports a drop-in <SwaggerUI /> component so React applications can embed interactive API documentation without manually bootstrapping the underlying system.

Under the hood it wires up the same Redux-backed core used by the standalone Swagger UI distribution — parsing an OpenAPI document (from a spec object/string or a remote url), rendering operations, models, and “Try it out” request forms, and letting consumers hook in request/response interceptors, custom plugins, and layout overrides. Versions track the core swagger-ui package one-to-one, so a given release always renders the same UI as the equivalent core version.

What You Get

• A <SwaggerUI /> component you can mount anywhere in a React tree, initialized from a spec object/string or a remote url
• The full Swagger UI rendering engine (operations, models, “Try it out” execution) reused from the core swagger-ui package via a shared Redux-backed system
• Configurable request/response interceptors, custom plugins, and presets for tailoring parsing and display behavior
• Peer-dependency packaging (react/react-dom as peerDependencies rather than bundled deps) so the component matches your app’s existing React version
• A companion swagger-ui.css stylesheet exported alongside the component for styling

Common Use Cases

• Embedding live, browsable REST API reference docs inside an internal developer portal built in React
• Letting API consumers execute real “Try it out” requests against a documented endpoint from within a product’s own UI
• Shipping OpenAPI documentation as part of a SaaS product’s public developer docs page
• Prototyping and reviewing an OpenAPI spec during API design by rendering it live in a React admin tool

Under The Hood

Architecture The flavor itself is a thin ~180-line wrapper (flavors/swagger-ui-react/index.jsx) around the core rendering engine: it builds a SwaggerUIConstructor system instance in a useEffect, stores it in component state, and renders whatever root component the system’s plugin registry (getComponent("App", "root")) resolves to. All real logic — parsing specs, managing operations/models, driving “Try it out” requests — lives in the shared src/core tree (plugins/, presets/, containers/, components/, system.js), organized as a Redux-backed plugin system where each concern (auth, deep linking, request snippets, etc.) is its own plugin composed at startup. The React flavor’s only real coupling point is the #swagger-ui import alias, swapped per-build to point at different core bundles.

Tech Stack Core state management runs on redux/react-redux with reselect selectors and immutable for state shape, layered under a plain-JS/JSX component tree (411 .js/.jsx files vs. only 2 .ts files — TypeScript is used for declaration emission only, with checkJs/strict both off). The React flavor declares react/react-dom as peerDependencies (>=16.8.0 <20) while the core package depends on swagger-client for spec resolution, js-yaml for YAML parsing, and dompurify for sanitizing rendered content. Five separate Webpack configs (webpack/core.js, bundle.js, standalone.js, es-bundle.js, es-bundle-core.js) produce the different distribution flavors, including this one.

Code Quality The monorepo has an extensive unit-test suite (82 files under test/unit) built on Jest, Enzyme, and react-test-renderer, plus a full Cypress end-to-end suite (test/e2e-cypress) run in CI via GitHub Actions (nodejs.yml, codeql.yml, security-scan.yml). Linting is enforced with ESLint (typescript-eslint + eslint-plugin-react) and Prettier, styles with Stylelint, and Husky/lint-staged/commitlint gate commits — a comprehensive setup for a JS/JSX-heavy codebase with type safety, thorough testing, and CI all present.

API Design The public surface is a single component with prop defaults pulled from a shared config.defaults object, keeping the getting-started path to a two-line import plus one JSX element. The README is explicit about limitations (several props only apply on mount, OAuth redirect handling and topbar mode aren’t supported), which is unusually honest developer-experience documentation rather than glossing over rough edges — a reasonable trade for reusing one core rendering engine across three different packaging flavors.