Docs in He.art are written in Markdown, and you can always see both sides: the Markdown you type and the page it draws. On Nov 5, 2026 that Markdown learned five new layouts, all of them things we wanted while turning an explainer into a He.art doc and found we could not yet say. Here is each one, with the few lines that make it.
Every one of them is a block that opens with ::: and a name and closes with a line holding just :::. Where a block has several parts, a line of +++ goes between them.
A row of stat tiles
When a doc has a few numbers that matter most, :::stats puts them side by side in tiles joined by thin lines. In each tile the first paragraph is the figure, drawn large, and the rest is its label, small and muted.
:::stats
**12**
chapters
+++
**3 h**
to read
+++
**Free**
to share
:::
The tiles share each row between them, so when a row wraps on a narrower screen, the last line is filled to its end rather than leaving one tile beside an empty space. On a phone they sit one under another.
Numbered steps down a line
:::steps numbers its parts in circles down a line, with a heading and its text beside each. It suits anything a reader does in order: a recipe, a setup guide, how a request travels through a system.
:::steps
### Sign in
Open He.art with your Google account.
+++
### Start a doc
Press New doc in the sidebar.
+++
### Paste and share
Paste your notes, then share the link.
:::
You never type the numbers; add or remove a step and the rest renumber themselves.
A box with a colored edge
A box can now carry a colored left edge, using the same four words as He.art's chips: :::box ok, :::box warn, :::box bad and :::box info. It is a quick way to mark a tip, a caution, a mistake to avoid or a side note so a reader can spot it while scrolling.
:::box warn
Back up your library before you empty the Trash.
:::
Filter buttons
This one moves. :::filter holds several parts, and each part names itself with the small eyebrow heading it starts with (######). Above them, He.art draws a row of pill buttons: All, then one for each name, in the order they first appear. Pressing a name shows only the parts with that name; All shows everything again.
:::filter
###### Hearing
How the words come in.
+++
###### Answering
How the reply is written.
+++
###### Hearing
Why noise matters.
:::
A name used twice is still one button, and a part with no eyebrow shows only under All. The buttons work while you edit too, and they are never written into your Markdown, so the doc you save stays exactly what you typed. Opening the doc again starts on All.
Panels that fold
:::panel followed by a few words makes a folding section drawn as a shaded, bordered panel: the words become a bold title row with a + at its end, which turns into a minus when the panel is open.
:::panel What each part does
The longer explanation goes here, out of the way until a reader wants it.
:::
Panels are good for a list of sections a reader may only need one of, like a FAQ or the detail behind each part of a diagram. A reader whose browser runs no JavaScript still sees every filter part and every panel's text, just without the buttons.
SVG drawings that move
Docs have drawn SVG figures since October: put an SVG inside a code fence marked svg and the doc shows the drawing. A figure can now animate a shape's size, position or opacity with SVG's <animate>, which is enough for pulsing sound bars, a growing chart bar or a dot that fades in and out.
To keep a shared doc safe to open, only those kinds of animation are kept, and anything else is removed when the figure is drawn. And if your system is set to reduce motion, the drawing simply stands still.
Try it
Open He.art, press New doc in the sidebar and paste one of the blocks above into the Markdown side. Watch the page draw it, then change a number or add a step and see it follow along.