Alpine.js integration for NodX TypeScript.

This package gives you type-safe helpers for every Alpine.js directive. Instead of writing attribute strings by hand, you call a function and get an ordinary NodX attribute node that can be passed to any element.

Installation

# Deno (JSR)
deno add --save-exact jsr:@varavel/nodx-alpine

# Node / Bun / Deno via npm
npm install --save-exact @varavel/nodx-alpine

This package requires jsr:@varavel/nodx@^1.0.0 (or npm:@varavel/nodx) as a peer. If you already use NodX, you already have it.

Quick Start

import { Button, Div, Text } from "@varavel/nodx";
import { XBind, XData, XOn, XShow, XText } from "@varavel/nodx-alpine";

const counter = Div(
  XData("{ count: 0 }"),
  Button(
    XOn("click", "count++"),
    Text("Increment"),
  ),
  Div(
    XText("count"),
  ),
);

console.log(counter.render());

<div x-data="{ count: 0 }">
  <button x-on:click="count++">Increment</button>
  <div x-text="count"></div>
</div>

NodX handles escaping and rendering. Alpine takes over in the browser.

You can also use a namespace import if you prefer:

import * as N from "@varavel/nodx";
import * as Alpine from "@varavel/nodx-alpine";

const node = N.Div(
  Alpine.XData("{ open: false }"),
  N.Button(Alpine.XOn("click", "open = !open"), "Toggle"),
  N.Div(Alpine.XShow("open"), "Hello"),
);

Why this package

Writing Alpine directives as raw strings works, but it is easy to mistype x-bind: or x-on: and you get no help from the editor. These helpers are tiny wrappers around Attr("x-...") that keep the usual NodX flow:

• You stay in TypeScript. No template strings, no manual escaping.
• You get autocompletion for every directive name.
• The output is exactly the HTML Alpine expects.

Usage

x-data

import { Div } from "@varavel/nodx";
import { XData } from "@varavel/nodx-alpine";

const node = Div(XData("{ count: 0 }"));
console.log(node.render());
// <div x-data="{ count: 0 }"></div>

x-bind

import { Button, Text } from "@varavel/nodx";
import { XBind } from "@varavel/nodx-alpine";

const node = Button(XBind("disabled", "isDisabled"), Text("Click me"));
console.log(node.render());
// <button x-bind:disabled="isDisabled">Click me</button>

x-on

import { Button } from "@varavel/nodx";
import { XOn } from "@varavel/nodx-alpine";

const node = Button(XOn("click", "open = !open"), "Toggle");
console.log(node.render());
// <button x-on:click="open = !open">Toggle</button>

Combining directives

import { Div } from "@varavel/nodx";
import { XData, XEffect, XShow, XTransition } from "@varavel/nodx-alpine";

const panel = Div(
  XData("{ open: false }"),
  XShow("open"),
  XTransition(),
  XEffect("console.log(open)"),
  "Panel content",
);

console.log(panel.render());
// <div x-data="{ open: false }" x-show="open" x-transition x-effect="console.log(open)">Panel content</div>

Escape hatch

X lets you build any x- directive that does not have a dedicated helper:

import { Div } from "@varavel/nodx";
import { X } from "@varavel/nodx-alpine";

const node = Div(X("foo", "bar"));
console.log(node.render());
// <div x-foo="bar"></div>

const cloak = Div(X("cloak"));
console.log(cloak.render());
// <div x-cloak></div>

Available Functions

| Function | Alpine.js docs | | ---------------------- | ---------------------------------------------------------- | | X(key, value?) | Generic x-[key] | | XData(value) | x-data | | XInit(value) | x-init | | XShow(value) | x-show | | XBind(target, value) | x-bind | | XOn(event, value) | x-on | | XText(value) | x-text | | XHTML(value) | x-html | | XModel(value) | x-model | | XModelable(value) | x-modelable | | XFor(value) | x-for | | XTransition() | x-transition | | XEffect(value) | x-effect | | XIgnore() | x-ignore | | XRef(value) | x-ref | | XCloak() | x-cloak | | XTeleport(value) | x-teleport | | XIf(value) | x-if | | XId(value) | x-id |

All helpers return a NodX Node, so they can be used anywhere you would use Attr, Class or Id.

How it works

Each helper is a thin wrapper around Attr("x-...", value) from @varavel/nodx. For example, XData is essentially:

function XData(value) {
  return Attr("x-data", value);
}

Valueless directives like x-transition, x-cloak and x-ignore call Attr without a value, so they render as a bare attribute name (e.g. <div x-transition>).

Because the result is a real NodX attribute node, it participates in normal element rendering: attributes are collected in insertion order and escaped automatically.

Documentation

Full API reference with examples for every function is available on JSR:

https://jsr.io/@varavel/nodx-alpine/doc

If you want to browse the signatures or check a directive quickly, start there.

License

MIT - see LICENSE.