App Client

The app client is the runtime entry point for a TailorKit app. It maps screen keys to Preact components and is loaded by the host through the sandbox worker.

Create A Client

import { createClient } from "@tailorkit/app";
import HomeScreen from "./screens/home";

const client = createClient({
  screens: {
    "/home": HomeScreen,
  },
});

export default client;

Each key in screens must match a screen path from the generated TailorKit types and start with /.

Screen Components

Screen components receive props generated from the host schema.

import { h } from "preact";
import type { ScreenProps } from "#tailorkit";

type HomeScreenProps = ScreenProps<"/home">;

export default function HomeScreen({ context }: HomeScreenProps) {
  return h("h1", null, context.page.title);
}

The host passes the mounted screen match chain when rendering the app. The app client selects the first screen it implements and renders it with that match's { screen, context, isLoading } props.

Runtime Behavior

When a host renders:

<tailor.AppView app={app} />

TailorKit resolves the app's client URL, loads the client in the worker, and renders the current screen match chain into the app.

If the deepest screen is not implemented by the app client, the worker walks back through parent matches. If none of the mounted matches are implemented, the worker reports an error for that app.