# Parameters or props?

Choose where to store template content and where to supply data for each document.

You’ll see both **Props** and **Parameters** when editing a template. Both supply values to the content, but they serve different purposes: one stores values that belong to the template, while the other receives data for each document.

Keeping them separate lets you edit the design in one place and reuse it with different data, without reopening the editor for every run.

## 1. Choose where a value belongs

Use **Props** for values saved with the template, such as headings, labels, colors, and logos. Use **Parameters** for data supplied per run, such as a recipient, reference number, or list of items.

| Value | Where it belongs |
| --- | --- |
| A “Recipient” label | A prop on the section displaying it. |
| The recipient’s name | A parameter. |
| A shared color or logo | A Global prop. |
| A list of items | An array parameter. |
| A label with English/Vietnamese versions | A prop with variant-specific values. |

<figure class="doc-sim data-assets-illustration" aria-label="Props are saved with the template · Parameters receive data for each run">
<div class="sim-stage"><div class="ds-columns"><div class="sim-panel"><div class="ds-head"><strong>Props</strong></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>heading</b><span class="ds-type">Text <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="sim-prop-value"><small class="sim-label">VALUE</small><span class="sim-input sim-focus">Document title</span><span class="sim-embed">{{ props.heading }}</span></div></div></div><div class="sim-panel"><div class="ds-head"><strong>Parameters</strong></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>recipient</b><span class="ds-type">Text <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="sim-prop-value"><small class="sim-label">DEFAULT</small><span class="sim-input">Tembuilder</span><span class="sim-embed">{{ params.recipient }}</span></div></div></div></div></div>
<figcaption>Props are saved with the template · Parameters receive data for each run</figcaption>
</figure>

## 2. Props belong to the part you are editing

Select a section, Header, or Footer in **Structure**, then open **Props**. Select **Add prop** to add a value. Available types include Text, Number, Boolean, Array, Object, Color, and Asset.

In that part’s HTML, read the prop with `{{ props.heading }}`. For a shared Global prop, use `{{ global.props.propName }}`.

Different sections can have props with the same name. Check the section name above the Props list to see which part you are editing.

<figure class="doc-sim data-assets-illustration" aria-label="Select a section to edit its Props">
<div class="sim-stage"><div class="ds-path">Structure → Section → Props</div><div class="sim-panel"><div class="ds-head"><strong>Section</strong><span class="sim-control">＋ Add prop</span></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>heading</b><span class="ds-type">Text <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="sim-prop-value"><small class="sim-label">VALUE</small><span class="sim-input sim-focus">Document title</span><span class="sim-embed">{{ props.heading }}</span></div></div></div></div>
<figcaption>Select a section to edit its Props</figcaption>
</figure>

## 3. Parameters supply data for each run

Open **Parameters → Schema** to declare field names, types, and defaults. Use `{{ params.recipient }}` in HTML to read the `recipient` field.

Inspect the data object in **Payload**, then use that structure when entering data in **Run**. Supplying a new value changes the run’s data, not the props saved in the template.

See [Declare input data](/docs/data/parameters/) to add fields to a template.

<figure class="doc-sim data-assets-illustration" aria-label="Parameters → recipient → params.recipient">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Parameters</strong><span class="sim-control">＋ Add</span></div><div class="sim-tabs"><span class="sim-active">Schema</span><span>Payload</span></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>recipient</b><span class="ds-type">Text <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="sim-prop-value"><small class="sim-label">DEFAULT</small><span class="sim-input sim-focus">Tembuilder</span><span class="sim-embed">{{ params.recipient }}</span></div></div></div><div class="ds-link-arrow">↓</div><div class="ds-code"><code>{ "recipient": "Tembuilder" }</code></div></div>
<figcaption>Parameters → recipient → params.recipient</figcaption>
</figure>

## 4. Combine them in HTML

For example, `heading` stores a section heading as a prop, while `recipient` receives the reader’s name as a parameter:

```handlebars
<h1>{{ props.heading }}</h1>
<p>{{ params.recipient }}</p>
```

Edit `heading` in Props to change the template’s heading. Supply a different `recipient` to reuse the design for another person.

For multiple sets of labels or colors in one template, see [Template variants](/docs/data/variants/).

<figure class="doc-sim data-assets-illustration" aria-label="Template text and input data appear together in the document">
<div class="sim-stage"><div class="ds-flow"><div class="ds-code sim-focus"><code>&lt;h1&gt;{{ props.heading }}&lt;/h1&gt;</code><code>&lt;p&gt;{{ params.recipient }}&lt;/p&gt;</code></div><span class="ds-flow-arrow">→</span><div class="ds-paper"><small>Tembuilder</small><strong>Document title</strong><div><p>Tembuilder</p></div><div class="ds-lines"><i></i><i></i><i></i></div></div></div></div>
<figcaption>Template text and input data appear together in the document</figcaption>
</figure>

See the [Handlebars syntax reference](/docs/data/handlebars/) for conditions, scope, escaping, and advanced examples.
