Home

Description

Temme (Emmet in reverse) is a lightweight JavaScript library for generating and composing HTML structures from plain JavaScript objects.

Instead of writing imperative DOM manipulation code or injecting raw HTML strings, you describe your UI as a hierarchy object and let Temme turn it into real DOM nodes. The library is especially useful when you want a clean, data-driven way to create markup, reuse structure, and compose elements programmatically.

Temme currently exposes a modern named-export API:

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

It also supports advanced composition features such as templates, references, inheritance, include/exclude ranges, and controlled child inheritance.

---

How does it work?

With Temme, building DOM trees is done by describing elements as JavaScript objects.

A hierarchy can define things like:

• element name
• id
• classes
• attributes
• dataset values
• content
• child nodes
• reusable templates
• inheritance from other nodes or templates

Once the hierarchy is defined, you pass it to parse(...) along with a target HTML element. Temme validates the structure, sanitizes it, resolves references and inheritance rules, and finally renders the resulting DOM tree into the target.

In practice, this means you can model complex HTML structures in a way that is:

• readable
• composable
• reusable
• easy to serialize as JSON

In fact, the documentation website itself is generated with Temme.

---

Advantages

You might ask: why use this instead of plain DOM APIs or Emmet-style shorthand?

1. Structured, data-first authoring

While Emmet is optimized for fast shorthand expansion, Temme is optimized for working with structured JavaScript data. That makes it a better fit for programmatic DOM generation.

2. Cleaner than manual DOM manipulation

Temme removes a lot of repetitive low-level DOM code such as:

• repeated document.createElement(...)
• repeated appendChild(...)
• repetitive attribute and class assignment
• manual nesting logic

3. Safer and clearer than raw HTML injection

For many use cases, describing content as objects is easier to read and maintain than assembling large HTML strings manually.

4. Reuse through templates and references

Temme supports reusable templates and inheritance rules, which makes it easier to share structure and styling across multiple nodes without duplicating configuration.

5. JSON-friendly

Because Temme works with plain object hierarchies, its structures can be serialized to and from JSON easily. This makes it useful for configuration-driven rendering and data-based UI generation workflows.

6. Validation support

The current version includes validate(hierarchy), which lets you check whether a hierarchy is valid before rendering it.

---

Current API

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

validate(hierarchy: object): {
  valid: boolean;
  error: Error | null;
};

---

Summary

Temme gives you a declarative, object-based way to generate HTML with JavaScript.