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.

• ⚡ 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.

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

npm install @peakman/dagger.js

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

📘 See full directive documentation →

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 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>

📘 See full router documentation →

And more demos on how to work with Shoelace components.

We welcome all contributions! You can help by:

• Reporting bugs and issues

• Submitting pull requests for features or documentation

• Writing tutorials or sharing your use cases

• Spreading the word on social media

If you like dagger.js, you may:

• Star us on GitHub

• Share your projects and demos

• Join the discussions or rise issues

• Official Site: https://daggerjs.org
• Example Projects: https://codepen.io/dagger8224/pens
• GitHub: https://github.com/dagger8224/dagger.js
• NPM: https://www.npmjs.com/package/@peakman/dagger.js

MIT