pow.js 💥

An extremely small and lightweight templating framework.

😲 Under 250 LOCs!
🤏 Only 3½ KiB minified script
🧩 No other dependencies
✅ 100% test coverage

Check out the interactive documentation

Project goals

• A very small library that can be included without additional dependencies
• Provides clear templating and interpolation
• Extensible functionality through function calling and templates
• Works without any server
• Fast enough to be used in a production environment
• Deterministic output

Features

• Dynamic content
• Interpolated attributes
• Conditional elements
• Loops
• Reusable templates and custom elements
• Refreshable sections
• Aynchronous support

Installation

Get the npm module or import directly from any javascript module:

import pow from 'https://ifyates.github.io/pow.js/latest/pow.min.js'

Looking at CDN hosting soon.

Example

See it in action at JSFiddle 🏃‍➡️

// examples/quickstart.html
<script type="module">
    import pow from '../src/pow.js'

    const data = {
        "url": "https://github.com/IFYates/pow.js",
        "title": "pow.js",
        "description": "An extremely small and lightweight templating framework.",
        "tags": [ "javascript", "templating", "framework" ],
        "creation": {
            "author": "IFYates",
            "date": "2024-12-09"
        }
    }
    pow.apply(document.body, data)
</script>

<h1>{{ title }}</h1>
<h2>{{ description }}</h2>
<p><a href="{{ url }}">See project page</a></p>
<p pow data="creation">
    Created by <em>{{ author }}</em> on {{ date }}
</p>
<p>
    Tags:
    <template pow array="tags">
        [<span>{{ $data }}</span>]<span ifnot="$last">, </span>
    </template>
</p>

Learn more

Read the full documentation