Skip to main content

ApiUiOptions

Options controlling how the API reference HTML page is rendered by ApiUiFactory.render(), expressApiUi(), and fastifyApiUi().

import type { ApiUiOptions } from '@opra/api-ui';

Options​

OptionTypeDefaultDescription
pageTitlestringdocument.info.title<title> of the rendered page.
theme'dark' | 'light''dark'Color scheme.
customCssstring—Raw CSS injected after the built-in styles.
noncestring—CSP nonce applied to inline <script> and <style> tags.
scopestring—Only include types, fields, and operations visible in this scope. When scopes is also set, this is the scope currently being rendered.
langstring—Language the embedded API documentation is rendered in (matches ApiDocument#export({ lang })). Set by expressApiUi from ?lang=.
uiLangstringlangLanguage for the page's own interface texts (headings, buttons, tooltips). Resolved against @opra/api-ui's own i18n dictionaries — works even for a document with no translation bundles.
languagesstring[]—Languages offered in the header's language selector. The selector is hidden when fewer than two remain. Defaults to the document's translation bundles union the UI's own shipped languages.
docLanguagesstring[]—Subset of languages the document itself is documented in, so the selector can visually group them apart from interface-only ones.
scopesstring[]—All scope keys a reader can switch between (e.g. ['api', 'db']). When set with ≥ 2 entries the header shows a scope selector; switching causes a real navigation. Omit for a single fixed scope.
basePathstring—URL path the page is served from, excluding any scope segment. Used by the scope selector. Computed automatically by expressApiUi.
logoApiUiLogo | nullOPRA logoLogo shown at the top-left of the header. Pass null to show no logo.
studiobooleanfalseEnable the documentation studio: a write surface on the same page, reached via ?edit=1 or the header button. Requires the document's TranslationStore to implement save — throws at startup otherwise.
studioParamstring'edit'Query parameter that switches the page between reading and writing mode. Set automatically by expressApiUi when studio is on.
authoringobject—Low-level authoring configuration. Set by oprimp docs:studio and expressApiUi. Prefer studio: true over setting this directly.

interface ApiUiLogo {
src: string; // Image URL or data URI
alt?: string; // Alt text. Defaults to `label` or "Logo"
href?: string; // Click target. Defaults to the document's root page
label?: string; // Text shown next to the image
}

Example​

import { expressApiUi } from '@opra/api-ui';

app.use('/docs', expressApiUi(apiDocument, {
pageTitle: 'Acme API',
theme: 'light',
logo: { src: '/img/logo.svg', label: 'Acme', href: 'https://acme.com' },
scopes: ['public', 'internal'],
studio: true, // exposes ?edit=1 — protect behind auth in production
}));