A beautiful, embeddable OpenAPI explorer — drop it anywhere with a single function call.
getman.dev · Live Demo · Report a Bug
GetMan is a zero-dependency OpenAPI 3.x UI delivered as a single IIFE script. Point it at any spec URL, mount it into a
<div>, and get a fully interactive API explorer — with Try It Out, auth configuration, schema browsing, and deep
linking — in seconds.
No framework required on the consumer side. Works in React, Vue, Angular, plain HTML, or any server-rendered page.
- OpenAPI 3.0 & 3.1 — JSON and YAML specs, loaded by URL or file upload
- Try It Out — send real HTTP requests directly from the browser
- Authentication — API key, HTTP Bearer / Basic, OAuth 2.0, OpenID Connect
- Schema browser — explore component schemas with expandable property trees
- Dark mode — toggle manually or follows system preference, persisted across sessions
- Resizable panes — drag to resize the nav, detail, and playground panels
- Deep linking — every endpoint and schema has a shareable URL (
#endpoints/…,#schemas/…) - Command palette —
⌘Kto jump anywhere without reaching for the mouse - Keyboard-first — navigate entirely without a mouse
Add a container, load the script from jsDelivr, and call launch:
<!doctype html>
<html style="height:100%">
<body style="height:100%;margin:0">
<div id="api-docs" style="height:100%"></div>
<script src="https://cdn.jsdelivr.net/gh/getman-dev/getman@v1.0.0/dist/getman-ui.js"></script>
<script>
GetMan.launch(
document.getElementById('api-docs'),
{ url: 'https://petstore3.swagger.io/api/v3/openapi.json' }
);
</script>
</body>
</html>The script injects all required styles and fonts — no separate CSS import needed.
Container height — GetMan fills its container via
height: 100%. Give the container an explicit height (e.g.height: 100vhorheight: 600px), otherwise it will collapse to zero.
Mounts the explorer into target and returns a cleanup function.
const unmount = GetMan.launch(
document.getElementById('api-docs'),
{ url: 'https://api.example.com/openapi.json' }
);
// later, to tear down:
unmount();Options
| Option | Type | Default | Description |
|---|---|---|---|
url |
string |
— | URL of the OpenAPI spec to load on startup (JSON or YAML). |
import { useEffect, useRef } from 'react';
export function ApiDocs() {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!ref.current) return;
const unmount = GetMan.launch(ref.current, {
url: '/openapi.json',
});
return unmount;
}, []);
return <div ref={ref} style={{ height: '100vh' }} />;
}<script setup lang="ts">
import { onMounted, onUnmounted, useTemplateRef } from 'vue';
const container = useTemplateRef('container');
let unmount: (() => void) | undefined;
onMounted(() => {
unmount = GetMan.launch(container.value!, {
url: '/openapi.json',
});
});
onUnmounted(() => unmount?.());
</script>
<template>
<div ref="container" style="height: 100vh" />
</template>If you host getman-ui.js yourself instead of using jsDelivr:
<div id="api-docs" style="height:100vh"></div>
<script src="/assets/getman-ui.js"></script>
<script>
GetMan.launch(
document.getElementById('api-docs'),
{ url: '/openapi.json' }
);
</script>Every endpoint and schema gets its own URL fragment. The fragment updates automatically as you navigate — copying the URL always gives a shareable deep link.
| Fragment | Links to |
|---|---|
#endpoints/getPetById |
Endpoint by operationId |
#endpoints/GET%3A%2Fpets%2F%7Bid%7D |
Endpoint by method + path (when no operationId) |
#schemas/Pet |
Component schema by name |
| Key | Action |
|---|---|
/ |
Focus endpoint search |
↑ ↓ |
Navigate endpoints |
Enter |
Select focused endpoint |
Esc |
Close modal / dismiss |
⌘K |
Open command palette |
⌘↵ |
Send request (Try It Out) |
? |
Toggle shortcuts reference |
git clone https://github.com/getman-dev/getman
cd getman
npm install
npm run dev # Vite dev server → http://localhost:5173Place an openapi.json at the project root and it loads automatically, or use the load modal to point at any remote
spec URL.
npm run typecheck # type-check only (tsc --noEmit)
npm run build:lib # builds dist/getman-ui.js — the embeddable IIFE
npm run build # builds the full standalone appTag and push — CI builds getman-ui.js and attaches it to the release. The jsDelivr CDN URL goes live immediately after:
git tag v1.x.y
git push origin v1.x.yhttps://cdn.jsdelivr.net/gh/getman-dev/getman@v1.x.y/dist/getman-ui.js
Contributions are welcome. Please open an issue first to discuss what you'd like to change, then submit a pull request
against the dev branch.
MIT © GetMan