Docs

Quick start

Get up and running with astro-dx in minutes.

astro-dx is a community library, not affiliated with the Astro core team.

1. Install

bash

npx @astro-dx/init

2. Create a signal

typescript

// In any .astro file <script> tag
import { signal, computed } from '@astro-dx/core';
import { getElement } from '@astro-dx/dom';

const count = signal(0);
const double = computed(() => count() * 2);

getElement('#count').text(count);
getElement('#btn').on('click', () => count.update(v => v + 1));

3. Share state via a service

typescript

import { signal, computed } from '@astro-dx/core';

class CartServiceClass {
  private _items = signal<string[]>([]);
  readonly total = computed(() => this._items().length);

  add(item: string) { this._items.update(p => [...p, item]); }
  clear() { this._items.set([]); }
}

// ESM singleton — same instance across all islands
export const CartService = new CartServiceClass();

Explore the docs

Installation All install options — CLI, all-in-one, granular

@astro-dx/core signal, computed, effect, lifecycle hooks

@astro-dx/events on, onHover, onKey, onFocus

@astro-dx/attributes dx-if, dx-show, dx-for as attributes

@astro-dx/elements dx-if, dx-show, dx-for as custom elements

@astro-dx/dom getElement, getElements, enriched refs