Playground

Interpolation

PawaJS uses the @{} syntax to bind data to your HTML. It works for both text content and attributes.

Text Interpolation

The most basic form of data binding is text interpolation using the "at-curly-brace" syntax.

javascript 
                
const name = $state('PawaJS');
useInsert({ name });

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

Attribute Interpolation

You can use the same syntax inside HTML attributes to make them dynamic.

html 
                
<!-- Dynamic class -->
<div class="@{isActive.value ? 'active' : ''}"></div>

<!-- Dynamic href -->
<a href="/users/@{userId.value}">Profile</a>

<!-- Dynamic ID -->
<input id="field-@{fieldId.value}">

JavaScript Expressions

The content inside @{} is a JavaScript expression. You can perform math, call methods, or use ternary operators.

html 
                
<!-- Math -->
<p>Double: @{count.value * 2}</p>

<!-- String methods -->
<p>Uppercase: @{name.value.toUpperCase()}</p>

<!-- Logic -->
<p>Status: @{isOnline.value ? 'Online' : 'Offline'}</p>