Temme syntax

Syntax

Temme exposes a named-export API centered around the parse function.

parse(
  hierarchy: object,
  target: HTMLElement,
  endCallback?: (hierarchy: Hierarchy) => void | Promise<void>,
  nodeCallback?: (temmeId: string, hierarchy: Hierarchy) => void
): Hierarchy;

In most cases, the minimal call you will use is:

parse(hierarchy, target);

You can also validate a hierarchy without rendering it:

validate(hierarchy): {
  valid: boolean;
  error: unknown; // `null` when valid
};

validate runs every check parse runs (options, templates, references, scopes and circular inheritance) on a copy of the hierarchy, without rendering it.

---

Import syntax

ESM

import { parse, validate } from "temmejs";

CommonJS

const { parse, validate } = require("temmejs");

Script tag

<script src="https://cdn.jsdelivr.net/npm/temmejs/dist/temme.iife.js"></script>
<script>
  Temme.parse(hierarchy, target);
</script>

---

hierarchy

The hierarchy argument is the blueprint for the HTML structure Temme will create.

It is a plain JavaScript object that describes:

• the element name
• classes
• attributes
• dataset values
• content
• child nodes
• templates
• inheritance rules

Temme validates and sanitizes this object before rendering. That means missing options are populated with defaults, arrays are normalized where needed, and invalid definitions will throw before rendering begins. In TypeScript, annotate it with the exported HierarchyInput type to have it checked as you write it.

Example:

const hierarchy = {
  name: "section",
  classes: ["hero"],
  childNodes: [
    {
      name: "h1",
      content: {
        value: "Welcome"
      }
    }
  ]
};

---

target

The target argument is the HTML element Temme renders into.

It must be a valid HTMLElement, including one from another frame.

Temme uses this element as the rendering host for the parsed hierarchy tree. Depending on the hierarchy and inheritance rules, the target can also be affected during parsing because the root hierarchy is applied directly onto the target element itself.

Example:

const target = document.getElementById("app");
parse(hierarchy, target);

If the provided value is not a valid HTML element, Temme throws an InvalidTargetError.

Temme's own errors all extend TemmyError and their messages are prefixed with [Temme]: . Errors thrown by your callbacks are re-thrown untouched.

---

endCallback

endCallback is an optional function that runs after the full parsing process has completed.

Signature:

(hierarchy: Hierarchy) => void | Promise<void>

It receives the fully sanitized hierarchy that Temme ended up using internally.

That sanitized hierarchy includes:

• default option values
• normalized arrays
• generated temmeIds
• resolved structural preparation before final usage

Example:

parse(hierarchy, target, (result) => {
  console.log("Finished parsing:", result);
});

The current implementation also supports async end callbacks. If the callback returns a promise and that promise rejects, Temme logs a warning for the rejected async callback.

---

nodeCallback

nodeCallback is an optional function that runs each time a hierarchy node is parsed.

Signature:

(temmeId: string, hierarchy: Hierarchy) => void

It receives:

• temmeId: the internal Temme ID of the current parsed node
• hierarchy: the sanitized hierarchy object for that node

This is useful when you want to observe parsing progress, debug rendering, or perform per-node side effects.

Example:

parse(hierarchy, target, undefined, (temmeId, node) => {
  console.log("Parsed node:", temmeId, node);
});

---

Return value

parse(...) returns the hierarchy object itself, completed in place: defaults, inherited values and temmeIds included. Parsing the returned object again renders the same tree.

Example:

const result = parse(hierarchy, target);
console.log(result);

This returned value is useful if you want access to the normalized hierarchy Temme actually worked with.

---

Full example

import { parse } from "temmejs";

const target = document.getElementById("app");

const hierarchy = {
  name: "main",
  classes: ["container"],
  childNodes: [
    {
      name: "h1",
      content: {
        value: "Temme"
      }
    },
    {
      name: "p",
      content: {
        value: "From JSON to HTML."
      }
    }
  ]
};

const result = parse(
  hierarchy,
  target,
  (sanitizedHierarchy) => {
    console.log("Finished:", sanitizedHierarchy);
  },
  (temmeId, nodeHierarchy) => {
    console.log("Node parsed:", temmeId, nodeHierarchy);
  }
);

console.log(result);

---

Summary

Temme is used through named exports, or through the Temme global of the script tag builds (Temme.parse(...)).

For rendering, the primary entry point is:

parse(hierarchy, target, endCallback?, nodeCallback?)

And for pre-validation without rendering:

validate(hierarchy)