Value Interpolation & Data Binding

RTXUI matches standard web templates by using compile-time reflection to bind C++ variables directly into your HTML templates.

---

1. Text Interpolation

To project dynamic content into your text nodes, wrap the C++ variable or member name in curly braces {}. During compilation and render ticks, the values are automatically formatted as strings and injected into the DOM:

<span>Welcome back, {username}!</span>
<div>Current Score: {score}</div>

---

2. Binding Member Fields

All public member variables inside a component class are registered using the Bind() method in the constructor:

#include <rtxui/rtxui.hpp>

class ProfileApp : public rtxui::Component<ProfileApp> {
 public:
  std::string username = "Alice";
  int score = 42;

  ProfileApp() {
    Bind(username);
    Bind(score);
  }

  std::string_view Setup() {
    return R"html(
      <div class="card">
        <span>Username: {username}</span>
        <span>Score: {score}</span>
      </div>
    )html";
  }
};

---

3. Computed Properties & Methods

You can also bind dynamic evaluations to C++ member functions. This is useful for derived data or complex logic that shouldn't live in the template. Use the same Bind() method to register a const member function:

class CounterApp : public rtxui::Component<CounterApp> {
 public:
  int count = 10;

  int double_count() const { return count * 2; }

  CounterApp() {
    Bind(count);
    Bind(double_count);
  }

  std::string_view Setup() {
    return R"html(
      <div>
        <span>Count: {count}</span>
        <span>Double: {double_count}</span>
      </div>
    )html";
  }
};

---

4. Attribute Interpolation

You can bind dynamic variables to HTML attributes (such as element classes, check statuses, or dimensions) in two styles:

React-style Binding

Include curly braces around the C++ variable name inside the attribute's double-quotes:

<div class="box {color_class}"></div>
<checkbox checked="{is_active}">Active Option</checkbox>

Vue-style Binding

Prefix the attribute name with a colon : and pass the raw variable name directly as the value:

<div :title="color_class"></div>
<checkbox :checked="is_active">Active Option</checkbox>

NOTE

:class and :id are not supported using Vue-style binding. For classes and IDs, use React-style interpolation instead: class="{variable}".

Both styles perform the same underlying reactive linking, so you can choose the format you prefer.

---

Interactive Demo

Below is the interactive tab view for a live counter demonstrating simple value binding:

Fullscreen Demo

// Copyright 2026 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.
//
// Reactive state and `{...}` interpolation.
//
// Bind(count) registers a member as reactive state: the DOM is patched whenever
// it changes. Bind() on a const method registers a computed value that is
// re-evaluated from that state, and Bind() on a plain method registers an
// `onclick` handler.
//
// Try it: click the buttons, or Tab to them and press Enter.
#include <rtxui/rtxui.hpp>

using namespace rtxui;

class Counter : public Component<Counter> {
 public:
  int count = 0;

  int double_count() const { return count * 2; }

  void Increment() { count++; }
  void Decrement() { count--; }

  std::string_view view = R"html(
      <div class="card">
        <h1>Counter</h1>

        <div class="readout">
          <div class="stat">
            <span class="label">Count</span>
            <span class="value">{count}</span>
          </div>
          <div class="stat">
            <span class="label">Doubled</span>
            <span class="value accent">{double_count}</span>
          </div>
        </div>

        <div class="actions">
          <button onclick="Decrement">-  Decrement</button>
          <button onclick="Increment">+  Increment</button>
        </div>
      </div>

      <style>
        self {
          --bg: rgb(13, 17, 23);
          --border: rgb(48, 54, 61);
          --text: rgb(230, 237, 243);
          --accent: rgb(88, 166, 255);

          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          background-color: var(--bg);
          color: var(--text);
        }
        .card {
          border: tall;
          border-color: var(--border);
          background-color: rgb(22, 27, 34);
          padding: 1 3;
          width: 46;
        }
        h1 {
          color: var(--accent);
          font-weight: bold;
          margin-bottom: 1;
        }
        .readout {
          display: flex;
          gap: 3;
          margin-bottom: 1;
        }
        .stat {
          display: flex;
          flex-direction: column;
          flex-grow: 1;
        }
        .label {
          color: rgb(139, 148, 158);
        }
        .value {
          font-weight: bold;
        }
        .value.accent {
          color: var(--accent);
        }
        .actions {
          display: flex;
          gap: 2;
        }
        button {
          flex-grow: 1;
          border: tall;
          border-color: var(--border);
          background-color: var(--bg);
          color: var(--text);
          padding: 0 1;
          text-align: center;
          transition: background-color 0.15s ease, border-color 0.15s ease;
        }
        button:hover, button:focus {
          border-color: var(--accent);
          color: var(--accent);
        }
        button:active {
          background-color: var(--accent);
          color: var(--bg);
        }
      </style>
    )html";

  Counter() {
    Bind(count);
    Bind(double_count);
    Bind(Increment);
    Bind(Decrement);
  }
};

int main() {
  auto app = Ref<Counter>::New();
  Screen screen(app);
  screen.Loop();
  return 0;
}