Installation

Requirements

Node.js 18 or later
A bundler that understands ES modules (Astro, Vite, Next, etc.)

Install the package

npm install automagica11y

The library ships with ESM, CJS, minified browser builds, and TypeScript definitions so you can integrate with any workflow.

Looking for file-by-file references? Each package README in the repository expands on install + usage for a specific pattern. Start in the root README and follow the quick links table to jump into toggles, dialogs, popovers, tooltips, focus utilities, or plugins.

Build before running the docs

Keep the demos fresh

The documentation site loads the local dist/ bundle. Run npm run build from the project root whenever you make library changes before launching the docs with npm run docs:dev.

Import patterns

You can rely on the registry autoloader or import individual helpers.

// Load everything (auto-inits on the current document)
import 'automagica11y';

// Or hydrate specific areas manually
import { initNode, initPattern } from 'automagica11y';

const island = document.querySelector('#partial-render');
if (island) {
  initNode(island);
}

Minimal HTML

<button data-automagica11y-toggle="#details">Details</button>
<section id="details" hidden>
  automagicA11y adds aria-expanded, aria-controls, and keyboard support.
</section>
<script type="module">
  import 'automagica11y';
</script>

The registry observes the document once on load. Use initNode for dynamically injected content, or explore the context system to unlock dialogs, tooltips, and custom alias semantics.