Elements
Headings Text Buttons Links Images & Media Lists Forms Blocks Table Blockquote Accordion Code Blocks Callouts Embeds Modules Custom FontsReference
Full CheatsheetA clean, readable language for building websites. No HTML tags, no CSS files, no build steps.
Every .zoar file is a page. Each line is an element. Styles go inside [square brackets]. Layout is done with curly braces.
The golden rule: element keyword first, content second, [styles] last. That's the whole language.
Each .zoar file becomes a page. The filename is the URL path. home.zoar is always the root /.
| File | URL |
|---|---|
| home.zoar | / |
| about.zoar | /about |
| contact.zoar | /contact |
| blog-post.zoar | /blog-post |
Lines starting with // are ignored by the parser. Use them to document your layout.
Add a ---- block at the very top of any .zoar file to set page metadata. Controls the browser tab title, search descriptions, social previews, and favicon.
| Field | What it sets |
|---|---|
| title | Browser tab title + search heading |
| description | Meta description for search |
| author | Meta author tag |
| lang | HTML lang attribute (en hi fr...) |
| favicon | Browser tab icon |
| og-title | Social media preview title |
| og-description | Social media preview text |
| og-image | Social media preview image |
| twitter-card | summary or summary_large_image |
| canonical | Canonical URL for SEO |
Use #, ##, or ### for h1, h2, h3. Styles are optional.
Use t for paragraphs. A space after t is required.
Use : to create a button for actions. For page navigation, use ~ instead.
: renders as a button element and does not navigate. Use ~ for any link that goes to a page or URL.
Use ~ for all navigation. Internal pages, external URLs, email links, and anchor scroll links are all supported.
| Syntax | Output |
|---|---|
| ~ Label -> /page | Internal navigation |
| ~ Label -> https://... | External link (new tab) |
| ~ Label -> mailto:... | Email link |
| ~ Label -> #anchor | Smooth scroll to id |
Always add no-underline if you want links to look like buttons. Add hover-underline to restore it only on hover.
| Symbol | Element |
|---|---|
| > | Image |
| >> | Audio player with controls |
| >>> | Video player with controls |
| << | Embed / iframe (YouTube Maps Figma Vimeo) |
Start lines with - for unordered, 1. for ordered. Consecutive lines are grouped into one list automatically.
Use / for labels, _ for inputs, __ for textareas. Input type is set with the input-type-* token inside the style block.
| Token | Type |
|---|---|
| input-type-text | Text (default) |
| input-type-email | |
| input-type-password | Password |
| input-type-number | Number |
| input-type-tel | Phone |
| input-type-url | URL |
| input-type-date | Date picker |
| input-type-time | Time picker |
| input-type-file | File upload |
| input-type-range | Slider |
| input-type-color | Color picker |
| input-type-search | Search |
| input-type-checkbox | Checkbox |
| input-type-radio | Radio |
Wrap elements in curly braces to group them. Styles on the closing brace apply to the container div.
Add an id token to any element or block for anchor navigation:
# My Section [text-size-24 bold id-my-section] — the id-my-section token adds id="my-section" to that heading. Then ~ Go to section -> #my-section will scroll to it.
Wrap rows inside a block and add [table] to the closing brace. Use h at the start of a line for a header row. Cells are comma-separated.
Use a regular block with [blockquote] on the closing brace. Any elements inside work normally.
Wrap child blocks in an outer block with [accordion]. Each child block becomes a details element. Use s for the clickable summary title.
Use triple backticks to create a code block. Add a language label after the opening fence for display. A Copy button is added automatically.
The language label after the backticks is display-only. It labels the block but does not affect rendering.
Use callout variants on any block to create a highlighted notice box.
| Variant | Use for |
|---|---|
| [callout] or [callout-info] | General information |
| [callout-tip] | Tips and best practices |
| [callout-warning] | Things to be careful about |
| [callout-danger] | Critical warnings |
Info callout — for general notes.
Tip callout — for best practices.
Warning callout — for things to watch out for.
Danger callout — for critical warnings.
Use << to embed any iframe-compatible URL. All necessary iframe attributes are added automatically. Works with YouTube, Google Maps, Figma, Vimeo, and more.
Write UI once and reuse it across every page. Modules live in a modules/ subfolder and are referenced with @modules/name.
| Rule | Detail |
|---|---|
| @modules/name | Must be on its own line |
| Name = filename | footer.zoar becomes @modules/footer |
| No nesting | Modules cannot reference other modules |
| Frontmatter ignored | Metadata inside a module is stripped |
| Export safe | Module content is fully inlined in each ZIP page |
Upload any font file (.ttf .woff2 .otf .woff) via the Assets panel. The utility name is derived from the filename — lowercased, spaces become hyphens.
| Filename | Token |
|---|---|
| roboto.woff2 | font-roboto |
| Playfair Display.ttf | font-playfair-display |
| JetBrains Mono.woff2 | font-jetbrains-mono |
| Token | CSS Output |
|---|---|
| inner-20 | padding: 20px |
| inner-x-20 | padding left and right: 20px |
| inner-y-20 | padding top and bottom: 20px |
| inner-t-20 | padding-top: 20px |
| outer-20 | margin: 20px |
| outer-t-32 | margin-top: 32px |
| gap-16 | gap: 16px |
| gap-x-16 | column-gap: 16px |
| gap-y-16 | row-gap: 16px |
| Token | CSS Output |
|---|---|
| w-200 | width: 200px |
| w-full | width: 100% |
| w-1/2 | width: 50% |
| w-screen | width: 100vw |
| h-400 | height: 400px |
| h-screen | height: 100vh |
| min-w-300 | min-width: 300px |
| max-w-800 | max-width: 800px |
| min-h-200 | min-height: 200px |
| max-h-600 | max-height: 600px |
| Token | CSS Output |
|---|---|
| text-size-18 | font-size: 18px |
| text-color-ff0000 | color: #ff0000 |
| leading-28 | line-height: 28px |
| tracking-2 | letter-spacing: 0.02em |
| bold | font-weight: 700 |
| semi-bold | font-weight: 600 |
| italic | font-style: italic |
| underline | text-decoration: underline |
| no-underline | text-decoration: none |
| strikethrough | text-decoration: line-through |
| caps | text-transform: uppercase |
| lowercase | text-transform: lowercase |
| capitalize | text-transform: capitalize |
| text-center | text-align: center |
| text-right | text-align: right |
| truncate | overflow ellipsis on one line |
| no-wrap | white-space: nowrap |
Use any CSS color name or a hex code without the # symbol.
| Utility | Affects |
|---|---|
| text-color-* | Text color |
| bg-* | Background color |
| border-color-* | Border color |
| shadow-color-* | Box shadow color |
| outline-color-* | Outline color |
| Token | Description |
|---|---|
| flex | Enable flexbox |
| grid | Enable CSS grid |
| hidden | display: none |
| row | flex-direction: row |
| col | flex-direction: column |
| wrap | flex-wrap: wrap |
| grow | flex-grow: 1 |
| center | Center both axes (shorthand) |
| between | justify-content: space-between |
| items-center | align-items: center |
| items-start | align-items: flex-start |
| self-center | align-self: center |
| grid-cols-3 | grid-template-columns: repeat(3 1fr) |
| col-span-2 | grid-column: span 2 |
| col-span-full | Full width in grid |
| Token | CSS Output |
|---|---|
| border | border: 1px solid #ddd |
| border-2 | border-width: 2px |
| border-color-ff0000 | border-color: #ff0000 |
| border-t-1 | border-top: 1px solid |
| border-b-1 | border-bottom: 1px solid |
| round-8 | border-radius: 8px |
| round-full | border-radius: 9999px |
| outline-none | outline: none |
| outline-width-2 | outline: 2px solid |
| Token | CSS Output |
|---|---|
| shadow-12 | box-shadow depth 12 |
| opacity-50 | opacity: 0.5 |
| blur-8 | filter: blur(8px) |
| brightness-75 | filter: brightness(0.75) |
| overflow-hidden | overflow: hidden |
| transition | transition: all 0.3s ease |
| transition-colors | color + bg + border only |
| duration-200 | transition-duration: 200ms |
| cursor-pointer | cursor: pointer |
| select-none | user-select: none |
| disabled | opacity 0.5 + cursor not-allowed |
| Token | CSS Output |
|---|---|
| relative | position: relative |
| absolute | position: absolute |
| fixed | position: fixed |
| sticky | position: sticky |
| top-0 | top: 0 |
| right-20 | right: 20px |
| left--10 | left: -10px |
| inset-0 | inset: 0 |
| z-10 | z-index: 10 |
Negative values use double dash — left--10 means left: -10px. Same applies to translate and rotate.
Multiple transforms combine automatically — no need to write them separately.
| Token | CSS Output |
|---|---|
| scale-110 | transform: scale(1.1) |
| rotate-45 | transform: rotate(45deg) |
| rotate--45 | transform: rotate(-45deg) |
| translate-x-10 | translateX(10px) |
| translate-y--8 | translateY(-8px) |
Prefix any utility with hover- or focus- to apply it only on that state. Works with every utility in the system.
| Prefix | When it applies |
|---|---|
| hover- | On mouse hover |
| focus- | On keyboard focus or click |
Prefix any utility with mobile- or tablet- to override it at smaller screen sizes.
| Prefix | Breakpoint |
|---|---|
| mobile-* | max-width: 640px |
| tablet-* | max-width: 1024px |
mobile-hidden removes an element on small screens. tablet-hidden removes it on tablet and below.
Every element and prefix in one place.
| Symbol | Element |
|---|---|
| # ## ### | Headings h1 h2 h3 |
| t | Paragraph |
| s | Accordion summary |
| : | Button |
| ~ | Link (internal / external / mailto / #anchor) |
| > | Image |
| >> | Audio |
| >>> | Video |
| << | Embed / iframe |
| - | Unordered list item |
| 1. | Ordered list item |
| h | Table header row |
| / | Label |
| _ | Input |
| __ | Textarea |
| --- | Horizontal rule |
| -- | Line break |
| { } | Block / div |
| {} [table] | Table block |
| {} [blockquote] | Blockquote block |
| {} [accordion] | Accordion block |
| {} [callout] | Info callout |
| {} [callout-tip] | Tip callout |
| {} [callout-warning] | Warning callout |
| {} [callout-danger] | Danger callout |
| ``` | Code block |
| @modules/name | Module reference |