Alap v3 Examples

Self-contained demos showing off the library.

Start Here

New to Alap? Go through these three in order.

• 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

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

Positioning

• Placement All 9 compass placements (N, NE, E, SE, S, SW, W, NW, C), viewport fallback, center popover — DOM + web component

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 (remark-alap) [text](alap:@macro) in Markdown → <alap-link> via remark 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
• Bluesky / AT Protocol :atproto: protocol — live profiles, feeds, people search, post search, plus a combined page mixing allLinks + :web: + :atproto: in one expression

Static Site Generators

These examples use their own build tools and run locally from your checkout — they are not available on examples.alap.info.

• Eleventy Run first: cd examples/sites/eleventy && pnpm devcopy (port 9990)
• Astro Integration Run first: cd examples/sites/astro-integration && ./serve.shcopy (port 9010)
• Hugo Run first: cd examples/sites/hugo && ./run.shcopy (port 9170, requires Podman)
• VitePress Run first: cd examples/sites/vitepress && pnpm devcopy