Framework Guides
Adapters
These ship with alap — import from alap/react, alap/vue, etc. Each adapter integrates with your framework's component model, state management, and lifecycle.
| Page | Framework | Pattern |
|---|---|---|
| Vanilla DOM | None | AlapUI class, .alap CSS selector |
| Web Component | None | <alap-link> custom element, Shadow DOM |
| React | React | AlapProvider + AlapLink + useAlap() |
| Vue | Vue 3 | SFC components + useAlap() composable |
| Svelte | Svelte 5 | Components + runes |
| SolidJS | SolidJS | Components + signals |
| Astro | Astro | .astro components wrapping the web component |
| Alpine.js | Alpine.js | x-alap directive plugin |
| Qwik | Qwik | Resumable components — zero JS until interaction |
Integrations
Separate packages that connect Alap to specific platforms, build tools, and content pipelines. Each has its own install step.
| Integration | Package | What it does |
|---|---|---|
| Eleventy | eleventy-alap | Shortcodes + filters, optional build-time resolution |
| Next.js | next-alap | 'use client' boundaries, layout component, MDX config |
| Nuxt | nuxt-alap | Client plugin, Vue re-exports, Nuxt Content markdown |
| Astro Integration | astro-alap | Zero-config setup — one line in your Astro config |
| Hugo | hugo-alap | Shortcodes + partials that output <alap-link> |
| Qwik City | qwik-alap | Vite plugin for Qwik City projects |
| VitePress | vitepress-alap | Vite plugin for <alap-link> in markdown docs |
| WordPress | WordPress plugin | [alap] shortcode, SQLite containers |
| Markdown | remark-alap | [text](alap:query) syntax for any remark pipeline |
| HTML / CMS | rehype-alap | Transform <a href="alap:query"> from headless CMSs |
| MDX | @alap/mdx | React-based MDX content |
| Tiptap | tiptap-alap | Inline Alap links in Tiptap rich-text editors |
| CDN / IIFE | — | <script> tag, no bundler, no npm |
| htmx | — | <alap-link> auto-initializes after htmx swaps |
Which one should I use?
- No framework? Start with Web Component — it works in plain HTML
- Have a framework? Use its adapter — it feels native and integrates with your component tree
- Need maximum CSS control? Vanilla DOM renders into the page with no shadow boundary
- Zero JS until click? Qwik — resumability means no parser/engine code loads until someone interacts
- htmx / HTML-over-the-wire? Use the Web Component —
<alap-link>auto-initializes after htmx swaps. See the htmx example - VitePress docs? See the VitePress integration — Vite plugin registers
<alap-link>for markdown - Static site? Eleventy, Astro, VitePress, or Web Component with the CDN build
- Next.js? See the Next.js integration —
'use client'handled, layout component, MDX config - Nuxt? See the Nuxt integration — client plugin, Vue re-exports, Nuxt Content
- Hugo? See the Hugo integration — shortcodes + web component
- WordPress? See the WordPress plugin —
[alap]shortcode, SQLite containers
See also
- Getting Started — installation and setup
- Styling — CSS for both web component and DOM adapter
- Events — shared event model across all adapters
- Full documentation index