Prompt Template Library

Demo & usage

More examples

When to use

• Managing reusable prompt templates with variables, versions and usage stats.
• Teams standardizing prompts across an AI product.
• For a single inline prompt field, a Text Field or Mention input is enough.

Async states

• loading
• error
• retry

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `templates`, `loading` and `error`.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Gallery, list, editor and picker presentations.
• Variable injection with live token count.
• Category filter and version history.
• Emits `templateSelect` with the chosen template id.
• Secret detection is **on out of the box**, using the pack’s own `SV_AI_COMMON_PATTERNS` (`X-2`) rather than a second list that would drift. A prompt library is where API keys get pasted into a system message and shared with a team: somebody drops a working key in to see whether the call goes through, it works, and the template is saved, named and handed to nine colleagues — with no commit and no code review anywhere in the path. `[secretPatterns]` narrows or widens it.
• The warning renders in the `editor` variant, where the text is edited, as well as in the `grid` footer, and the scan runs on the prompt **as it stands** — a key pasted into a variable is caught as well as one typed into the template.
• **Decision: the component emits, the host blocks.** It has no save action of its own, so it cannot block one. `(secretScanChange)` emits `{ id, scan }` (`PromptSecretScanEvent`) when a template is selected and whenever what the scan found changes — including back to clean, so a host can unblock — but not per keystroke; `selectedSecretScan()` exposes the same result for a host that reads it at save time. Copy is deliberately not blocked: putting a key on your own clipboard to call your own model is ordinary use, sharing it through the library is not.
• The warning names the **blast radius, not the rule**: 'matches pattern provider-key' tells the author nothing they can act on. And it is a detector, not a redactor — silently rewriting somebody’s prompt is how a template stops working with no explanation.
• `[tokenizer]` drives every token figure — the prompt count in the grid footer, list rows, editor header, picker card and both playground sides — and the basis renders beside each one **as text**, not only as a tooltip. The basis travels with the number (`svPromptTokenCount` returns `{ tokens, basis, estimated }`), so a tokenizer that fails falls back to the estimate *and* to the estimate’s label, marked `~`, rather than naming a tokenizer over a figure it never produced. `tokensEst` is shown as the author’s estimate of **output** tokens and is never presented as the count.
• Why the basis matters: a token count is a claim about a tokenizer — four characters per token is an **English-prose** approximation, Chinese runs closer to one character per token and minified JSON lands somewhere else again, so an unlabelled figure is a budget built on somebody else’s language. A tokenizer that throws or returns nonsense falls back to the estimate rather than taking the surface down — these come from a host’s own WASM build as often as not.

Best practices

• Do: Show a live token count so authors keep prompts within model limits.
• Do: Version templates so changes are auditable and reversible.
• Tip: Use the picker variant to embed template selection inside another flow.

Accessibility

• Editor fields are labelled; search inputs carry an aria-label.
• Category filter reports aria-pressed.
• Filters and cards are keyboard navigable.