How — spacepeech

Download the framework

Get the library and drop it next to your index.html as a folder named spacepeech-lib. That folder should hold only the library itself — your own config file and page JSONs live outside it, alongside index.html.

Go to Downloads

# o cloná el repo directamente
git clone https://github.com/Federico-RH/Spacepeech.git spacepeech-lib

Import it in your index.html

Add a container element and load the library as an ES module. This one call initializes everything.

1  <!-- Canvas where the rendered tree is mounted -->
2  <div id="canvas"></div>
3  <script type="module">
4     import { spacepeechInit } from './spacepeech-lib/src/spacepeech-loader.js';
5     // Initializes the library in a single line (auto-loads from Express via ?page= or injected state)
6     window.app = await spacepeechInit('canvas', { configUrl: "./spacepeech.config.json" });
7  </script>

Configure spacepeech.config.json

Optional but recommended — it tells Spacepeech where to look for your pages. A minimal one just needs where your page files live and which one loads by default.

{
  "staticPath": "./pages",
  "defaultPage": "hello-world"
}

Create a "Hello, world" page

A page is one JSON file with three parts: data (the values your page uses), root (what gets drawn), and optionally css. Save this as pages/hello-world.json.

{
  "version": "1.0",
  "data": {
    "user": { "name": "Alex" }
  },
  "root": {
    "id": "main",
    "type": "div",
    "children": [
      {
        "id": "greeting",
        "type": "h1",
        "data": { "text": "Hello, {{user.name}}!" }
      }
    ]
  }
}

Add interactivity

Bind an action to an event and reference reactive data with {{ }} — the DOM updates on its own, no manual re-rendering.

{
  "version": "1.0",
  "data": {
    "user": { "name": "Alex" },
    "clicks": 0
  },
  "root": {
    "id": "main",
    "type": "div",
    "children": [
      { "id": "greeting", "type": "h1", "data": { "text": "Hello, {{user.name}}!" } },
      {
        "id": "counter-btn", "type": "button",
        "data": { "text": "Clicked {{clicks}} times" },
        "actions": {
          "click": { "type": "sys.increment", "path": "clicks", "delta": 1 }
        }
      }
    ]
  }
}

Whenever clicks changes, anything referencing {{clicks}} updates automatically — no manual DOM updates. See Docs for the full action catalog and expression grammar.