r-text Directive

Bind expressions to textContent and display text without interpreting it as HTML.

r-text binds an expression to an element’s textContent.

It is the safest and most direct way to render text output.

r-textBinding

Bind expressions to textContent and display text without interpreting it as HTML.

Try it live

Text that follows your inputLive Regor

Live preview

Your message

Try typing <strong>Hello</strong>. It stays text.

TEXT CONTENT / LIVEHello, Regor.

text.ts

import { html, ref } from 'regor'

export function createText(interactive = false) {
  return { interactive, message: ref('Hello, Regor.') }
}

export const textTemplate = html` <div class="guide-demo guide-demo--split">
  <div class="guide-controls">
    <label for="text-message">Your message</label
    ><input
      id="text-message"
      type="text"
      maxlength="100"
      r-model="message"
      :value="message"
      :disabled="!interactive"
    />
    <p class="guide-hint">
      Try typing <strong>Hello</strong>. It stays text.
    </p>
  </div>
  <div class="guide-readout">
    <span class="guide-kicker">TEXT CONTENT / LIVE</span
    ><output
      class="directive-output"
      r-text="message"
      aria-live="polite"
    ></output>
  </div>
</div>`

browser.ts

import { createApp, useScope } from 'regor'
import { directiveExamples } from './examples'

const element = document.getElementById('directive-demo')
const name = element?.dataset.example
if (element && name && Object.hasOwn(directiveExamples, name)) {
  const example = directiveExamples[name as keyof typeof directiveExamples]
  createApp<object>(
    useScope<object>(() => example.create(true)),
    { element, template: example.template },
  )
}

Edit the message. The output binds directly to textContent.

Syntax

<p r-text="expression"></p>

Basic Example

<p r-text="message"></p>

When message changes, the element text updates reactively.

Expression Example

<p r-text="user.firstName + ' ' + user.lastName"></p>

`r-text` vs `{{ ... }}`

Both are valid. Prefer r-text when:

You want explicit binding at element level.
You are optimizing repeated row templates and want predictable binding points.
You want to avoid accidental surrounding whitespace behavior from text nodes.

Text stays text

Choose r-text for plain text. Markup characters are displayed rather than interpreted.

Security and Behavior

r-text writes plain text, not HTML.
HTML tags in values are escaped as text.
Use r-html only when you intentionally need HTML rendering.

Common Patterns

<li r-for="row in rows" :key="row.id">
  <span r-text="row.id"></span>
  <span r-text="row.label"></span>
</li>

This is a clear and performant default for list text output.