Skip to main content Link Search Menu Expand Document (external link)

<var> : The Variable Storage Element

On this page

Summary

The <var> element is used to store values in the document data stack for later retrieval. It can store calculated values, intermediate results, or any data that needs to be accessed across different parts of the document, including within repeating templates.

Summary

The <var> element serves a dual purpose in Scryber:

  1. Semantic Markup: Represents a variable or mathematical expression (rendered in italic by default)
  2. Data Storage: Stores values in the document parameters using data-id and data-value attributes

When a <var> element includes both data-id and data-value attributes, the value is stored in Document.Params and can be retrieved anywhere in the document using ``.

Usage 

<!-- Store a value in the document data stack -->
<var data-id="totalAmount" data-value=""></var>

<!-- Later retrieve the value anywhere in the document -->
<p>Total: </p>

<!-- Within repeating templates -->
<div data-bind="">
    <p>Item total: </p>
    <p>Grand total: </p>
</div>

Supported Attributes

Attribute Type Description
data-id string The key name to store the value under in the document parameters
data-value expression The value to store (supports data binding expressions)
id string Unique identifier for the element
class string CSS class name(s) for styling
style string Inline CSS styles
title string Title text (tooltip)
hidden string If set to “hidden”, the element is not visible

Data Storage and Retrieval

Storing Values

Values are stored during the data binding phase using the data-id and data-value attributes:

<var data-id="myVariable" data-value=""></var>

Retrieving Values

Stored values can be retrieved anywhere in the document using the params object:

Scope

Values stored in <var> elements are available:

  • Throughout the entire document after they are set
  • Inside nested data binding contexts (repeating templates)
  • Across different sections and pages
  • In conditional expressions and calculations

Notes

  • The <var> element is hidden automatically if it has no text content
  • By default, any visible content is rendered in italic font style (semantic HTML behavior)
  • Values are stored during the data binding phase, so they must be set before they are referenced
  • The data-value attribute supports full expression syntax including calculations
  • Stored values persist for the lifetime of the document generation
  • Multiple <var> elements can be used to store different values with unique data-id keys

Examples

Example 1: Basic Value Storage 

<var data-id="username" data-value=""></var>
<p>Welcome back, !</p>

Example 2: Storing Calculated Values 

<var data-id="totalPrice" data-value=""></var>
<var data-id="taxAmount" data-value=""></var>
<var data-id="grandTotal" data-value=""></var>

<p>Subtotal: $</p>
<p>Tax (8%): $</p>
<p>Grand Total: $</p>

Example 3: Using in Repeating Templates 

<!-- Store the customer name at document level -->
<var data-id="customerName" data-value=""></var>

<!-- Use it within a repeating template -->
<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Price</th>
            <th>Customer</th>
        </tr>
    </thead>
    <tbody>
        <tr data-bind="">
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Example 4: Counter for Item Numbers 

<var data-id="itemCount" data-value="0"></var>

<div data-bind="">
    <var data-id="itemCount" data-value=""></var>
    <p>Item #: </p>
</div>

Example 5: Storing Date Information 

<var data-id="reportDate" data-value=""></var>
<var data-id="reportYear" data-value=""></var>

<h1>Annual Report </h1>
<p>Generated on: </p>

Example 6: Page Total Calculations 

<!-- Store page number or section -->
<var data-id="currentSection" data-value="Financial Summary"></var>

<!-- Calculate total -->
<var data-id="pageTotal" data-value="0"></var>
<div data-bind="">
    <var data-id="pageTotal" data-value=""></var>
    <p>: $</p>
</div>

<p><strong>Section: </strong></p>
<p><strong>Total: $</strong></p>

Example 7: Conditional Logic with Stored Values 

<var data-id="hasErrors" data-value=""></var>
<var data-id="statusColor" data-value=""></var>

<div style="color: ">
    <p>Status: </p>
</div>

Example 8: Multi-page Document with Consistent Data 

<!-- Store company info at start -->
<var data-id="companyName" data-value=""></var>
<var data-id="companyLogo" data-value=""></var>

<!-- Use on every page header -->
<header>
    <img src="" alt="Logo" />
    <h1></h1>
</header>

<!-- Multiple pages can reference the same stored values -->
<section>
    <p>This report is provided by </p>
</section>

Example 9: Running Totals Across Sections 

<var data-id="runningTotal" data-value="0"></var>

<h2>Q1 Sales</h2>
<div data-bind="">
    <var data-id="runningTotal" data-value=""></var>
    <p>: $ (Running Total: $)</p>
</div>

<h2>Q2 Sales</h2>
<div data-bind="">
    <var data-id="runningTotal" data-value=""></var>
    <p>: $ (Running Total: $)</p>
</div>

<h2>Year-to-Date Total: $</h2>

Example 10: Storing Complex Objects 

<var data-id="selectedProduct" data-value=""></var>

<h2>Featured Product: </h2>
<p>Price: $</p>
<p>Description: </p>

Example 11: Max/Min Value Tracking 

<var data-id="maxValue" data-value="0"></var>
<var data-id="minValue" data-value="999999"></var>

<div data-bind="">
    <var data-id="maxValue" data-value=""></var>
    <var data-id="minValue" data-value=""></var>
    <p>Reading: </p>
</div>

<p>Maximum: </p>
<p>Minimum: </p>
<p>Range: </p>

Example 12: Invoice with Line Item Totals 

<var data-id="invoiceNumber" data-value=""></var>
<var data-id="invoiceSubtotal" data-value="0"></var>

<h1>Invoice #</h1>

<table>
    <thead>
        <tr>
            <th>Description</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr data-bind="">
            <var data-id="lineTotal" data-value=""></var>
            <var data-id="invoiceSubtotal" data-value=""></var>
            <td></td>
            <td></td>
            <td>$</td>
            <td>$</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Subtotal:</td>
            <td>$</td>
        </tr>
        <tr>
            <td colspan="3">Tax (8%):</td>
            <td>$</td>
        </tr>
        <tr>
            <td colspan="3"><strong>Total:</strong></td>
            <td><strong>$</strong></td>
        </tr>
    </tfoot>
</table>

Example 13: Nested Repeating Templates 

<var data-id="reportTitle" data-value=""></var>

<div data-bind="">
    <var data-id="deptName" data-value=""></var>
    <h2> - </h2>

    <div data-bind="">
        <p>Employee:  (Department: )</p>
        <p>Report: </p>
    </div>
</div>

Example 14: Storing Configuration Values 

<!-- Store configuration at document start -->
<var data-id="currency" data-value="USD"></var>
<var data-id="currencySymbol" data-value="$"></var>
<var data-id="locale" data-value="en-US"></var>
<var data-id="dateFormat" data-value="MM/dd/yyyy"></var>

<!-- Use throughout document -->
<p>Amount: 100.00 </p>
<p>Locale: </p>

Example 15: Visible Content with Storage 

<!-- Store value AND display it -->
<p>
    Tax Rate: <var data-id="taxRate" data-value="">%</var>
</p>

<!-- Later use the stored value in calculations -->
<p>Tax Amount: $</p>

Example 16: Accumulating Statistics 

<var data-id="totalOrders" data-value="0"></var>
<var data-id="completedOrders" data-value="0"></var>
<var data-id="cancelledOrders" data-value="0"></var>

<div data-bind="">
    <var data-id="totalOrders" data-value=""></var>
    <var data-id="completedOrders" data-value=""></var>
    <var data-id="cancelledOrders" data-value=""></var>
    <p>Order : </p>
</div>

<h2>Order Statistics</h2>
<p>Total Orders: </p>
<p>Completed: </p>
<p>Cancelled: </p>
<p>Success Rate: %</p>

Example 17: Section Headers with Context 

<div data-bind="">
    <var data-id="sectionTitle" data-value=""></var>
    <var data-id="sectionIndex" data-value=""></var>

    <h2>Section : </h2>

    <div data-bind="">
        <p>Item  in </p>
    </div>
</div>

Example 18: Average Calculations 

<var data-id="sum" data-value="0"></var>
<var data-id="count" data-value="0"></var>

<div data-bind="">
    <var data-id="sum" data-value=""></var>
    <var data-id="count" data-value=""></var>
    <p>Score: </p>
</div>

<p><strong>Average Score: </strong></p>

Example 19: Conditional Display Based on Stored Values 

<var data-id="itemCount" data-value=""></var>
<var data-id="hasItems" data-value=""></var>

<div data-if="">
    <p>Showing  items</p>
    <div data-bind="">
        <p></p>
    </div>
</div>

<div data-if="">
    <p>No items to display</p>
</div>

Example 20: Multi-level Totals 

<var data-id="grandTotal" data-value="0"></var>

<div data-bind="">
    <var data-id="categoryTotal" data-value="0"></var>
    <h2></h2>

    <div data-bind="">
        <var data-id="categoryTotal" data-value=""></var>
        <var data-id="grandTotal" data-value=""></var>
        <p>: $</p>
    </div>

    <p><strong>Category Total: $</strong></p>
</div>

<h2>Grand Total: $</h2>

See Also