ArcMoon

ArcMoon is a template language. You write .arcm files, and ArcMoon builds them into web pages.

Release candidate for 1.0. This is what 1.0 will be, unless a bug is found. Install it with npm install arcmoon@rc.

What is ArcMoon?

Here is what a .arcm file can hold.

Blocks become HTML tags.

[p = class: "note"]Hello[end]

<p class="note">Hello</p>

${ }$ runs once, while the page is built. It runs in Node.js, so it can read files and use npm packages. Its result is written into the page.

${ const year = new Date().getFullYear(); }$
[footer]© ${ year }$[end]

<footer>© 2026</footer>

runtime ${ }$ runs in the visitor's browser. Use it for things that change after the page loads, like clicks. The count below updates on each click.

runtime ${
  import { signal } from "arcmoon/reactive";
  const count = signal(0);
}$
[button = onclick: runtime ${ () => count(count() + 1) }$]
  Clicked runtime ${ count() }$ times
[end]

Components are .arcm files you import. A component's [style] only styles that component.

# Card.arcm
${ const { title } = ArcMoon.props(); }$
[div = class: "card"]
  [h2]${ title }$[end]
[end]
[style]
  h2 { color: tomato; }
[end]

# page.arcm
[import = Card: "./Card.arcm" !]
[Card = title: "Lua" !]

The output is plain HTML, with only the CSS and JavaScript that page needs.

Installation

Install the arcm command:

npm install -g arcmoon

Check that it works:

arcm -v

arcmoon and its short name arcm are the same command.

To use ArcMoon from JavaScript, install it in your project instead:

npm install arcmoon

ArcMoon needs Node.js 22.12 or newer.

Versions

ArcMoon follows semver. From 1.0, every 1.x release keeps working with your pages:

• Kept in 1.x: the .arcm syntax, the arcm-* props, css. and -- props, ArcMoon.* in .arcm files, arcmoon/reactive, the CLI commands and flags, the config keys, and the JavaScript API (compile(), build(), buildPages(), render()). A 1.x release can add to these, but never changes them.
• Can change in any release: the exact bytes of the output (whitespace, minifying, file names), names ArcMoon makes for itself (data-a-…, data-arcm-ref), the text of errors and warnings, and arcmoon/core.
• Bug fixes: if ArcMoon does something the docs don't say, fixing it is not a breaking change.

License

MIT © Adam Elmi