Components

Roots

Email

An email. Its children are stacked down the content width, centered in the window.

Page

A web page. Its children are stacked down the content width, centered in the window.

Document

A printed document: its children on pages of its size (Document.Page, or split by PageBreaks), a PageHeader and a PageFooter on each. Renders to print HTML, and to PDF with @hyper-elements/react/pdf.

Canvas

An image of a fixed size (a social card, a banner): its children laid out in it as on a page. Written as PNG or SVG with @hyper-elements/react/image.

Sections and layout

Section

A band across the whole window, directly in an Email or Page: its background spans the window, its children are stacked at the content width.

Row

Lays its children out side by side. A child takes its width, or a share of what's left (its flex, 1 by default).

Column

Stacks its children vertically, with its own spacing and box.

Grid

Its children in columns of equal width, row after row; on phones, one under another.

Layer

Its children over each other, in one box as tall as the tallest: an image with words on it. In an email, an Image with one child over it.

Blocks

Svg

Shapes (Rect, Circle, Ellipse, Line, Polygon, Path) drawn in a box of its own: its width and height, and the coordinates its viewBox gives them.

Text

A paragraph of text.

Heading

A heading, from level 1 (the page's title) to 6.

Button

A link drawn as a button.

Image

An image in the content. Without a width it takes its own size, no wider than its parent.

Divider

A horizontal line.

List

A bulleted or numbered list of ListItems. Its markers sit in a column of their own (indent) before the items.

Table

A table of data: TableRows of TableCells. Columns take their cells' widths; the rest share what's left.

Video

A YouTube or Vimeo video: its player on a page; in an email (which can't play one), its thumbnail, linked to it.

Social

Links to social profiles: a line of the networks' icons, each linked to its profile.

Menu

A line of links (a site's sections, a footer's), onto more lines where they don't fit, with a separator between them on desktop; or links down a column.

Html

Markup written as it is, for what no component says (the builder's HTML block): in an email and on a page as given, nothing in it checked or escaped. A Document's PDF and a Canvas's image draw its plain text.

Inline

PageNumber

In a Document's text: the number of the page it's on, or (total) how many pages there are.

Span

Styled text inside text; raised or lowered (superscript, subscript) with verticalAlign.

Link

A link: text inside text, or around an Image.

LineBreak

Starts a new line inside text.

MergeTag

A value the sending service fills in (a name, a link), written in the service's own syntax.

Parts

Document.Page

One page of a Document (Document.Page in JSX): its children stacked down it, inside the Document's margins.

PageBreak

In a Document, where a page ends: what follows starts the next page.

PageHeader

In a Document: drawn at the top of every page, inside its margins.

PageFooter

In a Document: drawn at the bottom of every page, inside its margins.

ListItem

An item of a List: text, and a List of its own to nest one.

TableRow

A row of a Table. A header row's cells are header cells, in bold.

TableCell

A cell of a TableRow: text, and images. Its width sets its column's.

Shapes

Rect

A rectangle at x, y in its Svg, rounded by rx.

Circle

A circle centered at cx, cy in its Svg.

Ellipse

An ellipse centered at cx, cy in its Svg.

Line

A straight line from x1, y1 to x2, y2 in its Svg (drawn by its stroke).

Polygon

A closed shape through its points ("0,0 40,0 20,30"), in its Svg.

Path

A shape drawn by an SVG path (d), in its Svg.

Reference

Values

What a property takes, where it says *kind*:

Every component takes

Every component, what it holds, and every prop and style it takes, with its default and what it does. Templates and roots shows how a template is written; validate() checks one against what’s here.

Every component also takes:

• style={{ … }}: the styles listed under it. A number is px (padding: 16 is 16px).
• mobile={{ … }}: style overrides on phones, in an Email or a Page, for the styles listed under “mobile”.
• hover={{ … }}: styles on hover, for the ones listed under “hover”.
• hidden={{ mobile: true }} or hidden={{ desktop: true }}: shown on one only.
• id: an id of your own, written into the HTML.

A template is one of these, and the root decides the output: render() writes an Email’s HTML, a Page’s HTML, and a Document’s print HTML. renderPdf() (@hyper-elements/react/pdf) writes a Document’s PDF, and renderImage() (@hyper-elements/react/image) a Canvas’s PNG or SVG (render() writes a Canvas’s HTML, to look at).

Bands and boxes that arrange blocks. None is required: a root stacks its children.

Content, stacked down whatever holds it.

Inside text: a styled run, a link, a line break, a merge tag.

Only inside the component named: a list’s items, a table’s rows and cells, a document’s pages, header and footer.

Only inside an Svg, in its viewBox’s units.