Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA template editor where typing {{ lists the available variables with sample values, inserts the closed {{name}} and previews the message with the samples, flagging variables that do not exist. Use this when people write emails or messages with merge fields.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for email, SMS and notification templates, where the author needs to know which variables exist, sees an example of each and must be told when one is misspelled.
Do not use it when the content is not templated. Use a plain textarea.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
variables | { key, label?, sample }[] | - | Available variables; key may contain dots, e.g. customer.name. |
value | string | - | The template (controlled). |
defaultValue | string | "" | Initial template. |
onValueChange | (value: string, unknown: string[]) => void | - | Runs on every change with the unknown variable names. |
combobox; options read customer.name, for example Ada.region named Preview that renders the sample values; unknown variables are kept as typed in the preview.Unknown variable: customer.nme so a typo is heard.renderTemplate and unknownVariables are exported and have no DOM dependency.The pattern ships with a Testing Library test (template-variable-picker-braces.test.tsx) that covers opening on {{, inserting with closing braces, the preview and unknown variables.