VariablePicker

Browse the merge variables available to a document template, grouped by context (client / org / financial / custom). Click a variable to insert its {{token}} at the editor caret.

Demo

Template body

Insert variable

Client

Organization

Financial

Custom

Usage

// +page.server.ts — registry is server-only
import { getVarsForCategory } from "$lib/server/template-vars"

export const load = async () => ({
  groups: getVarsForCategory(template.category, template.available_vars),
})

<script>
  import { VariablePicker } from "jatui"
  let { data } = $props()
  let editor: HTMLTextAreaElement | null = $state(null)
</script>

<textarea bind:this={editor} bind:value={body}></textarea>

<VariablePicker
  groups={data.groups}
  targetEl={editor}
  onInsert={(token) => console.log(token)}
/>

Props

Prop	Type	Description
`groups`	`TemplateVarGroup[]`	From `getVarsForCategory()`. Empty groups are omitted.
`targetEl`	`HTMLTextAreaElement \| HTMLInputElement \| null`	Optional. Inserts `{{name}}` at the caret and fires an input event.
`onInsert`	`(token, varName) => void`	Called with the inserted token and bare name.
`searchable`	`boolean`	Show the filter box. Default `true`.
`compact`	`boolean`	Denser layout for narrow sidebars.
`title`	`string`	Panel heading. Default "Variables".