TailorKit

TailorKit apps run in a sandbox. That helps, but it does not make every value safe automatically.

Trust Boundaries

TailorKit sandboxes app JavaScript for you, so embedded apps cannot directly reach into your page or application state. Your host app still decides which fields, callbacks, and actions are available.

The production rule is simple: expose the pieces an app needs, validate the values it sends back, and keep side effects limited to the work your app expects.

Validate Fields

Keep schemas narrow. Prefer enums, bounded numbers, booleans, and structured objects over broad strings.

Links And Sources

Validate links

Do not render arbitrary strings as href or src values. Accept only safe protocols, usually https: and mailto:.

./src/lib/tailorkit.ts

import { z } from "zod";

const Link = {
  fields: z.object({
    href: z.url({ protocol: /^(https|mailto)$/ }),
  }),
};

Text And HTML

Treat long-form text as text, not markup. Avoid accepting raw HTML unless you sanitize it before rendering.

Keep Callbacks UI-Only

UI Events

Callbacks are for UI events like onClick, onOpenChange, and onValueChange. Do not use them to call APIs, mutate records, or start billing or auth flows.

Trusted Actions

For trusted work, expose a host-owned action.

Constrain Styling

Styles And Classes

Avoid arbitrary style objects, raw class names, and HTML. Prefer TailorKit primitives and theme tokens so apps can feel native without controlling layout, positioning, or visual hierarchy.

Sensitive UI

Keep trusted UI recognizable

Destructive, billing, auth, invite, role, and permission controls should look and behave like host-owned UI. Do not let an embedded app visually replace those flows.

Production Checklist

Before deploying:

Validate fields with narrow schemas such as enums, bounded numbers, booleans, and structured objects.

Validate every link href and media src before rendering it.

Limit URLs to expected protocols, usually http: and https:.

Treat user-provided text as text, not raw HTML.

Keep callbacks limited to UI events such as onClick, onOpenChange, and onValueChange.

Use actions for API calls, record mutations, billing, auth, invites, role changes, and other side effects.

Avoid arbitrary style objects unless each allowed property and value is constrained.

Avoid raw class names; prefer TailorKit primitives and theme tokens.

Keep destructive, billing, auth, invite, role, and permission controls visually recognizable as trusted UI.

Deploying to production