mdx authors everything

A lesson is prose plus widgets. In mdx they share one file: write a sentence, drop a semantic tag, move on. The tag compiles into a server-rendered island.

astro renders, serves, and speaks html

Astro turns that file into plain html on the server - no framework runtime shipped to the reader. When a page needs dynamic data, it does not ask for json and translate. It asks an endpoint that answers in html, ready to drop into the page.

Below is the entire source of one such endpoint, and a button that fetches its response live:

// src/pages/api/echo.ts
export const POST: APIRoute = async ({ request }) => {
  const form = await request.formData();
  const note = form.get("note") ?? "(empty)";
  await sleep(120 + Math.random() * 230);   // simulate work
  return new Response(
    `<div class="tline">echo «${note}»</div>`,
    { headers: { "Content-Type": "text/html" } },
  );
};

htmx moves html over the wire

htmx is the transport layer of this stack. Attributes like hx-post, hx-target and hx-swap turn any element into a client for ssr endpoints. Type into the field and watch the terminal: each line is one complete round trip.

alpine owns local state

Some state never needs the server. Toggles, tabs, counters - alpine.js binds a sprinkle of x-data to reactive islands with zero build step and zero dom code.

the whole loop

Five steps, one request lifetime. Walk it:

That is the entire mental model. The rest of this page was built from exactly these five moves.