QuickStart

Embed GetMan in any web page in 3 steps.

Add the container

HTML

html

<div id="api-docs" style="height: 100vh"></div>

Give the container an explicit height — GetMan fills it via height: 100%.

Load the script

HTML

html

<script src="https://cdn.getman.dev/latest/getman-ui.js"></script>

The script injects all required styles and fonts — no separate CSS import needed.

Mount

JavaScript

GetMan.launch(
  document.getElementById('api-docs'),
  { url: 'https://your-api.com/openapi.json' }
);

launch returns a cleanup function — call it to unmount and release all resources.

Framework integration

GetMan works with any framework. Pick yours below.

html

<!DOCTYPE html>
<html>
  <head>
    <title>My API Docs</title>
  </head>
  <body>
    <!-- Step 1: container -->
    <div id="api-docs" style="height: 100vh"></div>

    <!-- Step 2: script -->
    <script src="https://cdn.getman.dev/latest/getman-ui.js"></script>

    <!-- Step 3: mount -->
    <script>
      GetMan.launch(
        document.getElementById('api-docs'),
        { url: 'https://your-api.com/openapi.json' }
      );
    </script>
  </body>
</html>

jsx

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; // returned from useEffect for cleanup
    };
    document.head.appendChild(script);
  }, [specUrl]);

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

vue

<script setup>
import { useTemplateRef, onMounted, onUnmounted, watch } from 'vue';

const props = defineProps({ specUrl: String });

const container = useTemplateRef('container');
let unmount = null;

async function mount() {
  if (unmount) { unmount(); unmount = null; }
  if (!window.GetMan) {
    await new Promise((resolve) => {
      const s = document.createElement('script');
      s.src = 'https://cdn.getman.dev/latest/getman-ui.js';
      s.onload = resolve;
      document.head.appendChild(s);
    });
  }
  unmount = window.GetMan.launch(
    container.value,
    { url: props.specUrl }
  );
}

onMounted(mount);
watch(() => props.specUrl, mount);
onUnmounted(() => unmount?.());
</script>

<template>
  <div ref="container" style="height: 100vh" />
</template>

API reference

launch(target, options?) → () => void

Parameter	Type	Required	Description
`target`	`HTMLElement`	Yes	DOM element to mount the explorer into.
`options.url`	`string`	No	URL of the OpenAPI spec to load on startup.

Return value: () => void — call to unmount the explorer and clean up.

Deep linking

Every endpoint and schema in the explorer has a shareable URL fragment. Append these to any page that embeds GetMan and the explorer will scroll directly to that item on load.

#endpoints/<operationId> Jump to a specific endpoint.

#schemas/<Name> Jump to a specific schema.

Need help?

Open a GitHub issue See it working live