UI Overview — API Studio Docs

Simple Mode vs Advanced Mode

API Studio starts in Simple Mode — a clean, focused interface for everyday API testing. Toggle Advanced Mode in the settings menu to unlock the full feature set.

Feature	Simple	Advanced
Top-level views	Requests only	Requests + Mock+MCP + Vault
Request tabs	Params, Headers, Body, Auth	+ Tests, Scripts, MCP, Settings
Mock servers	Hidden	Full access
Secret vault	Locked	Full access
Collection editor tabs	Overview, Auth	+ Scripts, Runs, MCP, Settings

Settings menu with Advanced Mode checkbox enabled

Settings → check "Advanced Mode"

Top bar showing Requests, Mock+MCP, and Vault tabs in Advanced Mode

Top bar after enabling Advanced Mode

Sidebar Tabs

The left sidebar has four tabs. Click a tab icon to switch between them. The sidebar is collapsible — drag the border or double-click to hide.

Collections

Saved requests organized in collections and nested folders. Drag-and-drop to reorder. Click a collection name to open its editor. Deep search by name or URL.

Environments

Local (workspace) and Global (shared) environments. Each has key-value variables. Select the active environment from the top-bar dropdown.

History

Every request you send is automatically logged. Browse past requests, click to re-open, or delete entries. Capped at 500 entries (configurable).

Snapshots

Response contract tracking. Automatically records response structures for saved requests. Notifies when an API returns a new shape (variant detection).

Collections tab

History tab

Tab Bar

Each request, collection editor, and folder editor opens in its own tab. Tabs persist across sessions — reopen VS Code and your tabs are still there.

Grouping — Tabs group by collection (collapsible). Toggle via settings.

Dirty indicator — A dot (●) shows unsaved changes. Closing prompts to save.

Context menu — Right-click a tab for: Close, Close Others, Copy Request, Add to Group.

Stacked view — Compact mode that shows tabs vertically when space is tight.

Grouped tabs — one open, one collapsed

Right-click context menu

Request Builder Tabs

Below the URL bar are sub-tabs for configuring different parts of the request.

Tab	Mode	Purpose
Params	Simple	Query parameters — synced bidirectionally with the URL bar
Headers	Simple	Custom request headers with autocomplete for standard HTTP headers
Body	Simple	Request body — JSON, form-data, urlencoded, raw, XML, GraphQL, binary
Auth	Simple	Authentication config — 7 types with inherit-from-parent option
Tests	Advanced	GUI test rules (assertions) and response variable extraction
Scripts	Advanced	Pre-request and test JavaScript in a sandboxed VM
MCP	Advanced	MCP tool description and input schema when exposed as AI tool
Settings	Advanced	Per-request proxy selection and TLS certificate configuration

Tests tab with assertions and set variables

Tests tab showing GUI assertions and a set-variable extraction rule

Response Viewer

The response area appears after sending a request. Available tabs depend on the response type:

Body — Pretty (syntax-highlighted CodeMirror with Ctrl+F search), Raw, and Tree (collapsible JSON) views. A-/A+ zoom controls.

Headers — Response headers table. Click to copy individual values.

Cookies — Parsed cookie fields (name, value, domain, path, expires, flags).

Request — The actual resolved request sent over the wire (formatted + raw HTTP views).

Tests — Pass/fail results from GUI test rules and script assertions.

Stream — Live SSE events with id, event type, data, and timestamps (appears for SSE responses).

WebSocket — Message log with ↑/↓ direction, timestamps, and JSON formatting (appears for WS connections).

Click the response time to see the timing breakdown (DNS, TCP, TLS, TTFB, download)

Layout Options

Side-by-side — Request on left, response on right. Best on wide screens. Drag the splitter to resize.

Stacked — Request on top, response below. Better on narrow panels. Auto-switches on small widths.

Collapsed sidebar — Hide the left sidebar to maximize request/response space. Toggle via the collapse button.

Compact tabs — Enable in settings to reduce tab bar height for more vertical space.

Stacked layout with request on top and response below

Stacked view — request builder on top, response viewer below

Protocol Selector

The dropdown left of the URL bar switches between protocols. Each protocol changes the available tabs and the action button:

Protocol	Button	Tabs
HTTP	Send	All tabs, method selector visible
GraphQL	Send	Body (first), Headers, Auth, Tests, Scripts, Settings
WebSocket	Connect / Disconnect	Params, Headers, Auth only
gRPC	Invoke / Cancel	Metadata, Auth, Settings only

Environment Dropdown

The top bar shows the active environment. Click to switch. Variables in the active environment resolve wherever you use {{variable}} syntax.

Local environments are workspace-specific (stored in .openpost/)

Global environments are shared across all workspaces (stored in ~/.openpost/global/)

Hover over a {{variable}} in the URL to see its resolved value and source

Environment dropdown showing local environments

Keyboard Shortcuts

Action	macOS	Windows / Linux
Open API Studio	Cmd+Alt+P	Ctrl+Alt+P
Send Request	Cmd+Enter	Ctrl+Enter
Save Request	Cmd+S	Ctrl+S
New Request Tab	Cmd+T	Ctrl+T
Close Tab	Cmd+W	Ctrl+W
Search in Response	Cmd+F	Ctrl+F