Embed OpenAPI Docs in a React App

There’s no getman-react package to install, and there doesn’t need to be — GetMan ships as a single script that exposes window.GetMan.launch(), so wrapping it in a component is a dozen lines: load the script once, mount into a ref, and return the unmount function from useEffect’s cleanup.

The component

import { useEffect, useRef } from 'react';

export function ApiDocs({ specUrl }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.getman.dev/latest/getman-ui.js';
    script.onload = () => {
      const unmount = window.GetMan.launch(
        containerRef.current,
        { url: specUrl }
      );
      return unmount;
    };
    document.head.appendChild(script);
  }, [specUrl]);

  return <div ref={containerRef} style={{ height: '100vh' }} />;
}

Drop <ApiDocs specUrl="https://your-api.com/openapi.json" /> anywhere in your component tree. The useEffect cleanup means navigating away — in a router, a modal, a tab switch — unmounts GetMan cleanly instead of leaking listeners.

Create React App vs. Vite

Both work exactly as shown above — GetMan doesn’t touch your bundler, since the script is loaded from a CDN at runtime rather than imported as a module. The only thing to double check in CRA specifically is that you’re not running in an environment with a strict Content-Security-Policy that blocks cdn.getman.dev as a script source; Vite’s default dev server has no such restriction.

Using it inside Next.js

If your React app is a Next.js app, see the dedicated Next.js guide — App Router’s server components need one extra step ('use client') that plain React doesn’t.

Moving away from swagger-ui-react

If this component is replacing swagger-ui-react specifically, see why a script-tag embed stays lighter than a React-wrapped viewer — the weight difference shows up mainly on larger specs.