Alap v3 Examples

Self-contained demos showing off the library.

Start Here

1. Basic
Item IDs, class queries, operators, parentheses, macros — the fundamentals
2. React Adapter
<AlapProvider> + <AlapLink> + useAlap() — framework integration pattern
3. Web Component
<alap-link> custom element — zero-framework, works everywhere

Theming

Styling
Offsets, per-anchor themes, custom item classes, image triggers
Tailwind CSS
Menu styled entirely with Tailwind utilities
Advanced CSS — DOM
Advanced CSS effects using light DOM mode with standard <a class="alap"> elements
Advanced CSS — WC
55+ CSS custom properties on <alap-link> for full theming and visual customization

Framework Adapters

React
<AlapProvider> + <AlapLink> + useAlap() hook — all rendering modes
Vue
<AlapProvider> + <AlapLink> + useAlap() composable — SFC templates
Svelte
<AlapProvider> + <AlapLink> + useAlap() — Svelte 5 runes
SolidJS
<AlapProvider> + <AlapLink> + useAlap() — fine-grained reactivity
Alpine.js
x-alap directive — no build step, sprinkle onto HTML
htmx
HTML fragment swaps — <alap-link> self-initializes after each swap
Next.js
App Router pattern — Alap in a Next.js application

Positioning

Placement
All 9 compass placements, viewport fallback, center popover — DOM + web component
Placement Sandbox
Visual test pages for the placement engine — verify menus never overflow the viewport

Renderers

Lightbox
Menu items displayed in a lightbox overlay instead of a dropdown
Lightbox WC
<alap-lightbox> custom element with ::part() styling and layout rearrangement
Lens
Detail inspection — click to view full metadata, tags, descriptions instead of navigating
Lens WC
<alap-lens> custom element — shadow DOM encapsulation and ::part() styling
Embeds
YouTube, Vimeo, Spotify, CodePen, CodeSandbox — consent management, all renderer modes

Advanced

Hooks & Media
Image triggers, div triggers, image menu items, hover preview, context popup, event log
Regex Search
/key/opts syntax — field filtering, sorting, age limits, composition with operators
Markdown
[text](alap:@macro) in Markdown becomes <alap-link> via remark-alap plugin
Tiptap Rich-Text
Inline <alap-link> nodes in a Tiptap editor — side-by-side with live preview
External Data
Load config from JSON files or remote endpoints
CDN / Script Tag
Zero npm, zero build step — load Alap via a <script> tag and go

Protocols

Bluesky / AT Proto
:atproto: protocol — live profiles, feeds, people search, post search, plus combined expressions
:json: Protocol
Fetch external JSON APIs with field mapping — 7 real APIs across menu, lightbox, and lens
CMS Content
rehype-alap plugin — transforms CMS HTML with <a href="alap:query"> into <alap-link>

Static Site Generators

These run locally from your checkout — not available on examples.alap.info.

Eleventy
cd examples/sites/eleventy && pnpm dev (port 9990)
Astro
cd examples/sites/astro-integration && ./serve.sh (port 9010)
Hugo
cd examples/sites/hugo && ./run.sh (port 9170)
VitePress
cd examples/sites/vitepress && pnpm dev