<htx:layout src="layouts/main.htx" />
<htx:include src="partials/header.htx" />
<htx:data type="post" order="published_at desc" limit="3" as="posts" />
<main class="posts">
<htx:each items="posts" as="post">
<article>
<h2><htx:v>post.title</htx:v></h2>
<p><htx:v>post.author | uppercase</htx:v></p>
<a hx-get="/post/{htx:post.slug}" hx-target="main">Read</a>
</article>
</htx:each>
</main>
<htx:auth>
<htx:action name="create" type="post" />
<form hx-post="/posts?t={htx:$actions.create}">
<input name="title" />
<button>Post</button>
</form>
</htx:auth>
<htx:script>
el.addEventListener('click', e =>
e.target.closest('article')?.classList.toggle('open'));
</htx:script>
<!-- layout wrapper + resolved header omitted for clarity -->
<main class="posts">
<article>
<h2>My First Post</h2>
<p>JARED</p>
<a hx-get="/post/my-first-post" hx-target="main">Read</a>
</article>
<!-- two more article blocks expanded from htx:each -->
</main>
<form hx-post="/posts?t=eyJhY3Rpb24i...sig">
<input name="title" />
<button>Post</button>
</form>
<script>
el.addEventListener('click', e =>
e.target.closest('article')?.classList.toggle('open'));
</script>
0Static hypermedia — plain HTMLno JS
1Declarative attributes (hx-*)tiny runtime
2Scoped behavioral units (on-click, on-change)per-scope scripts
3Server-pushed codeWebSocket
4Authenticated data channelschannel tokens
5Binary delivery (images, audio, blobs)binary frames
6WebAssembly — native-speed client computewasm manifest
<!-- plain hypermedia; htmx not loaded -->
<a href="/post/my-first-post">Read</a>
<form method="post" action="/posts">
<input name="title">
<button>Post</button>
</form>
<!-- request + target + swap, declaratively -->
<button hx-get="/posts/new"
hx-target="#content"
hx-swap="innerHTML">
New Post
</button>
<!-- hx-on::* scopes a handler to its element -->
<form hx-post="/posts"
hx-on::after-request="this.reset()"
hx-target="#list">
<input name="title">
<button>Post</button>
</form>
<!-- ws extension + out-of-band swaps -->
<div hx-ext="ws" ws-connect="/events">
<!-- server pushes fragments like: -->
<!-- <div id="alert" hx-swap-oob="true">…</div> -->
</div>
<!-- channel token materialized into the representation -->
<div hx-ext="ws"
ws-connect="/channel/trading?t={htx:$grants.channel}">
<!-- token expires; channel closes; no ambient authority -->
</div>
<!-- binary gated by signed URL; grant materialized server-side -->
<img src="/asset/{htx:$grants.asset}/chart.png"
alt="role-scoped, expires-in-session">
<!-- htmx triggers load; the wasm runtime takes over -->
<div id="chart"></div>
<script hx-trigger="load" type="module">
const { instance } = await WebAssembly.instantiateStreaming(
fetch('/wasm/chart.wasm?t={htx:$grants.wasm}')
);
instance.exports.render(document.getElementById('chart'));
</script>