Customizing

The client key in orbitdocs.config.ts sets how the API client looks and which features your readers get. Each reader can then adjust layout and appearance in the client's settings drawer. Their choices are kept in their browser.

Site defaultsCopy Anchor Link

export default defineConfig({
  // ...
  client: {
    layout: 'stacked',
    density: 'compact',
    accent: '#8B5CF6',
    features: {
      scripts: false,
      runner: false,
    },
  },
});

FeaturesCopy Anchor Link

Turn features off to keep the client simple for your audience. For example, a public API for beginners might hide scripts and the runner.

Turn the client offCopy Anchor Link

client: { enabled: false },

This removes Test Request from every operation and API Client from the top bar. The /client page is still built from app/client/[[...variant]]/page.tsx; delete that file too if you don't want the page.

Turn sending off for one APICopy Anchor Link

For an API readers can't call from the browser, such as a demo with no live server, set send: false on it:

apis: [
  {
    id: 'demo',
    source: { file: 'demo/travel.json' },
    send: false,
    // Optional; this is the default.
    sendDisabledMessage: 'Sending requests is turned off for this API. Copy the request as code and run it yourself.',
  },
],

Readers can still open that API's requests in the client, edit them and copy them as cURL or code. Nothing is sent:

• Send is disabled and explains why on hover. The response pane shows the same message.
• ⌘ Enter, Send in the right-click menu and in the Send menu, and Send request in the command palette do nothing.
• The collection runner doesn't run the collection.
• Requests a reader adds to that API's collection follow the same setting.

In the reference, Test Request is disabled with the same message. The code samples and Copy stay. Other APIs on the site are not affected.

Reader settingsCopy Anchor Link

Readers open settings with the gear at the bottom of the rail, or from the command palette.

The drawer also lists the keyboard shortcuts. Reset to defaults returns every setting to the site defaults.

The client also remembers the size of the request and response panes (drag the divider, from 20% to 80%) and the language of the Code tab.

Style the client furtherCopy Anchor Link

The client uses the site's theme and HeroUI components, so theme in the config applies to it too. To change it further, override CSS variables in app/global.css, below the imports. See Themes.

Next stepsCopy Anchor Link