One link, many destinations

A traditional link is a demand — one URL, chosen by the author.
An Alap link is an invitation — a set of options, chosen by the reader.

Get Started Expression Guide

Try it

Check out some coffee shops or famous bridges.

NYC bridges only: NYC bridges.

A macro: favorites.

Each highlighted word opens its own menu. Click one.

The expression language

.nyc                        all items tagged "nyc"
.nyc + .bridge              AND — items with both tags
.nyc | .sf                  OR — items with either tag
.nyc - .tourist             WITHOUT — subtract matches
(.nyc + .bridge) | .sf      parentheses for grouping
@favorites                  expand a saved macro
:time:7d:                   protocol — items from last 7 days
*sort:label* *limit:5*      refiners — sort and limit results

One config, many menus. Update a URL once, every menu reflects it.

What's included

8 Adapters

DOM, Web Component, React, Vue, Svelte, Astro, Alpine, Solid

Expression Language

Tags, operators, macros, regex, protocols, refiners — one grammar

Zero Dependencies

npm install alap pulls nothing else. 30 KB gzipped.

9 Server Examples

Node, Bun, Python, PHP, Go, Rust — all with the same API

5 Parser Ports

TypeScript, Python, PHP, Go, Rust — full grammar parity

Security Hardened

URL sanitization, ReDoS protection, config validation, depth limits

Quick start

<script type="module">
  import { defineAlapLink, registerConfig } from 'alap';
  defineAlapLink();
  registerConfig({
    allLinks: {
      golden:   { url: 'https://...Golden_Gate_Bridge', label: 'Golden Gate',    tags: ['bridge', 'sf'] },
      brooklyn: { url: 'https://...Brooklyn_Bridge',    label: 'Brooklyn Bridge', tags: ['bridge', 'nyc'] },
    },
  });
</script>

<alap-link query=".bridge">bridges</alap-link>