Hyper Elementsv0.3
Get started

For AI agents

Built for coding agents

Your agent writes the template, checks it with validate() and outline(), and renders an email, a page, a PDF or an image.

llms.txtllms-full.txt
01

Write

One way to write each thing: styles in style={{}}, space as gap.

02

Validate

validate() lists every problem with its code, its path and the fix.

03

Outline

outline() prints the laid-out template as text, to check without looking.

04

Render

render(), renderPdf() or renderImage(). The same input gives the same output.

Give it the guide

The docs ship in the package.

GUIDE.md is written from the components' own definitions, so it matches the version you installed.

CLAUDE.md
@node_modules/@hyper-elements/react/GUIDE.md
AGENTS.md (Codex, Cursor and others)
Before writing a Hyper Elements template, read
node_modules/@hyper-elements/react/GUIDE.md.
Email 600px: background #ece7df
  Section 600px
    Row 600px: 2 side by side
      Column 292px
        Text 292px "Tarn (https://tarn.example)"
      Column 292px
        Text 292px "Order TC-20418"
    Column 600px: background #fffdf9
      Column 504px
        Text 504px "Shipped 5 November"
        Heading h1 504px "Packed in straw, / and on its way."
        Text 440px "Rowan wrapped your three pieces this morning. They’re with Parcelforce now, and…"
      Row 504px: 4 side by side
        Column 117px
          Column 117px: background #3e6b61
          Text 117px "Ordered/ 2 Nov"
        Column 117px
          Column 117px: background #3e6b61
          Text 117px "Packed/ 5 Nov"
        Column 117px
          Column 117px: background #3e6b61
          Text 117px "On its way/ 5 Nov"
        Column 117px
          Column 117px: background #e6dfd5
          Text 117px "Delivered/ Mon 9 Nov"
      Button: background #3e6b61 "Follow your parcel" → https://tarn.example/orders/TC-20418/track
      Column 504px
        Text 504px "In the box"
        Row 504px: 3 side by side
          Column 48px: background #b9d2c6
          Column 348px
            Text 348px "Tea bowls, celadon"
            Text 348px "A pair, 9 cm across"
          Column 68px
            Text 68px "£64.00"
        Row 504px: 3 side by side
          Column 48px: background #efebe2
          Column 348px
            Text 348px "Serving bowl, ash white"
            Text 348px "24 cm across"
          Column 68px
            Text 68px "£58.00"
        Row 504px: 3 side by side
          Column 48px: background #3b2a22
          Column 348px
            Text 348px "Pouring jug, tenmoku"
            Text 348px "Holds 600 ml"
          Column 68px
            Text 68px "£46.00"
        Column 504px
          Row 504px: 2 side by side
            Column 384px
              Text 384px "Subtotal"
            Column 120px
              Text 120px "£168.00"
          Row 504px: 2 side by side
            Column 384px
              Text 384px "Delivery, tracked"
            Column 120px
              Text 120px "£7.50"
          Row 504px: 2 side by side
            Column 384px
              Text 384px "Paid"
            Column 120px
              Text 120px "£175.50"
      Row 504px: 2 side by side, stacked on phones
        Column 240px
          Text 240px "Delivering to"
          Text 240px "Ada Whitlock / 14 Rookery Lane, Didsbury / Manchester M20 6RG"
        Column 240px
          Text 240px "Paid with"
          Text 240px "Visa ending 0417 / on 2 November 2026"
      Text 504px "Every piece is stoneware, thrown by hand, so yours will differ a little from th…"
    Text 600px "Tarn Ceramics, Unit 4, Mytholm Works, Hebden Bridge HX7 6DL. Questions about yo…"

Layout as text

outline() shows what the engine laid out.

Every block, its width and its words, for any output. The agent checks the layout without reading HTML or opening a PDF.

Try it

Read https://hyperelements.dev/llms.txt. Then write a Hyper Elements template for [an email, a page, a PDF or an image]. Run validate() and fix every error, then show me outline().