Playground

Directives

Directives are special attributes that add dynamic behavior to your HTML. PawaJS provides a set of powerful directives for control flow, event handling, and DOM references.

Conditional Rendering (if/else-if/else)

Use if to conditionally render elements based on a truthy value. You can use else for the fallback.

html 
                
<div if="user.value.role === 'admin'">
    Welcome back, Admin!
</div>
<div else-if="user.value.role === 'editor'">
    Welcome back, Editor!
</div>
<div else="">
    Welcome back, User
</div>

List Rendering (for-each)

Render a list of items using for-each. You must specify the item alias and the index alias (optional), and provide a unique for-key.

html 
                
<ul>
    <li for-each="item, index in items.value" for-key="{{item.id}}">
        @{index + 1}. @{item.name}
    </li>
</ul>

Event Handling (on-*)

Listen to DOM events using the on- prefix followed by the event name.

html 
                
<button on-click="handleClick()">Click Me</button>
<input on-input="input.value=e.target.value" value="@{input.value}">

Switch Case (switch)

For complex conditions, use switch, case, and default.

html 
                
<div>
    <div switch="status.value" case="'loading'">Loading...</div>
    <div case="'success'">Data loaded!</div>
    <div case="'error'">Something went wrong.</div>
    <div default>Unknown status</div>
</div>

DOM References (ref)

Get a direct reference to a DOM element using ref. The reference must be initialized with useRef and passed to useInsert.

javascript 
                
const inputRef = useRef();
useInsert({ inputRef });

// In template
html`<input ref="inputRef">`

// Accessing
inputRef.value.focus();

Waits for finished animation or transition (is-exit) before removal

Waits for element to finish animating or finishes it transition before pawajs removes it.

html 
                
<div if="open.value" class="@{open.value? 'h-full':'h-0'} transition-all duration-300" is-exit="">
I will log when removed
</div>

Lifecycle Hooks (mount, unmount)

Execute code when an element is added to or removed from the DOM.

html 
                
<div mount="console.log('I am mounted!')" unmount="console.log('I am leaving!')">
    Lifecycle Demo
</div>

Time-Based Directives (after-*, every-*)

Schedule actions directly in your template using time modifiers. Time is specified in milliseconds.

One-time Delay (after)

html 
                
<!-- Hides itself after 2 seconds -->
<div after-[2000]="show.value = false" if="show.value">
    I will disappear in 2 seconds
</div>

Interval (every)

html 
                
<!-- Increments count every second -->
<div every-[1000]="count.value++">
    Seconds passed: @{count.value}
</div>

Rendering Control (Escape Directives)

Control how and where PawaJS processes elements using these special attributes.

Skip Compilation (pawa-avoid, s-pawa-avoid)

Use pawa-avoid to prevent PawaJS from processing an element on the client. Use s-pawa-avoid to prevent processing on the server.

html 
                
<!-- Ignored by PawaJS on client -->
<div pawa-avoid="">
    @{thisWillNotBeInterpolated}
</div>

<!-- Ignored by PawaJS on server -->
<div s-pawa-avoid="">
    Server ignores this
</div>

Client Only (only-client)

Elements with only-client are skipped during server-side rendering and only rendered in the browser.

html 
                
<div only-client="">
    This content only appears in the browser.
</div>

Keyed Re-rendering (key)

Force a component or element to re-render from scratch when the key changes.

html 
                
<!-- Re-creates the component when user type changes -->
<user-profile key="type[user.value.type]"></user-profile>