19. The syntax at a glance

Everything a writer types in CompMD, on a few pages: the frontmatter, the three forms of a component, params, slots, values and expressions, if and each, definitions, imports and exports, and code blocks a pack draws. Each table links to the chapter that teaches it, and the spec has every rule.

The frontmatter#

Everything CompMD reads is under one key, md. Every other key is yours, read as md.doc.<key> (chapter 4).

YAML to remember. true and false are the only yes and no; a date such as 2026-11-07 is text, which date functions read; quote what would read as a number, "1.10", or as something else, "9:30". No anchors (&a), aliases (*a), tags (!!str) or repeated keys (F033).

A data entry#

An input#

<name>: <type> = <default>, every input with a default: start: date = (md.today()), size: small | large = small, show_all: boolean = false. An input's name is one word, or words joined by _.

Components#

The number of colons tells the form (chapter 3):

• Put a blank line before and after a block component's lines, so plain viewers keep the text around them as you wrote it (W108).
• A backslash makes a line or an inline component text: \::: box, \:value[x].
• Component lines work in list items and quotes, indented as the item's text is; not in code or HTML.

Built in#

Params#

• Params are separated by spaces. Each may be given once (F017), counting continuation lines.
• A bare value can't hold (, ), [, ], {, }, spaces or quotes: quote it, "repeat(3, 1fr)", or make it an expression. title= with nothing after it is F011; title="" is empty text.
• {{…}} works in params only inside quotes: title="{{md.doc.title}}", or title=(md.doc.title).
• Every component takes class, id, lang and dir; every block takes the common params of its box (chapter 3): width, height, min-width, max-width, padding and its sides, border, border-radius, background, grid-area, order, align-self, justify-self, aspect-ratio, the inset-* positions, scroll, fill, sticky, show and hide.

Slots and template slots#

A slot line starts at the container's own level, never indented under a list item in it.

Values and expressions#

{{…}} takes a path only: names joined by dots, a param named with - written with _. It works in text, headings, table cells, link addresses and quoted params, never in code. A list, or a record without a name, can't be inserted (F024).

In expressions: + - * /, == != < <= > >=, && || !, a ? b : c, text in double quotes, string(…), int(…), double(…), size(…), x in list, and the list macros filter, map, exists, all, exists_one (chapter 5). For text: contains, startsWith, endsWith, lowerAscii, upperAscii, replace, split, join, substring, trim, charAt, indexOf, lastIndexOf.

Chapter 8 has each one, with examples.

if and each#

md.loop inside each: index (from 0), number (from 1), count, first, last.

Definitions#

A component written in CompMD (chapter 12) is a fence: the language compmd, component= and its name, params for its box, a signature, ---, and a body.

```compmd component=notice {padding=m border-radius=m background=accent}
params:
  title: string
  tone: info | warn = info
slots: [default]
---
**{{title}}** {{md.slot}}
```

Types: string, number, boolean, date, array, object, name (a name the caller picks, as as is), the styling types length, space, color, tracks, areas, surface, border and radius, a choice a | b | c, and input<type> for a param bound to an input.

A component in code (chapter 18) is a fence in its language, jsx, tsx, svelte, js or ts, with component= and an optional runtime= (react@19, preact@10, svelte@5), and its signature is a fence of its own: ```compmd component=harvest signature.

Imports and exports#

md:
  import:
    - from: "@comp-markdown/mermaid@0"
      names: [mermaid]
    - from: ./notices.comp.md
      names:
        - name: notice
          as: alert
    - from: ./harvest.jsx
      names: [harvest]
  export:
    pack: "@elm-street/garden"
    version: "1.0.0"
    names: [notice]

if, each, value and box can't be defined, imported or renamed to (F013).

Code blocks a pack draws#

A code block's text is never filled in from values. Chapter 17 has the rest.

Next: the diagnostics and their fixes.