branding-manifest

Pexip branding manifest

Pexip's official extensibility surface (other than plugins and call SDKs) is manifest.json — a single JSON file shipped under branding/ that declares colors, images, translations, hidden UI elements, app defaults, and plugins. Webapp3 loads it on startup and applies it before the React tree renders.

This skill captures the loader pattern. The manifest schema itself is documented in Pexip's docs (and in your project's pasted docs from earlier in this session) — this skill is about the runtime side: how to fetch, validate, apply, and react to manifest values.

The shape of the manifest

export interface Manifest {
    version: 0;                                   // schema version
    meta: {name: string; brandVersion: string};   // not used by app
    appTitle?: string;                            // browser tab title
    brandName: string;                            // {{brandName}} variable in translations
    backgroundColor?: string;
    overlay?: 'light' | 'dark';
    overlayOpacity?: number;
    colorPalette?: string[];                       // 11 hex strings (light → dark)
    images: {logo?, jumbotron?, background?};
    favicon?: {href: string; sizes?: string; type?: string};
    translations: Record<string, string>;          // {lang: path-to-json}
    availableLanguages?: string[];
    applicationConfig: Partial<ApplicationConfig>; // overrides for app-wide settings
    defaultUserConfig: Partial<DefaultUserConfig>; // overrides for user-tunable defaults
    plugins?: Plugin[];                            // see plugin-host skill
    customStepConfig?: CustomStepConfig;           // optional join-flow card
}

Loading

import type {Manifest} from './branding';

const path = new URL('./branding/manifest.json', document.baseURI);
const BRANDING_MANIFEST_PATH = path.toString();

export const getBrandingPath = (path: string) =>
    new URL(path, BRANDING_MANIFEST_PATH).toString();

export async function loadBranding(): Promise<Manifest> {
    const res = await fetch(BRANDING_MANIFEST_PATH, {
        credentials: 'include',  // for auth-protected branding paths
        mode: 'no-cors',         // allow same-origin only
    });
    return res.json() as Promise<Manifest>;
}