Language

Props

name: value, value types, quotes, names and style props.

Writing props

Props go after = as name: value, separated by commas. On an element they become attributes:

[a = href: "/docs", class: "link"]Docs[end]
[a =
  href: "/blog",
  class: "link"
]Blog[end]

<a href="/docs" class="link">Docs</a> <a href="/blog" class="link">Blog</a>

Long prop lists can go on several lines.

Values

[input = type: "number", min: 0, step: 0.5, required: true, disabled: false !]
[p = title: ${ "Built " + 2026 }$]Hover me[end]

<input type="number" min="0" step="0.5" required>
<p title="Built 2026">Hover me</p>

• "text" or 'text': a string. "" writes an empty attribute.
• 0, -2, 0.5: a number, written as text.
• true writes the attribute alone; false leaves it out.
• ${ }$: a value from build-time code: text, a number or a boolean. null, undefined and false leave the attribute out. Objects and arrays stop the build.
• runtime ${ }$: a value that changes in the browser. See Runtime code.

Quotes inside a value

Only the quote you used needs a backslash:

[p = title: "Say \"hi\""]Double quotes[end]
[p = title: 'It\'s fine']Single quotes[end]
[p = title: 'Say "hi"']No backslash needed[end]

<p title="Say &quot;hi&quot;">Double quotes</p>
<p title="It&#x27;s fine">Single quotes</p>
<p title="Say &quot;hi&quot;">No backslash needed</p>

Multi-line values

A quoted value can span lines, so long text stays easy to read in your code. This helps most with component props:

${ const { title, description } = ArcMoon.props(); }$
[div = class: "card"]
  [h3]${ title }$[end]
  [p]${ description }$[end]
[end]

[import = Card: "./Card.arcm" !]
[Card =
  title: "ArcMoon",
  description: "A template language for web pages.
    Write .arcm files, run arcm build,
    and get plain HTML, CSS and JavaScript."
!]

<div class="card">
  <h3>ArcMoon</h3>
  <p>A template language for web pages.
    Write .arcm files, run arcm build,
    and get plain HTML, CSS and JavaScript.</p>
</div>

• The value keeps its line breaks and spaces, exactly as written.
• In text, the browser shows line breaks as spaces: the description reads as one paragraph.
• In an attribute like title, the line breaks stay in the tooltip.

Names

Attributes keep the name exactly as written. Quote a name that has other characters:

[svg = viewBox: "0 0 10 10", "xmlns:xlink": "http://www.w3.org/1999/xlink" !]

<svg viewBox="0 0 10 10" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>

Style props

--name and css.name go into style, in the order written:

[p = css.color: "crimson", --gap: "8px"]Red[end]

<p style="color: crimson; --gap: 8px">Red</p>

More in Styles.

arcm- props

Props starting with arcm- are for ArcMoon, not for the browser. They are not written as attributes:

• arcm-raw: true: write the body as it is, without reading blocks or comments in it.
• arcm-ref: "name": one element runtime code can find with ArcMoon.ref().
• arcm-shared-ref: "name": many elements, found with ArcMoon.refs().
• arcm-syntax: "css" (experimental): names the body's language for editors. No editor uses it yet, and nothing changes in the HTML.

[pre = arcm-raw: true][b] and # stay as written[end]
[div = arcm-ref: "box"]Found by runtime code[end]
runtime ${ ArcMoon.ref(ArcMoon.defineRef("box")).dataset.ready = "yes"; }$

<pre>[b] and # stay as written</pre>
<div data-arcm-ref="box-u0">Found by runtime code</div>

A ref becomes a data-arcm-ref id the browser code uses. Other arcm- names are left out. More in Runtime code.

Props on components

A component reads its props with ArcMoon.props(). It can also take values without a name, by position. See Components.

Mistakes

✗ unquoted value AKZB for prop "id"; write "AKZB" (only true / false and numbers may be unquoted)
✗ prop "id" is written twice
✗ prop "class" on [p] is an object; attributes must be text, numbers or booleans
⚠ page.arcm:1:1  positional value "first" on [p] is not used; HTML elements only take named props (key: value)