User guide

From zero to fluent,
one honest manual

Everything you need to work with OpenDoc UI day to day — loading, reading, running, generating, remembering and sharing.

Quick start

The fastest route: open the live demo and drop any .json / .yaml / .yml OpenAPI file onto it. Parsing, normalization and rendering happen in your browser — the file is never uploaded, and the original document is never modified.

To run it yourself:

# clone, install, develop git clone https://github.com/omidgfx/opendoc-ui npm ci npm run dev # development server on :3000

Loading specifications

1 · Local files

With no configuration at all, OpenDoc UI runs in local mode: open files straight from your device and get a persistent history of everything you opened. When the browser supports file handles, the refresh button can even re-read the file from disk.

2 · Remote URLs

When the build enables URL loading, paste any reachable specification URL. The browser fetches it directly; for restrictive networks, optional proxy agents (reference implementations in six frameworks) fetch on your behalf, with direct-fetch fallbacks and clear CORS guidance when something is unreachable. If a generator emits invalid flow-style oneOf/anyOf/allOf without sequence brackets, an experimental load-time YAML repair rewrites just enough text for the document to parse — originals on disk are never modified.

3 · Configured specifications

Deployments can ship a curated catalog through public/config.json or window.INITIAL_CONFIG. The hybrid option combines a configured catalog with local file opening — teams get the official specs and the freedom to inspect anything else.

Spec caching & the refresh button

Remote specifications are cached in IndexedDB. A fresh entry is trusted for five minutes; after that the app revalidates with If-None-Match and/or If-Modified-Since when the server supplied those headers. If revalidation fails, the stale copy can serve as an offline fallback — but stale data is never treated as fresh indefinitely.

The refresh button (circular arrows beside the spec selector) drops the cache and reloads: it clears every cached spec and re-fetches the current one. In local mode the same button re-reads the opened file from disk or re-parses the stored text. The icon spins while a refresh is in flight.

Reading the documentation

The sidebar groups endpoints by tag — nested groups via x-tagGroups, counts, protection and deprecation indicators — and respects sorting, route-display and natural name order. Each operation opens a documentation view that leaves nothing hidden: parameter tables with types, formats, style/explode serialization, patterns and examples; request bodies and responses through the shared SchemaViewer (Format media type, generated examples, named OpenAPI examples, body-level combinator rails); and a response matrix with a scroll-aware code navigator and deep links like #response-200.

Pattern constraints carry a built-in regex tester and a serializer playground that can hand values to the Runner. Recursive and mutually referencing schemas render cycle-safe, with recursive branches marked by a loop icon at their boundary. On phones, a pinned response pill follows what you are reading and opens a sheet to jump between codes.

Tabs & the workspace

OpenDoc UI behaves like an IDE. Endpoints, the overview, global search, the schema explorer, the about page and the assistant all open as tabs in the same bar. Single-click previews a tab, double-click (or middle-click in the sidebar) pins it permanently; drag to reorder, middle-click or use the context menu to close. A split view shows documentation and the Runner side by side, with a draggable divider whose width is remembered.

Running requests

Switch any endpoint to the API Runner tab. Inputs are generated from the specification: path/query/header/cookie parameters (serialized with the declared style/explode), a live final URL, a recursive form editor for bodies (or raw JSON/YAML/XML with format-aware validation), and multipart file uploads. OAS 3.2 QUERY operations send a body where the browser allows it — GET and HEAD still warn if a body is present. Press Ctrl/⌘ + Enter to send; inspect status, headers, body and history below, cancel long requests (including binary streams), and keep per-endpoint inputs saved between sessions.

Requests use the browser's fetch API, so standard CORS rules apply. The Runner Compatibility report — one click from the overview — states per endpoint what the browser can and cannot do for the API, before you waste time guessing.

Authentication

The Authorize dialog understands the security schemes your spec declares: bearer tokens, API keys (header/query/cookie), basic auth and OAuth flows — including a native /oauth/callback route for authorization-code flows. Credentials are stored locally per specification, injected into Runner requests automatically, and redacted from generated snippets and AI context.

Working with schemas

Open the Schema Explorer from the sidebar, open a schema modal from any reference, or stay inside an endpoint — request bodies, responses and the modal share one SchemaViewer. Composed structures use body-level rails and field-level menus for nested oneOf (exclusive), anyOf (multi-select merge with All), allOf (focus with dimming) and not (inspection only). Generated examples follow the active branch across formats; named OpenAPI examples live on their own tab. Modern 3.1/3.2 keywords — const, prefixItems, unevaluatedProperties, if/then/else, type unions, bare $ref combinators — are handled explicitly. Multiple schemas can be open at once, and the set is encoded in the URL (?schemas=Pet,Order) so the exact view is shareable.

Settings

Open the Settings tab from the workspace (deep link #/<spec>/settings#<section>). Sections cover General, Appearance (theme gallery), Navigation, Code viewer and AI. Representation defaults choose whether documentation and schema modals remember example vs schema per schema or globally. Tables can become cards when a pane runs out of room; preferences prefer IndexedDB with a localStorage emergency fallback only.

Generating code & types

Every endpoint offers fetch, axios and Angular snippets; every schema offers TypeScript models. Download the whole set as a zip. Secrets you entered for the Runner are replaced with placeholders before anything is rendered or exported.

Notes, trash & orphaned notes

Attach Markdown notes and todos to any endpoint in fourteen translucent, theme-safe tones. Deleting moves a note to the trash, never oblivion; if a spec changes and a note's endpoint disappears, orphaned-note detection flags it so nothing is silently lost. Export and import everything as JSON to move machines or make backups.

Hidden endpoints

Some endpoints are noise for your work. Move them into a muted Hidden folder without changing the OpenAPI source — optionally, OpenDoc UI offers to hide an endpoint when you confirm its last todo. Unhide endpoints individually, or restore all of them from navigation settings.

The AI assistant

Ask questions about the open specification and get answers grounded in retrieved, redacted endpoint/schema context — with citations that open the source view. Configure a direct provider (OpenAI, Anthropic, Ollama, OpenRouter or any OpenAI-compatible endpoint) or point at a server-side gateway that keeps keys out of the browser. Swagger/REST skill packs sharpen its answers, conversations save per spec, and the assistant can pre-fill the Runner with a ready-to-send request.

Browser persistence

All persistence goes through an IndexedDB-first storage layer that hydrates before the UI starts, validates every read, self-repairs corrupt entries, and falls back to localStorage only when IndexedDB is unavailable. Sidebar width, collapsed folders, split-view width, per-spec themes, open tabs, per-endpoint Runner inputs, response history, notes and AI conversations all persist — on your machine, in your browser, and nowhere else. Per-spec data is pruned automatically when a spec disappears from the configuration.

Themes & appearance

Choose from 17 hand-picked palettes in the Settings → Appearance gallery (the old theme-only modal is gone); light, dark and system modes apply on top. The choice is remembered per specification, so each API keeps its own look. Notes, method badges and code views stay legible in every combination.

Keyboard shortcuts

Focus global searchCtrl/⌘ + K
Close top-most modal / overlayEsc
Previous / next endpoint tabAlt + ← / →
Tab switcher (Alt-Tab style)Ctrl + ` / Ctrl + Shift + `
Send request (in Runner)Ctrl + Enter
Move focus between split panesCtrl + ↑ / ↓
Pin a permanent tabMiddle-click sidebar endpoint
Keep the preview tabDouble-click

The About page inside the app lists the full set, including every mouse interaction.