Overview

The Frontend Template Engine is a client-side processor that runs in the visitor’s browser. It lets you build HTML that reacts to data (cart items, checkout totals, URL parameters, etc.) and updates when that data changes—without a full page reload.

This documentation covers the frontend template system only. A separate backend Template Engine (server-side) uses different syntax (e.g. {{ }}, @if, @foreach). You can use both on the same page: backend for initial render, frontend for live updates.

The frontend engine is the last of four layers that rewrite a page, and it is the only one that runs in the browser. Split-test and dynamic containers were already filled on the server, before this engine existed — so a <template-if> wrapped around a container does not stop the container from being filled. Read Rendering pipeline before mixing layers.

When to use it

Use the frontend template engine when:

Content depends on the visitor — Cart items, item count, order total, selected bumps, coupon status.
You want live updates — Adding to cart, changing quantity, applying a coupon, or toggling bumps should update the UI immediately.
You control the layout — You design the structure (rows, labels, buttons) in the page builder; only the data is dynamic.

If the content is the same for everyone and does not change after load (e.g. a fixed headline), use normal content or page variables instead.

How it works

Data lives in window.efScope — The app (and cart/checkout plugins) put data here: cartItems, checkout, query, etc.
You use custom tags and expressions — <template-if>, <template-foreach>, [[ path ]], ef-text, @click, and similar.
Scope changes update automatically — window.efScope is reactive. Changing values (including nested values and arrays) re-evaluates conditions, re-renders loops, and refreshes bindings.

There is no virtual DOM; reactivity is scope- and event-driven with automatic change detection.

Quick start

1. Put reactive data in `window.efScope`

<script>
  window.efScope = window.efScope || {};
  window.efScope.items = [
    { code: 'A1', name: 'Product Alpha', price: 29.99, quantity: 2 },
    { code: 'B2', name: 'Product Beta', price: 14.50, quantity: 1 }
  ];
  window.efScope.currency = 'USD';
</script>

2. Use custom tags and expressions in your HTML

<h2 data-ef-cloak>Cart</h2>

<template-if data-condition="items.length > 0">
  <p data-ef-cloak>You have [[ items.length ]] items.</p>
</template-if>
<template-else>
  <p class="muted" data-ef-cloak>Your cart is empty.</p>
</template-else>

<template-foreach data-each="item in items">
  <div class="cart-line" data-ef-cloak>
    <span>[[ item.name ]]</span>
    <span>Qty: [[ item.quantity ]]</span>
    <span>[[ formatPrice(item.price * item.quantity, currency) ]]</span>
  </div>
</template-foreach>

3. Change scope directly (auto reactive)

window.efScope.items.push({ code: 'C3', name: 'New Item', price: 9.99, quantity: 1 });
window.efScope.currency = 'USD';

data-ef-cloak — Hides the element until the template processor has run (removes the attribute when done). Use it to avoid a flash of raw [[ ... ]] or the wrong branch. On ElasticFunnels-hosted pages the platform already ships this stylesheet in <head>: it hides [data-ef-cloak] plus every engine tag — template-if, template-else-if, template-if-else, template-else, template-foreach, template-vars, template-set, template-partial / partial. If you embed the engine elsewhere, hide the full list; a tag left out of it paints its raw content on first paint and then disappears.

On offer/checkout pages, the application and plugins (cart, checkout, bumps) usually manage efScope for you.

What the engine provides

Feature	Purpose
`[[ expression ]]`	Insert a value (or expression) in text or attributes.
`<template-if>` / `<template-else-if>` / `<template-else>`	Show one block based on a condition.
`<template-foreach>`	Repeat a block once per item in an array.
`ef-text` / `ef-html`	Bind an element’s text or HTML to an expression (`data-` aliases also supported).
`ef-href` / `ef-title` / `ef-alt` / `ef-placeholder`	One-way attribute bindings from scope to DOM attributes.
`ef-value` / `data-template-value`	Two-way form binding (Vue v-model style) for inputs, selects, textareas.
`@click` (and other events)	Run an expression when the user clicks (or triggers another event).
`:checked` / `:disabled` / `:value`	One-way bindings from scope to DOM properties.
`@mounted` / `@unmounted` / `@visible`	Element lifecycle and viewport-visibility handlers (with `.once` / `.every` modifiers for `@visible`).
Built-in functions	`formatPrice`, `cartCount`, `cartSubtotal`, `upper`, `lower`, `titleCase`, etc.
`ef.template.watch/computed`	Runtime API for watchers and computed values via `window.ef.template`.

Builder-friendly bindings

For page-builder work, attribute bindings are often easier to preview and edit than mixed text tokens:

<!-- token style -->
<h2>[[ checkout.product_title ]]</h2>

<!-- binding style -->
<h2><span ef-text="checkout.product_title">Product Title</span></h2>

You can add these directly from the Data Attributes panel (right sidebar) when a component is selected. Details and examples are in Syntax, Scope & Data, Bindings & Events, Functions, Cart, and Checkout.

Relation to other docs

Frontend Template Engine (this section) — Full reference: syntax, scope, bindings, cart, checkout, limitations, debugging.
Backend Template Engine — Documented in Backend Template Engine (server-side {{ }}, @if, @foreach, etc.).

Next: Syntax.

Get Started

Essentials

Analytics & Metrics

Funnels

Page Events

Pages

Merchants

Affiliates

Integrations

Members Area

Forms & Data

Subscriptions

Emails

Products & Sales

Domains & Customization

Development & Debugging

Frontend Template Engine

Backend Template Engine

CRM

Backend Scripts

When to use it

How it works

Quick start

1. Put reactive data in `window.efScope`

2. Use custom tags and expressions in your HTML

3. Change scope directly (auto reactive)

What the engine provides

Builder-friendly bindings

Relation to other docs

​When to use it

​How it works

​Quick start

​1. Put reactive data in window.efScope

​2. Use custom tags and expressions in your HTML

​3. Change scope directly (auto reactive)

​What the engine provides

​Builder-friendly bindings

​Relation to other docs

When to use it

How it works

Quick start

1. Put reactive data in `window.efScope`

2. Use custom tags and expressions in your HTML

3. Change scope directly (auto reactive)

What the engine provides

Builder-friendly bindings

Relation to other docs