<pacem-text> writes a binding onto the page as plain text, and rewrites it on every change. Nothing more, which is why it's the fastest. Counters, prices, names, dates: wherever a value shows up in a sentence.

Hi <pacem-text text="{{ #user.model.name }}"></pacem-text>, your total is
<pacem-text text="{{ $pacem.currency(#cart.model.total, 'EUR') }}"></pacem-text>.

Usage

Bind text. Whatever the binding yields becomes the element's text, as is: numbers and booleans get stringified.

Format on the way. The $pacem helpers do the usual chores right in the binding: date, number, currency, timespan, padleft, size (bytes).

<pacem-text text="{{ $pacem.date(#order.model.placed, 'short') }}"></pacem-text>
<pacem-text text="{{ $pacem.number(#stats.model.ratio, { style: 'percent' }) }}"></pacem-text>

It's text, never markup: a value like <b>hi</b> shows its angle brackets. That's what makes it the safe choice for anything users typed.

Keep a placeholder. Children you write inside stay until the first real value arrives, then get replaced:

<pacem-text text="{{ #profile.result.name }}">loading…</pacem-text>

Need styling? <pacem-text> is a bare element: no hide, no css-class. Wrap it, or use <pacem-span text="…">, which has the full visual kit of a <pacem-panel>.

Examples

A price tag, in any currency

One amount, formatted per currency and locale by $pacem.currency as you change them.

Text is just text

Type some HTML: the comment preview shows it literally, nothing gets interpreted.