Get Started

Install PawaJS and create your first reactive component in minutes. No compiler, no virtual DOM, just real HTML and fine-grained reactivity.

Installation

npm
Recommended for projects
bash 

                 
npm install pawajs
CDN
Zero setup, drop into any HTML file
html 

                 
<script type="module" src="https://cdn.jsdelivr.net/npm/pawajs"></script>

Your First Component

A PawaJS component is just a JavaScript function that returns an html template. Create reactive state with $state, expose it with useInsert, and register the component.

js 

                 
import { html, $state, useInsert, RegisterComponent, pawaStartApp } from 'pawajs';

const Counter = () => {
  const count = $state(0);

  const increment = () => count.value++;
  const decrement = () => count.value--;

  useInsert({ count, increment, decrement });

  return html`
    <div class="flex items-center gap-4">
      <button on-click="decrement()">−</button>
      <span>Count is: @{count.value}</span>
      <button on-click="increment()">+</button>
    </div>
  `;
};

RegisterComponent(Counter);

// Mount the app
pawaStartApp(document.getElementById('app'));

Key points:
• $state(0) creates a fine-grained reactive signal
• useInsert({ ... }) makes variables available inside the template
• null binds reactive values
• on-click="..." attaches event listeners
• RegisterComponent converts Counter → <counter>

Minimal HTML Setup

Here’s the complete HTML file that loads the component above.

html 

                 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>PawaJS Counter</title>
</head>
<body>
  <div id="app">
    <counter></counter>
  </div>

  <script type="module" src="./app.js"></script>
</body>
</html>

Core Building Blocks

$state
Create reactive state
js 

                 
const count = $state(0);
count.value++; // triggers update
useInsert
Expose values to the template
js 

                 
useInsert({ count, increment });
html``
Tagged template for templates
js 

                 
return html`<div>@{count.value}</div>`;
RegisterComponent
Make components usable in HTML
js 

                 
RegisterComponent(Counter);
// → <counter></counter>

Essential Directives

PawaJS enhances HTML with powerful, familiar directives.

Conditional Rendering

html 

                 
<div if="user.value.isLoggedIn">Welcome back!</div>
<div else>Please log in</div>

List Rendering

html 

                 
<li for-each="item in items.value" for-key="{{item.id}}">
  @{item.name}
</li>

Event Handling

html 

                 
<button on-click="save()">Save</button>
<input on-input="name.value = e.target.value" />

Inline State

html 

                 
<div state-count="0">
  <button on-click="count.value++">@{count.value}</button>
</div>

Next Steps

Now that you have a working component, explore the rest of the documentation:

  • Props System — Learn how to pass reactive data between components
  • State Management — Global state, persistence, and computed values
  • Directives — Full list of available directives and modifiers
  • SSR & Continuity — Server-side rendering and resumability