---
title: "Variables | Customer's Canvas"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/concepts/variables/"
archived: false
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Customer's Canvas Hub"
    versions: ["cloud"]
    entity_id: "https://customerscanvas.com/products/hub#software-application"
  - product: "Design Editor"
    versions: ["7.4"]
---

# Variables

**Applies to:** Customer's Canvas On-Premises; Customer's Canvas Hub cloud; Design Editor 7.4

> What variables are in the Design Editor, which kinds of variables it supports, and how they are used in variable data printing.

Sometimes you may want to use the Design Editor to prepare a _template_ for a variable data printing scenario rather than a final artwork. It means that you want to create not only regular "static" design elements such as text boxes, images, or shapes, but also insert _variable elements_.

## What is a variable?

Variables are the elements that are supposed to be processed before creating a PDF file. Their values should be replaced based on the _data entries_ provided downstream, before requesting a print-ready PDF file. In some scenarios, you populate data from a _dataset_ (i.e. a series of data entries), which provides you with multiple copies of an artwork with different data inserted into the same variables.

## Kinds of variables

The Design Editor supports two kinds of variables:

- **Variable elements**. The entire element is a variable, and a data entry replaces its entire content. It can be a text element (both text areas and regular point texts), a barcode or QR code, or even an image placeholder.
- **InString variables**. This is a variable inserted inside a text block, like:

   ```mustache
   Dear {{FirstName}}!

   We are happy to announce that you won ${{Amount}}. Claim your
   money by contacting your account manager {{AccountManagerName}}
   at {{AccountManagerPhone}}.

   Best regards,
   {{AccountManagerName}}
   ```

   Here, `{{FirstName}}`, `{{Amount}}`, `{{AccountManagerName}}`, and `{{AccountManagerPhone}}` are InString variables that are interpolated right into the text content.

![An example of variables](./images/Variables.png)

## Ways to add variables

There are three ways to add variables to a design:

1. Add them to a template beforehand:
   - Variable elements can be added via the `<VAR>` marker or by tagging an element as a variable through the Template Editor in Customer's Canvas Hub.
   - InString variables can be added by inserting a variable name surrounded by double curly brackets, as in the example above.
2. Let users insert variable elements through the Toolbox. See [Insert variable through Toolbox](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/configure-variables.md#insert-variables-through-the-toolbox).
3. Let users make elements variable in the editor itself. See [Make variables through the editor](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/configure-variables.md#make-variables-through-the-editor).

![Variables in Design Editor UI](./images/VariablesInUI.png)

## Variable names and data entries

Each variable has a name. For variable elements, it is the element name. For InString variables, it is the content between `{{` and `}}`, including all characters such as spaces. For example, the name of `{{First Name}}` is `First Name`.

When multiple elements or InString variables share the same name, the same value is inserted into all of them. For example, if you have a variable named **Url** as both a text element and a QR code, and you populate the **Url** data field, the value is inserted into both.

## See also

- [Configure variables in the Design Editor](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/configure-variables.md)
- [Personalized rendering](https://customerscanvas.com/docs/on-premises/design-editor/apis/personalized-rendering.md)