Interpolation

Bind reactive state directly to your HTML using the powerful @{} syntax.

Text Interpolation

The most basic form of data binding is text interpolation. Use the @{} tag to embed any JavaScript expression that resolves to a string or number.

js 

                 
const MyComponent = () => {
    const name = $state('World');
    useInsert({ name });

    return html`<h1>Hello, @{name.value}!</h1>`;
};

Attribute Binding

Interpolation isn't just for text content; it works seamlessly with HTML attributes. This is commonly used for dynamic classes, IDs, or ARIA labels.

Dynamic Classes
Toggle CSS classes based on reactive state.
html 

                 
<div class="badge @{isActive.value ? 'bg-green-500' : 'bg-gray-500'}">
    Status: @{isActive.value ? 'Active' : 'Inactive'}
</div>

You can also bind to any other standard attribute:

html 

                 
<button id="@{componentId}" disabled="@{isLoading.value}">
    Submit
</button>

Expressions & Logic

Inside the @{} tags, you have the full power of JavaScript. You can perform calculations, call functions, or use ternary operators.

html 

                 
<p>The total is: @{items.value.reduce((acc, i) => acc + i.price, 0)}</p>
<p>User level: @{calculateLevel(user.points)}</p>
Performance Note

Unlike Virtual DOM frameworks, PawaJS interpolation is fine-grained. When count.value changes, the runtime updates only the exact text node or attribute dependent on that value. The rest of the component and DOM tree remain untouched.