CDN Setup

The fastest way to try PawaJS. Just drop a single script tag into any HTML page — no build step required. (~17.7 kB minified)

1. Basic HTML + CDN

Create an HTML file and include the PawaJS CDN script. Then define and register your components inside a module script.

html 

                 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PawaJS CDN Demo</title>
</head>
<body>
    <div id="app">
        <counter></counter>
    </div>

    <!-- PawaJS CDN -->
    <script type="module" src="https://cdn.jsdelivr.net/npm/pawajs-cdn@latest/dist/pawajs.iife.min.js"></script>

    <script type="module">
        const { pawaStartApp, $state, RegisterComponent, useInsert, html } = Pawa;

        // 1. Define the component
        const Counter = () => {
            const count = $state(0);
            useInsert({ count });

            return html`
                <div class="p-8 border rounded-lg shadow-md flex flex-col items-center">
                    <h1 class="text-2xl font-bold">Count: @{count.value}</h1>
                    <button
                        on-click="count.value++"
                        class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
                    >
                        Increment
                    </button>
                </div>
            `;
        };

        // 2. Register it as a custom element
        RegisterComponent(Counter);

        // 3. Start the app
        document.addEventListener('DOMContentLoaded', () => {
            const app = document.getElementById('app');
            pawaStartApp(app);
        });
    </script>
</body>
</html>

How it works

1. The CDN script exposes a global Pawa object containing the core API (($state, html, RegisterComponent, useInsert, pawaStartApp, …).

2. Components are plain functions that return an html`...` template. Reactive state is created with $state() and exposed to the template via useInsert().

3. RegisterComponent(Counter) turns the function into a custom element (<counter> that can be used in the HTML.

4. Finally call pawaStartApp(rootElement) to mount and hydrate the application.

Notes

  • Always use type="module" for both the CDN script and your own script.
  • The example above uses the IIFE build. Prefer a specific version in production instead of @latest.
  • For larger projects, the recommended approach is still a proper build setup (Vite, etc.) rather than the CDN.