dagger.js

October 3, 2025 · View on GitHub

dagger.js is a lightweight, zero-boilerplate, pure runtime front-end framework built for developers who value simplicity and performance. It brings a pure HTML + JavaScript development experience with no virtual DOM, no compilation step, and no complex abstractions — just clean, declarative UI.

✨ Features

⚡ Zero Learning Curve: Use plain HTML and native JavaScript — no JSX, no DSLs, no build tools required.
⚡ Zero API: dagger.js works in pure declarative mode, modules and directives provide everything you need to build your application.
⚡ Reactive by Nature: Automatic UI updates when your data changes — no manual DOM updates.
⚡ Built-in Routing: Simple, declarative routing system with no third-party dependency.
⚡ Modular by Design: Clear separation of logic and template, with automatic scoped data.
⚡ Tiny & Fast: Core runtime is just a few KB, with near-native performance.
⚡ Web Native: Fully compatible with Web Components (such as https://shoelace.style/) and modern browser APIs.

✨ Installation

Simply insert the following script tag (CDN) insides the head section of the entry html page of your application to setup dagger.js:

<script type="module" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/@peakman/dagger.js@0.9.21/dagger.js" defer></script>

Or install dagger.js via npm:

npm install @peakman/dagger.js

✨ Directive Reference

dagger.js provides a set of pre-defined directives to declaratively render UI elements and bind data to them:

Directive	Description
`*checked`	Dynamically toggle the checked state
`*class`	Dynamically toggle class names
`*focus`	Set focus on element when true
`*text`	Render plain text
`*html`	Render raw HTML
`*each`	Loop through an array
`*exist`	Conditional rendering
`*value`	Two-way binding for input elements
`*selected`	Dynamically toggle the selected state
`*style`	Dynamically bind style values
`*watch`	Run expression when dependencies change
`+eventName`	Event binding, e.g., `+click`, `+keyup`
`+load`	Run before the element is created
`+loaded`	Run after the element is mounted
`+unload`	Run before the element is removed
`+unloaded`	Run after the element is removed
`+sentry`	Router guards
`@raw`	Render raw HTML content without parsing
`@directive`	Dynamically adding directives

📘 See full directive documentation →

✨ Module Configuration

dagger.js provides a simple and intuitive way to configure reusable modules for your application:

<script type="dagger/modules">
    {
        "view_module": "#view",
        "script_module": "#script",
        "style_module": "#style"
        ...
    }
</script>

📘 See full module documentation →

✨ Router Configuration

Router is a built-in feature of dagger.js that allows you to easily define routes and handle navigation between them:

<script type="dagger/routers">
    {
        "mode": "hash",
        "prefix": "",
        "default": "/",
        "routing": {
            "path": "",
            "tailable": true,
            "constants": {
                "title": "root title",
                "template": "view1"
            },
            "variables": {
                number: 0
            },
            "modules": ["script", "view1"],
            "children": [{
                "path": "parent1",
                "tailable": true,
                "constants": {
                "title": "parent1 title",
                "template": "view2"
                },
                "modules": "view2"
            }]
        }
        ...
    }
</script>