What is HeroML?
HeroML is a lightweight, indentation-based markup language. Instead of writing themes in code, pages are composed from ready-made design blocks — hero, feature grid, post list and more.
- Data, not code. HeroML is parsed into a tree of plain objects. Nothing is executed — no
eval, no scripts. It is secure by design. - Server-rendered & lightweight. Blocks emit semantic HTML on the server. No framework, no client bloat; only the CSS of the blocks actually used is shipped.
- Extensible. Additional blocks can be installed as packages — and even licensed.
HeroML replaces the theme system but runs alongside it: under Admin → Design you switch between classic themes and the block engine.
Quick start
Every line is either a block or a field; indentation determines what belongs to what. The example below produces a complete lead — the code on top, the rendered result below:
hero
headline: Das Reisemagazin
sub: Langsame Geschichten aus nahen und fernen Orten — sorgfältig erzählt und fotografiert.
button variant=primary
label: Aktuelle Ausgabe
href: #
button variant=ghost
label: Themen
href: #Result ↓
Das Reisemagazin
Langsame Geschichten aus nahen und fernen Orten — sorgfältig erzählt und fotografiert.
No HTML, no CSS, no code — just blocks and fields.
The reference at a glance
Tutorial: magazineA magazine home page, step by step.
Tutorial: blogBlog home page with a split highlight area.
SyntaxBlocks, fields, attributes, placeholders.
Designs & viewsAnatomy of a design and its templates.
Structure & contentThe skeleton and the text building blocks.
Front-page blocksHero, buttons, features, call to action.
Layout: grid & sidebarMulti-column layouts and sidebars.
Dynamic & adsPost lists, highlights, widgets, ad slots.
MediaYouTube, Twitch, galleries, feeds and more.
Attributes & optionsScopes, preview length, animations, meta.
Extending & securityCustom blocks, security, cheat sheet.