UI Guide

Bowire's browser UI is a single-page application built with pure HTML, CSS, and JavaScript. It runs in any modern browser with no framework dependencies.

Layout

The diagram below labels the six regions of the workbench. Click any one to jump to its detail page. It is generated from the running UI by scripts/screenshots/generate-ui-anatomy.js, which reads each region's bounding box out of the DOM — so it shows the workbench as it is, not as it was when somebody last redrew it:

Bowire workbench layout — click any region to open its UI Guide page
  1. Topbar — brand, command palette / global search, workspace and environment chips, undo / redo, theme, AI drawer, About, Settings.
  2. Rail strip — the 48 px icon column at the very left edge. Its icons switch rails, and the sidebar reshapes to whichever rail is active.
  3. Sidebar — the list panel for the active rail. Under Discover that is the services and methods tree; under other rails it lists workspaces, collections, recordings, mocks, flows, and so on.
  4. Request Pane — form/JSON editor, metadata headers, import
  5. Response Pane — syntax-highlighted response, streaming view, copy/download
  6. Action Bar — execute button, repeat, status indicators

The rail strip and the sidebar are two layers of one idea: the rail decides what kind of thing you are looking at, the sidebar lists the things. Before v2.0 those were tabs inside the sidebar; they are not any more.

On desktop, the topbar runs across the full width; the sidebar sits on the left with the request and response panes stacked or side-by-side on the right; the optional AI drawer slides in from the right edge. On mobile, the sidebar collapses behind a hamburger menu and panels stack vertically.

Theme

Bowire supports dark, light, and auto (system-preference) themes. The palette is indigo-accent on near-black or near-white, tuned for long reading sessions with high contrast on code blocks. Toggle themes with the t keyboard shortcut or the theme button in the header.

The theme preference is saved in localStorage and persists across sessions.

Configuration

Customize the UI at startup:

app.MapBowire(options =>
{
    options.Title = "My API";
    options.Description = "v2.3 -- Staging";
    options.Theme = BowireTheme.Dark;
    options.RoutePrefix = "api-browser";
});
Option Default Description
Title "Bowire" Browser tab and header title
Description "" Subtitle shown below the title
Theme Dark BowireTheme.Dark or BowireTheme.Light
RoutePrefix "bowire" URL path prefix for all endpoints
ServerUrl null Override server URL (for reverse proxies)
LockServerUrl false Prevents the server URL from being changed in the UI
ShowInternalServices false Show internal services like grpc.reflection

See also: Keyboard Shortcuts, Responsive & Mobile

Edit this page