Custom UI

What you build, and what Crosslink already built

This page used to show how to build your own pairing screen, SAS confirmation and connection UI. That was wrong: Crosslink ships all of it, and applications that reimplemented it ended up with worse, inconsistent versions of screens the framework already maintains.

Build your application. Crosslink builds the bridge.

The split

Crosslink owns — you mount these, you do not write them:

• the desktop pairing card, QR and nine-digit code — Pairing Card
• mobile first-pair, code entry and SAS confirmation
• Add to Home Screen, and Continue in Browser
• the trusted-device handoff into your app
• offline, reconnecting and revoked screens — Offline and Reconnect
• the cached app shell and service worker — Mobile Bootstrap
• the Crosslink mark and attribution — Branding

You own:

• your desktop application UI
• your mobile application UI, from crosslink.onConnected(rpc) onward
• your RPC methods and business logic
• your application’s name, icon and colours — Branding

Theming

Colours, icon, name and light/dark. That is the supported customisation surface, and it is documented in Branding and Theming.

Building a client without Crosslink’s UI

CrosslinkClient is public and you can drive pairing yourself. This is a genuinely unusual path — a native shell, an automated test harness, a headless integration — not a starting point for an application.

import { CrosslinkClient } from "@crosslink/sdk-browser";

const client = await CrosslinkClient.create({ deviceName: "My Device" });
await client.pairFromQr(uri, ["notes.read"]);
const rpc = await client.connect();

Taking this path means you are also responsible for everything the bootstrap was doing: pairing states and their errors, SAS confirmation, the install handoff that stops an installed app re-pairing, reconnection with backoff, revocation handling, and the offline shell. Those are not small, and they are the reason CrosslinkMobileBootstrap exists.

If you only want it to look different, set accentColor instead.