Docs · @astro-dx/attributes

@astro-dx/attributes

dx-if, dx-show, dx-for — add reactive behaviour directly to any HTML element.

Setup — register + bootstrap

typescript

import { signal } from '@astro-dx/core';
import { register, bootstrap } from '@astro-dx/attributes';

const isOpen = signal(false);
const items  = signal<{ name: string }[]>([]);

// Register signals by name — names must match dx-* attribute values
register({ isOpen, items });

// Walk the DOM, apply bindings
bootstrap();

dx-show

Toggles visibility. The element stays in the DOM.

html

<div dx-show="isOpen">Content</div>

dx-if

Creates and destroys the element based on signal value.

html

<div dx-if="isOpen">Content</div>

dx-for + dx-text

Renders a list reactively. Each item property is accessible via dx-text.

html

<ul>
  <li dx-for="items" dx-text="name"></li>
</ul>