Power The Web.

Reactive

Web

Runtime.

A lightweight, powerful web runtime with reactivity, designed for simplicity and performance. Experience seamless the power, simple and intuitive state management without the bloat.

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

Designed for modern web development

PawaJS provides a robust set of features to help you build performant and scalable web applications with ease.

Fine-Grained Reactivity

True reactivity with Time-Slicing. Updates are batched and scheduled within a 16ms frame budget to ensure buttery smooth UI.

Server-Side Rendering

Built-in SSR support with hydration (Continues Rendering Model) capabilities ensures fast initial loads and SEO friendliness.

Component Architecture

Build encapsulated components that manage their own state, making your code reusable and maintainable.

Lightweight & Fast

Minimal footprint with maximum performance. Designed to be lean and mean.

Intuitive Directives

Use familiar HTML-based syntax with powerful directives like if, for-each, and on-event.

Progressive Enhancement

Start simple and scale up. PawaJS adapts to your needs, from widgets to full SPAs.

Simplicity by Design

PawaJS feels like an upgrade to the standards you already know. We call it HTML++ and VanillaJS++.

HTML++

Write HTML that does more. With intuitive attributes like if, for-each, smart boolean attributes, and <template> for invisible grouping, you get a template engine that feels native.

html 
                
<!-- Clean, readable, powerful -->
<div class="user-profile">
    <h1 if="user.value.isLoggedIn">
        Welcome, @{user.value.name}!
    </h1>
    
    <ul class="features-list">
        <li for-each="feature in features.value" for-key="{{feature.id}}">
            @{feature.name}
        </li>
    </ul>
    
    <!-- Use <template> to group elements without adding a node to the DOM -->
    <template if="user.value.isAdmin">
        <button>Admin Panel</button>
        <button>Settings</button>
    </template>
    
    <!-- Attributes like 'disabled' toggle automatically based on state -->
    <button disabled="@{isLoading}" on-click="logout()">Sign Out</button>
</div>

VanillaJS++

It's just JavaScript. PawaJS works seamlessly with any vanilla JS library. No complex adapters or wrappers required—just import and use.

javascript 
                
import { html, useInsert, useRef, runEffect } from "pawajs";
import Chart from "chart.js"; // Any library works!

const ChartComponent = () => {
    const canvasRef = useRef();

    runEffect(() => {
        // Direct access to DOM elements
        new Chart(canvasRef.value, {
            type: 'bar',
            data: { /* ... */ }
        });
    }, null); // Runs once on mount

    useInsert({ canvasRef });
    return html`<canvas ref="canvasRef"></canvas>`;
};

Smart DOM Lifecycle

PawaJS handles the dirty work of DOM management so you don't have to.

  • Automatic Cleanup: When components or elements are removed, PawaJS automatically disposes of all associated effects, event listeners, and state subscriptions.
  • Exit Transitions: Simply add the is-exit directive. PawaJS will wait for any active CSS transitions or Web Animations to complete before removing the element from the DOM.
html 
                
<!-- PawaJS waits for the transition to finish -->
<div if="isOpen.value" is-exit="" class="@{!isOpen.value?'fade-exit':''}">
    I fade out smoothly when removed!
</div>

<style>
.fade-exit { transition: opacity 0.3s; opacity: 1; }
</style>

Built for Production

Advanced features like State Persistence and Resumability come standard.

State Persistence

Don't lose your state on refresh. PawaJS can automatically sync any state to localStorage with a single argument.

javascript 
                
// Persist to localStorage key 'user-pref'
const theme = $state('light', 'user-pref');

// Updates are automatically saved
const toggle = () => {
    theme.value = 'dark'; 
};

Continuity (CRM)

PawaJS moves beyond hydration. With the Continuity Rendering Model, the client "resumes" the server's work, attaching listeners to the existing DOM without expensive re-renders.

Server ➔ Client

Zero Re-renders. Instant Interactivity.

Get Started in Seconds

bash 
                
npm install pawajs

Ready to build? Check out the documentation for a quick start guide.

Join the Community

PawaJS is open source and community driven. Join us on GitHub to contribute, report issues, or star the project.