> ## Documentation Index > Fetch the complete documentation index at: https://repost.sh/docs/llms.txt > Use this file to discover all available pages before exploring further. # Generate types > Turn a real webhook payload into typed models from the forward TUI — pick a language, name the output, and tune inference and renderer options. export const CliTuiTypes = ({view = "code", caption}) => { const W = 760; const u = n => `${(n / W * 100).toFixed(3)}cqw`; const MONO = "ui-monospace, SFMono-Regular, Menlo, monospace"; const C = { bg: "var(--fd-surface)", chip: "var(--fd-node-bg)", chipBorder: "var(--fd-node-border)", border: "var(--fd-surface-border)", accent: "var(--fd-accent)", text: "var(--fd-text)", muted: "var(--fd-muted)", green: "var(--fd-ok)", blue: "var(--fd-accent-cool)", yellow: "var(--fd-warn)" }; const tint = (c, pct) => `color-mix(in srgb, ${c} ${pct}%, transparent)`; const faint = "color-mix(in srgb, var(--fd-muted) 62%, transparent)"; const role = { key: C.accent, str: C.green, kw: C.accent, fn: C.blue, num: C.yellow, ident: C.text, punct: C.muted }; const languages = ["TypeScript", "TypeScript Zod", "TypeScript Effect Schema", "Python", "Go", "Java", "C#", "Rust", "Swift", "Kotlin", "JSON Schema", "JavaScript"]; const selectedLang = 1; const json = [[["{", "punct"]], [[' "id"', "key"], [": ", "punct"], ['"evt_1QscWJ2eZvKYlo2C"', "str"], [",", "punct"]], [[' "type"', "key"], [": ", "punct"], ['"checkout.session.completed"', "str"], [",", "punct"]], [[' "customer_email"', "key"], [": ", "punct"], ['"ada@example.com"', "str"], [",", "punct"]], [[' "amount_total"', "key"], [": ", "punct"], ["4200", "num"], [",", "punct"]], [[' "currency"', "key"], [": ", "punct"], ['"usd"', "str"], [",", "punct"]], [[' "created_at"', "key"], [": ", "punct"], ['"2026-06-16T14:04:47Z"', "str"]], [["}", "punct"]]]; const zod = [[["import", "kw"], [" * ", "punct"], ["as", "kw"], [" z ", "ident"], ["from", "kw"], [" ", "punct"], ['"zod"', "str"], [";", "punct"]], [], [["export", "kw"], [" ", "punct"], ["const", "kw"], [" WebhookPayloadSchema", "ident"], [" = ", "punct"], ["z", "ident"], [".", "punct"], ["object", "fn"], ["({", "punct"]], [[' "id"', "key"], [": ", "punct"], ["z", "ident"], [".", "punct"], ["string", "fn"], ["().", "punct"], ["optional", "fn"], ["(),", "punct"]], [[' "type"', "key"], [": ", "punct"], ["z", "ident"], [".", "punct"], ["string", "fn"], ["().", "punct"], ["optional", "fn"], ["(),", "punct"]], [[' "customer_email"', "key"], [": ", "punct"], ["z", "ident"], [".", "punct"], ["string", "fn"], ["().", "punct"], ["optional", "fn"], ["(),", "punct"]], [[' "amount_total"', "key"], [": ", "punct"], ["z", "ident"], [".", "punct"], ["number", "fn"], ["().", "punct"], ["optional", "fn"], ["(),", "punct"]], [[' "currency"', "key"], [": ", "punct"], ["z", "ident"], [".", "punct"], ["string", "fn"], ["().", "punct"], ["optional", "fn"], ["(),", "punct"]], [[' "created_at"', "key"], [": ", "punct"], ["z", "ident"], [".", "punct"], ["coerce", "fn"], [".", "punct"], ["date", "fn"], ["().", "punct"], ["optional", "fn"], ["(),", "punct"]], [["});", "punct"]], [["export", "kw"], [" ", "punct"], ["type", "kw"], [" WebhookPayload", "ident"], [" = ", "punct"], ["z", "ident"], [".", "punct"], ["infer", "fn"], ["<", "punct"], ["typeof", "kw"], [" WebhookPayloadSchema", "ident"], [">;", "punct"]]]; const options = [{ label: "Make all properties optional", on: true }, { label: "Detect date & times", on: true }, { label: "Detect enums", on: true }, { label: "Detect maps (merge similar classes)", on: true }, { label: "Don't treat $ref as reference", on: false }, { label: "Combine similar classes", on: true }]; const codeLine = (tokens, n, blank) =>
{n} {blank ? " " : tokens.map((t, i) => {t[0]})}
; const pane = (title, body) =>
{title}
{body}
; const leftPane = view === "options" ? pane("Options",
{options.map((o, i) =>
{i === 0 ? "▸" : ""} {o.on ? "[x]" : "[ ]"} {o.label}
)}
) : pane("Request Body", json.map((t, i) => codeLine(t, i + 1, t.length === 0))); const rightPane = pane("TypeScript Zod", zod.map((t, i) => codeLine(t, i + 1, t.length === 0))); const footer = view === "options" ? [["←/→", "language"], ["↑/↓", "navigate"], ["space", "toggle"], ["enter", "edit"], ["o", "close options"], ["esc", "close"]] : [["←/→", "language"], ["↑/↓", "scroll"], ["tab", "name"], ["o", "options"], ["c", "copy"], ["esc", "close"]]; return
{caption &&
{caption}
}
{}
Listening on https://nuvera-dev.bucket.repost.sh
{}
Generate Types
Type name: > WebhookPayload (tab to edit)
{}
{languages.map((l, i) => i === selectedLang ? {"◀"}{l}{"▶"} : {l})} {"▶"}
{}
{leftPane} {rightPane}
{}
{footer.map(([k, d]) => {k} {d} )}
; }; In a `repost forward` session, select an event with a JSON body and press `t` to open the **Generate Types** view. It turns the captured request body into typed models in the language of your choice — generated from real traffic, not a hand-written schema. The view is a live split: the captured request body on the left, the generated code on the right. Switch languages with `←` / `→` and the code regenerates from the same payload. ## Supported languages Cycle through targets with the windowed selector. Each language renders the same payload in its idiomatic shape: Plain `interface` / `type`, `Zod` schemas, or `Effect Schema`. JavaScript with JSDoc, or a JSON Schema document. Python, Go, Java, C#, Rust, Swift, and Kotlin. ## Name the output The generated root type is named `WebhookPayload` by default. Press `tab` to edit the **Type name**, then `enter` to commit — the code regenerates with the new name applied to every reference. ```ts theme={"languages":{"custom":["/languages/repost.json"]}} // Type name: OrderCreated export const OrderCreatedSchema = z.object({ /* ... */ }); export type OrderCreated = z.infer; ``` ## Inference options Press `o` to open the options panel. The first group controls how the payload is **interpreted**, and these choices persist as you switch languages. | Option | Default | Effect | | ----------------------------------- | ------- | ---------------------------------------------------------------- | | Make all properties optional | Off | Marks every field optional instead of inferring required fields. | | Detect date & times | On | Recognises ISO date/time strings as date types. | | Detect enums | On | Infers enums from repeated string values. | | Detect maps (merge similar classes) | On | Treats uniform objects as maps rather than fixed shapes. | | Don't treat \$ref as reference | Off | Inlines `$ref` instead of resolving it as a reference. | | Combine similar classes | On | Merges objects with the same shape into one type. | Toggle a row with `space`; the code regenerates immediately. ## Language options Below the inference group, each language exposes its own **renderer** options — booleans, value pickers (`◀ ▶`), and editable text fields. These are specific to the selected language and reset when you switch, so a TypeScript-only option does not carry over to Go. ## Keyboard | Key | Action | | ---------------------- | ----------------------------------------------- | | `t` | Open Generate Types for the selected event. | | `←` / `→` or `h` / `l` | Switch language. | | `tab` | Edit the type name. | | `o` | Open or close the options panel. | | `↑` / `↓` | Scroll the code, or navigate options when open. | | `space` | Toggle or cycle the focused option. | | `enter` | Edit a text option, or commit an edited value. | | `c` | Copy the generated code. | | `esc` | Close the view. | Your preferred language and option choices are saved to the CLI config directory and restored on the next session. See [Authentication & configuration](/docs/cli/authentication#configuration-location) for where that lives.