ArcMoon 1.1.0

Start

Language

Reference

Nothing matches “”.

↑↓ move Enter open Esc close

Start

Getting started

Install ArcMoon, write a page and build it.

ArcMoon builds .arcm files into HTML pages, with the CSS and JavaScript they need.

Install

Needs Node.js 22.12 or newer.

npm install -g arcmoon
pnpm add -g arcmoon
bun add -g arcmoon

Check it with arcm -v. In one project only: npm install arcmoon, then npx arcm.

Your first page

pages/index.arcm
${ const items = ["Write .arcm", "Run arcm build", "Open the HTML"]; }$
[doctype!]
[html = lang: "en"]
  [head][title]My first page[end][end]
  [body]
    [h1]My first page[end]
    [ul]
      [for-each = ${ items }$, as: "item"]
        [li]${ item }$[end]
      [end]
    [end]
  [end]
[end]
HTML ArcMoon builds
<!doctype html>
<html lang="en">
  <head>
    <title>My first page</title>
  </head>
  <body>
    <h1>My first page</h1>
    <ul>
      <li>Write .arcm</li>
      <li>Run arcm build</li>
      <li>Open the HTML</li>
    </ul>
  </body>
</html>
  • [tag]…[end] is an HTML element; [doctype!] has no body.
  • ${ }$ runs in Node.js while the page is built. Nothing runs in the browser.

Build it

arcm build pages                 # writes dist/index.html
arcm build pages/index.arcm -p   # prints the HTML instead

Add a component

A component is another .arcm file. It reads its props with ArcMoon.props():

pages/Greeting.arcm
${ const { name = "friend" } = ArcMoon.props(); }$
[p = class: "greeting"]Hello, ${ name }$![end]
pages/index.arcm
[import = Greeting: "./Greeting.arcm" !]
[Greeting = name: "Adam" !]
[Greeting!]
HTML ArcMoon builds
<p class="greeting">Hello, Adam!</p>
<p class="greeting">Hello, friend!</p>

Make it interactive

runtime ${ }$ runs in the browser. Change the code and the result follows:

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

Set up a project

arcm init writes arcmoon.config.js:

arcmoon.config.js
export default {
  importAliases: { "@": "./src" },   // [import = Card: "@/components/Card.arcm" !]
  removeComments: true,              // drop # comments from the HTML
  timeout: 5000,                     // ms for the ${ }$ code of each file
  bundle: [],                        // npm packages allowed in runtime code
  packages: {},                      // runtime imports loaded from a URL
  outDir: "./dist"                   // where arcm build writes
};

Next