html★'s swap strategies (inner, outer, prepend, append, etc.) expect HTML fragments. This guide covers how to structure your server to render them.

What is a Fragment?

A fragment is an HTML snippet without the document wrapper — no <!DOCTYPE>, no <html>, no <head>, no <body>. Just the content that goes inside a swap target.

Full page:

Fragment:

Two Approaches

Approach 1: Full Pages + data-select (Recommended)

The server always returns full pages. The client extracts what it needs:

Advantages:

  • No server changes needed
  • Progressive enhancement works automatically (no-JS users get full pages)
  • Simpler caching (one version per URL)
  • Works with static sites

Approach 2: Server-Side Fragment Detection

The server detects html★ requests and returns only the fragment:

Advantages:

  • Less bandwidth (no layout HTML transferred)
  • Faster parsing (smaller response)
  • Server controls exactly what's sent

Fragment Architecture

Fragment Renderer Pattern

A reusable fragment renderer keeps your route handlers clean: