# Create template variants

Reuse one design with different sets of labels, colors, or content through variants.

Use **Variants** when one design needs several sets of labels, colors, or alternative content. Keep the HTML/CSS and input data together in one template, then choose the appropriate variant for a run.

For example, a variant can use Vietnamese labels while the base keeps English labels. Override only the values that need to differ; the rest continue to come from the base.

## 1. Understand the base and inheritance

**Standard** is the base variant, marked **BASE** in the list. Edit shared HTML/CSS and structure there.

Other variants inherit values they have not overridden. Editing a Prop in a variant stores a separate value for that variant. A later change to the same base value does not replace the override.

Non-base variants may only expose Props for editing. Return to Standard to change shared HTML/CSS or structural configuration.

<figure class="doc-sim data-assets-illustration" aria-label="Standard is the base · A variant reuses it with selected changes">
<div class="sim-stage"><div class="ds-variants sim-panel"><div class="ds-head"><strong>VARIANTS</strong><span class="sim-control">＋</span></div><div class="ds-variant-row sim-focus"><b>Standard</b><span class="sim-badge">BASE</span></div><div class="ds-variant-row"><b>VI</b><small>Inherited + custom values</small></div></div></div>
<figcaption>Standard is the base · A variant reuses it with selected changes</figcaption>
</figure>

## 2. Add or copy a variant

Open **Variants** and select **＋**. When only Standard exists, the app creates a variant from the base. With multiple variants, the menu offers:

- **From Standard**: start from the base without a separate set of overrides.
- **Duplicate**: copy the selected variant, including its overrides.

Use the rename control or double-click a variant’s name to rename it. Choose a recognizable name such as `VI`, `EN`, or a design name. Names must be unique within the template.

<figure class="doc-sim data-assets-illustration" aria-label="Variants → ＋ → From Standard / Duplicate">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>VARIANTS</strong><span class="sim-control sim-focus">＋</span></div><div class="ds-rows"><div><span>From Standard</span><small>Start from the base</small></div><div><span>Duplicate VI</span><small>Keep VI’s overrides</small></div></div></div></div>
<figcaption>Variants → ＋ → From Standard / Duplicate</figcaption>
</figure>

## 3. Edit the differences

Select the variant, then select a section in **Structure → Props**. Change the labels, colors, or other props that need their own values.

Structure’s visibility controls also let you hide a page or section in the selected variant, allowing one template to omit content in a particular version of its presentation.

Keep recipient names and item lists in **Parameters**. A variant selects template values; Parameters supplies data for the run.

<figure class="doc-sim data-assets-illustration" aria-label="Edit a Prop with the variant selected to save an override">
<div class="sim-stage"><div class="ds-variant-picker"><span class="sim-control">Standard</span><span class="sim-control sim-focus">VI</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">Tài liệu</span><span class="sim-embed">{{ props.heading }}</span></div></div><div class="ds-compare-values"><span>Standard: Document</span><span>VI: Tài liệu</span></div></div>
<figcaption>Edit a Prop with the variant selected to save an override</figcaption>
</figure>

## 4. Choose a variant for a PDF

In **Run**, choose a version and select the exact name in **Variant**. You can reuse the same data object across variants that share the same input fields.

For API calls, `variant` is the **variant name**, not the version name or template slug. See the [Render API reference](/docs/developers/render-reference/) when preparing a request.

Changes to a base value reach variants still inheriting it. Values overridden by a variant remain unchanged.

<figure class="doc-sim data-assets-illustration" aria-label="Run → select the variant name for this PDF">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>RUN</strong></div><div class="ds-run-fields"><div><small>VERSION</small><span class="sim-input">v1</span></div><div><small>VARIANT</small><span class="sim-input sim-focus">VI <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><div class="ds-code"><code>{ "recipient": "Tembuilder" }</code></div><div class="sim-form-footer ds-pad"><span class="sim-control sim-dark">Render</span></div></div></div>
<figcaption>Run → select the variant name for this PDF</figcaption>
</figure>
