Merge Fields

If you have linked a Data Source to a component, then you can use its values in component designs.

Usage in Text Elements

To display dynamic data, wrap the identifier for a column in double curly brackets. The system will automatically replace these tags with the corresponding row data during rendering.

Example: If you link a data source with headers like Name and Power, you can use these tags:

• {{ Name }}
• {{ Name}} (Whitespace inside the brackets is optional)

Identifiers

Merge field identifiers must be alphanumeric (letters, numbers, and underscores only). Deckle automatically generates valid identifiers from your data source column headers by removing spaces and special characters.

Formulas & Expressions

Merge fields support formula expressions using standard operators and functions:

• {{ Price + Tax }} - Arithmetic
• {{ IF(Type == \'Fire\', "Burnt", "Wet") }} - Conditional logic

Because identifiers are alphanumeric, you can use them directly in expressions without any special quoting.

For the full list of supported operators and functions, see the formula-evaluator documentation.

Default & Fallback Values

Sometimes a data source might have missing values or a specific row might be empty. You can define a fallback value using the pipe (|) symbol. This ensures your design never looks "broken" to the end user.

Icons

You can insert icons into text elements using single curly brackets with square brackets around the icon name:

{[icon-name]}

This renders a Font Awesome icon in the Regular style. Icon names use lowercase letters, numbers, and hyphens.

Examples:

Solid Icons

To use the solid variant of an icon, add the s: prefix before the icon name:

{[s:icon-name]}

Many icons are available in both regular and solid styles. The solid style is typically bolder and filled in, while the regular style uses outlines.

Available Icons

Only icons from the free Font Awesome collection are available. You can browse them at fontawesome.com.

Inline Classes

You can wrap text in a custom CSS class using single curly brackets with a colon separator:

{className: text content}

This renders as <span class="className">text content</span>, allowing you to apply custom styling to portions of your text.

Example:

You can also combine a class with an icon:

{className:[icon-name]}

This wraps the icon in a span with the specified class, letting you style individual icons differently.