Playground

Introduction

The HTML-First Runtime Engine for the Modern Web.

PawaJS is a revolutionary HTML-first runtime engine that reimagines how web applications are built. By synthesizing the most powerful features from the ecosystem, PawaJS delivers a development experience that is both familiar and radically efficient.

It eliminates the overhead of the Virtual DOM by leveraging fine-grained reactivity similar to SolidJS, ensuring that updates are surgical and performance is optimal by default. Yet, it retains the composable component architecture developers love from React and Vue, allowing for scalable and maintainable codebases.

Inspired by Alpine.js and Qwik, PawaJS embraces the DOM as the source of truth with intuitive directives and a focus on resumability, enabling instant interactive experiences without heavy hydration costs.

PawaJS is built for versatility. Whether you are creating static pages, robust Progressive Web Apps (PWAs), or complex Server-Side Rendered (SSR) applications via pawa-ssr, PawaJS has you covered. It also supports Island architecture, allowing you to optimize performance by hydrating only what's necessary.

HTML-First

Write semantic HTML enhanced with powerful directives. The DOM is your state of truth.

Fine-Grained Reactivity

Surgical updates without VDOM overhead. Change only what needs to change.

Component Architecture

Encapsulated, reusable logic. Scale from simple widgets to complex SPAs with ease.

Runtime Engine

Lightweight and fast. Hydrates instantly and resumes state where the server left off.

Coming Soon

Backend Agnostic

Render anywhere. The PawaJS team is actively working on making the engine compatible with any backend environment.

Universal Versatility

Build Static Pages, PWAs, SSR apps (via pawa-ssr), or use Island architecture. One framework, any output.

Quick Look

Here is a simple counter component. Notice how state is handled directly without complex hooks or boilerplate.

javascript

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

export function Counter  () {
  const count = $state(0);
  
  useInsert({ count });

  return html`
    <button on-click="count.value++">
      Count is: @{count.value}
    </button>
  `;
};
RegisterComponent(Counter);