Templates
Fourteen starting points for the shapes agents produce most — each with a live example.
Templates are optional starting points, not a required scaffold — bring-your-own HTML plus the runtime tag is a first-class path. But for the common shapes (an invoice, an ADR, an ops report) a template gets the structure, print CSS and mode-aware palette right on the first try. The full gallery with rendered previews lives at /templates; every example link below is a real, published pagelet.
Documents
| Template | What it's for | Live example |
|---|---|---|
Base documentbase.html | The minimal skeleton — one runtime tag, your content, sane defaults. | Open ↗ |
Explainerexplainer.html | Teach a concept in one page: prose, a Mermaid diagram, KaTeX, code and a chart. | Open ↗ |
Runbookexplainer.html | Incident procedures with a decision flow, copy-paste commands and verification checks. | Open ↗ |
Decision recordexplainer.html | An ADR with context, a scored options table, the decision and its expiry condition. | Open ↗ |
Reports & dashboards
| Template | What it's for | Live example |
|---|---|---|
Operations reportreport.html | KPI tile row, line and doughnut charts, an incidents table and weekly narrative — fully mode-aware. | Open ↗ |
| Template | What it's for | Live example |
|---|---|---|
Invoiceinvoice.html | One-page invoice with line items, totals and a payment footer. Prints clean. | Open ↗ |
Estimate / quotequote.html | Scoped pricing with validity window and terms. | Open ↗ |
Formal letterletter.html | Letterhead, date block and sign-off on a serif sheet. | Open ↗ |
Internal memomemo.html | A one-page memo with a decision callout. | Open ↗ |
Certificatecertificate.html | A landscape certificate with a framed border and signature lines. | Open ↗ |
Interactive
| Template | What it's for | Live example |
|---|---|---|
Data explorerinteractive-data.html | A SQL query builder over your schema — the pagelet drafts the prompt back to the agent. | Open ↗ |
Diff reviewinteractive-diff.html | Review a change line-by-line, comment inline, pick a verdict — a structured prompt comes out. | Open ↗ |
Design explorerinteractive-design.html | Tune a design direction with live controls; ship the chosen parameters back as a brief. | in the skill — example coming |
Concept mapinteractive-concept-map.html | Arrange ideas on a canvas, group and link them — the structure exports as an outline. | in the skill — example coming |
Document critiqueinteractive-critique.html | Annotate a document section-by-section; the critique compiles into revision instructions. | in the skill — example coming |
The shared print foundation
The fourteenth file, print-base.html, is not a template you start from directly — it's the shared A4 foundation (page size, margins, print stylesheet) the five print templates build on, so invoices, letters and certificates all print pixel-true with zero layout shifts.
Getting the templates into your agent
The standalone @pagelet/cli (npx @pagelet/cli new report weekly.html) exists but is not yet public — don't instruct anyone to install it until the capability surfaces announce its release. Today there are two supported paths:
- The Pagelet skill (agentskills.io spec) ships the canonical template files under
assets/templates/plus per-template guidance — it's what agents read to author from them. - llms.txt (pagelet.link/llms.txt) carries the authoring contract inline, and the served capability doc (
cdn.pagelet.link/v1/capabilities.md) is the runtime menu.
Interactive templates need the runtime's interactive module: your inline script must wait for the pagelet:interactive-ready event (or check window.__pagelet__.interactive) before registering a pipeline. See the capabilities reference.