Skip to content

Previewing with Sample Data

The Default value you set on each variable (in the Variable tab) serves double duty:

  1. Design-time preview — the canvas shows the default while you’re editing, so you see realistic placeholder text instead of {{variable_name}}.
  2. Render-time fallback — if a variable is Optional and no value is provided at render time, the default is used.

Set meaningful defaults for all variables early in your design process. For example:

  • first_name"Alex"
  • discount_code"SAVE20"
  • profile_image → a URL to a placeholder headshot.

Open the Variables panel (variable icon in the left sidebar rail) to see a list of every variable in the current template.

Variables panel listing four variables: a Text type (first_name, Required), a Text type (discount_code, Optional), a QR type (redemption_url, Required), and an Image type (profile_photo, Optional). Each row shows the variable name in code style, the type icon, and the Required/Optional badge. Clicking a row selects that element.

Click any row to jump to the element on the canvas and open its properties.

The most complete preview is through the Generate dialog:

  1. Click Generate in the header.
  2. The Preview tab opens. On the left is a Variables (N) panel listing all variables with input fields.
  3. The fields are pre-filled with default values — change them to test different scenarios.
  4. Click Generate Preview to render the template with the current values and see the result immediately.

See Rendering a Single Image for the full Generate dialog walkthrough.

  • Long text: Test with both short and long values when using text elements to check that Auto-Fit or overflow settings behave correctly.
  • Missing values: Leave a required variable blank in the Generate dialog — the render will use the default. Try leaving an optional one blank to confirm the fallback works.
  • Images: Test with a real image URL to confirm the fit mode (Cover/Contain/Fill) looks right at the actual element size.