### Full Temme.js Example

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

A comprehensive example demonstrating the import, setup, and usage of the `parse` function with all optional callbacks.

```js
import { parse } from "@eoussama/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);
```

--------------------------------

### Target Element Example

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

Example of selecting an HTML element to be used as the rendering host for Temme.

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

--------------------------------

### Install Temme.js with npm

Source: https://github.com/eoussama/temme.js/wiki/Temme-install

Use npm to install the Temme.js package. This is the standard method for Node.js projects.

```bash
npm install @eoussama/temmejs
```

--------------------------------

### Temme Inheritance Configuration Example

Source: https://github.com/eoussama/temme.js/wiki/Temme-inheritance

This example demonstrates how to configure inheritance modes for templates in Temme. Use 'append' for additive composition and 'override' when the referenced structure should take precedence.

```javascript
const hierarchy = {
  templates: [
    {
      ref: "base",
      id: "main-id",
      classes: ["one", "two"]
    }
  ],
  from: {
    ref: "base",
    mode: "override"
  }
};

```

--------------------------------

### Hierarchy Object Example

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

An example of a plain JavaScript object defining the HTML structure for Temme to render.

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

--------------------------------

### Browser Usage Example for Temme.js

Source: https://github.com/eoussama/temme.js/blob/master/README.md

Demonstrates how to use Temme.js in a browser environment. It includes setting up a target element, defining the hierarchy object, and calling the parse function.

```html
<!-- The element we're going to append the HTML skeleton to. -->
<div id="target"></div>

<!-- Including Temme JS. -->
<script src="temme.js"></script>

<!-- Putting Temme to do its thing. -->
<script>
  const target = document.getElementById("target");

  parse(
    {
      classes: ["card", "card-dark"],
      childNodes: [
        {
          name: "div",
          classes: ["card-header"],
          childNodes: [
            {
              name: "h2",
              content: {
                value: "Card header"
              },
              classes: ["title", "txt-gray", "txt-bold"],
              attributes: [{ contenteditable: true }]
            }
          ]
        },
        {
          name: "div",
          classes: ["card-body", "container"],
          data: {
            source: "www.somelink.com",
            id: 536
          },
          childNodes: [
            {
              name: "p",
              content: {
                value:
                  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aspernatur deserunt assumenda in officiis dolore, perspiciatis nam soluta iste odit?"
              }
            },
            {
              name: "p",
              content: {
                type: "html",
                value:
                  'Lorem ipsum <b>dolor sit amet consectetur <u>adipisicing</u></b> elit. Dolores aspernatur <span class="link">deserunt</span> assumenda in officiis dolore, <mark>perspiciatis</mark> nam soluta iste odit?'
              }
            }
          ]
        }
      ]
    },
    target
  );
</script>
```

--------------------------------

### Node Callback Example

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

Using the optional `nodeCallback` to perform actions for each hierarchy node as it's parsed.

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

--------------------------------

### Node.js Environment Setup for Temme.js

Source: https://github.com/eoussama/temme.js/blob/master/README.md

Shows how to import the parse function from Temme.js in a Node.js environment using either CommonJS or ESM syntax.

```javascript
// CommonJS
const { parse } = require("temmejs");

// ESM
import { parse } from "temmejs";
```

--------------------------------

### Install Temme.js with pnpm

Source: https://github.com/eoussama/temme.js/wiki/Temme-install

Use pnpm to add the Temme.js package to your project. pnpm is a fast, disk-space-efficient package manager.

```bash
pnpm add @eoussama/temmejs
```

--------------------------------

### Node.js Usage Example for Temme.js

Source: https://github.com/eoussama/temme.js/blob/master/README.md

Demonstrates basic usage of Temme.js in a Node.js environment. It creates a target element, defines a simple hierarchy, and calls the parse function within a try-catch block.

```javascript
// The host element.
const target = document.createEelement("div");

// The hierarchy.
const hierarchy = {
  classes: ["red"]
};

// Telling Temme to do its thing.
try {
  parse(hierarchy, target);
}
catch (e) {
  console.error(e.name, e.message);
}
```

--------------------------------

### End Callback Example

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

Using the optional `endCallback` to execute code after the entire parsing process is complete.

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

--------------------------------

### Install Temme.js with yarn

Source: https://github.com/eoussama/temme.js/wiki/Temme-install

Use yarn to add the Temme.js package to your project. yarn is another popular package manager for JavaScript.

```bash
yarn add @eoussama/temmejs
```

--------------------------------

### Browser HTML Structure Example

Source: https://github.com/eoussama/temme.js/wiki/Temme-usage

Defines an HTML structure using a JavaScript object hierarchy for Temme.js to parse and render in a browser.

```html
<div id="target"></div>
```

```javascript
const hierarchy = {
  childNodes: [
    {
      name: "h1",
      classes: ["heading-1", "bold"],
      content: {
        value: "Interesting title."
      }
    },
    {
      name: "hr"
    },
    {
      name: "div",
      classes: ["container"],
      childNodes: [
        {
          name: "p",
          content: {
            value: "Some random text."
          }
        }
      ]
    },
    {
      name: "hr"
    }
  ]
};
```

```javascript
import { parse } from "@eoussama/temmejs";

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

parse(hierarchy, target);
```

--------------------------------

### Template to Template Inheritance Example

Source: https://github.com/eoussama/temme.js/wiki/Temme-inheritance

Demonstrates template-to-template inheritance where 'temp-2' inherits from 'temp-1', and the root hierarchy inherits from 'temp-2'. Duplicate class values are removed during normalization.

```javascript
const hierarchy = {
  templates: [
    {
      ref: "temp-1",
      classes: ["bold", "dup", "dup"]
    },
    {
      ref: "temp-2",
      from: {
        ref: "temp-1"
      },
      classes: ["orange", "dup"]
    }
  ],
  from: {
    ref: "temp-2"
  }
};
```

--------------------------------

### Parse Function Return Value Example

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

Capturing and logging the fully sanitized hierarchy object returned by the `parse` function.

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

--------------------------------

### Object to Object Inheritance Example

Source: https://github.com/eoussama/temme.js/wiki/Temme-inheritance

Illustrates object-to-object inheritance where child nodes inherit properties from 'parent' and 'sibling'. Inherited values accumulate as references are resolved.

```javascript
const hierarchy = {
  ref: "parent",
  attributes: { visible: true },
  classes: ["red", "blue"],
  childNodes: [
    {
      ref: "sibling",
      name: "h1",
      classes: ["yellow"],
      dataset: {
        id: 100,
        title: "Some title"
      },
      from: {
        ref: "parent"
      }
    },
    {
      name: "p",
      from: {
        ref: "sibling"
      }
    }
  ]
};
```

--------------------------------

### Temme JS Parsing Example

Source: https://github.com/eoussama/temme.js/blob/master/tests/sandbox/index.html

This snippet demonstrates how to use Temme JS to parse a hierarchical object and create corresponding DOM elements. It includes timing the operation and logging results to the console.

```javascript
// Getting the parent element.
const target = document.getElementById('target');

// Testing up the hierarchy object.
const hierarchy = {
  ref: 'ele-0',
  classes: ['ribbinds'],
  childNodes: [
    {
      name: 'figure',
      ref: 'ele-1',
      classes: ['red'],
      from: { ref: 'ele-0', mode: 'append' }
    },
    {
      id: 'ff',
      from: { ref: 'ele-1' }
    }
  ]
};

try {
  // Starting a timer.
  console.time('Temme');

  // Telling Temme to do us the favor.
  const x = parse(hierarchy, target, (resultedHierarchy) => {
    // Outputting the results in the console.
    console.log('%c [TemmeJS]%c All elements were created', 'color: green; font-weight: bold;', 'color: green; font-weight: 300;');

    // Displaying the time took.
    console.log('\nTime took:');
    console.timeEnd('Temme');

    // Displaying the resulted hierarchy.
    console.log('The resulted hierarchy object:');
    console.log(resultedHierarchy);

    // Displaying the DOM element.
    console.log('\nThe DOM element:');
    console.info(target);
  }, (id, h) => {
    // Outputting information about each object being created.
    console.log(`Element ID: %c${id} %ccreated!`, 'font-weight: bold;', 'font-weight: normal;');
  });
} catch (e) {
  console.error(e.name, e.message);
}
```

--------------------------------

### Define HTML Element Hierarchy in JavaScript

Source: https://github.com/eoussama/temme.js/wiki/Temme-options

This example defines a structured hierarchy for an HTML article element, including classes, attributes, dataset values, content, and a child node. Use this structure to represent complex HTML elements programmatically.

```javascript
const hierarchy = {
  ref: "card",
  name: "article",
  classes: ["card"],
  attributes: {
    role: "article"
  },
  dataset: {
    kind: "profile"
  },
  content: {
    type: "html",
    value: "<h2>Profile</h2>"
  },
  childNodes: [
    {
      name: "p",
      content: {
        value: "This card was generated with Temme."
      }
    }
  ]
};

```

--------------------------------

### Available Build Scripts

Source: https://github.com/eoussama/temme.js/wiki/Temme-build

Lists common commands for managing the Temme project build, testing, and linting processes.

```bash
pnpm clean
```

```bash
pnpm build
```

```bash
pnpm dev
```

```bash
pnpm build:docs
```

```bash
pnpm prod
```

```bash
pnpm test
```

```bash
pnpm typecheck
```

```bash
pnpm lint
```

```bash
pnpm lint:fix
```

--------------------------------

### Run Production Build

Source: https://github.com/eoussama/temme.js/wiki/Temme-build

Executes the full production build process, including cleaning artifacts, building the distributable package with tsup, and generating the browser documentation bundle.

```bash
pnpm prod
```

--------------------------------

### Run Tests with npm

Source: https://github.com/eoussama/temme.js/wiki/Temme-tests

Execute the automated test suite using the npm package manager.

```bash
npm test
```

--------------------------------

### Run Tests with pnpm

Source: https://github.com/eoussama/temme.js/wiki/Temme-tests

Execute the automated test suite using the pnpm package manager.

```bash
pnpm test
```

--------------------------------

### Basic Temme.js Parsing in Node.js

Source: https://github.com/eoussama/temme.js/wiki/Temme-usage

Illustrates basic usage of Temme.js 'parse' function with a simple hierarchy and error handling in a Node.js environment.

```javascript
const target = document.createElement("div");

const hierarchy = {
  classes: ["red"]
};

try {
  parse(hierarchy, target);
}
catch (e) {
  console.error(e.name, e.message);
}
```

--------------------------------

### Include Specific Options for Inheritance

Source: https://github.com/eoussama/temme.js/wiki/Temme-inheritance

Use 'include' to specify exactly which properties should be inherited from a referenced template. This ensures only the desired attributes are carried over.

```javascript
const hierarchy = {
  templates: [
    {
      ref: "temp-1",
      attributes: {
        visible: true,
        counter: 56
      },
      classes: ["some-class"],
      dataset: { id: 814 }
    }
  ],
  from: {
    ref: "temp-1",
    include: ["classes", "dataset"]
  }
};
```

--------------------------------

### CommonJS Import for Temme.js

Source: https://github.com/eoussama/temme.js/wiki/Temme-usage

Demonstrates how to import the 'parse' function from Temme.js using CommonJS module syntax in a Node.js environment.

```javascript
const { parse } = require("@eoussama/temmejs");
```

--------------------------------

### Temme.js Parsing with Callbacks

Source: https://github.com/eoussama/temme.js/wiki/Temme-usage

Demonstrates how to use optional end-of-parse and per-node observation callbacks with Temme.js.

```javascript
import { parse } from "@eoussama/temmejs";

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

const hierarchy = {
  childNodes: [
    {
      name: "h1",
      content: {
        value: "Hello"
      }
    }
  ]
};

parse(
  hierarchy,
  target,
  (sanitizedHierarchy) => {
    console.log("Finished parsing:", sanitizedHierarchy);
  },
  (temmeId, nodeHierarchy) => {
    console.log("Parsed node:", temmeId, nodeHierarchy);
  }
);
```

--------------------------------

### Import Parse and Validate (CommonJS)

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

Importing the `parse` and `validate` functions using CommonJS syntax.

```js
const { parse, validate } = require("@eoussama/temmejs");
```

--------------------------------

### ESM Import for Temme.js

Source: https://github.com/eoussama/temme.js/wiki/Temme-usage

Shows how to import the 'parse' function from Temme.js using ECMAScript Module (ESM) syntax.

```javascript
import { parse } from "@eoussama/temmejs";
```

--------------------------------

### Clone Temme.js Repository

Source: https://github.com/eoussama/temme.js/wiki/Temme-install

Clone the Temme.js repository from GitHub to build it yourself. This is useful for development or custom builds.

```bash
git clone https://github.com/EOussama/temmejs.git
cd temmejs
pnpm install
```

--------------------------------

### Import Parse and Validate (ESM)

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

Importing the `parse` and `validate` functions using ECMAScript Module (ESM) syntax.

```js
import { parse, validate } from "@eoussama/temmejs";
```

--------------------------------

### Basic HTML Structure Generation with Temme.js

Source: https://github.com/eoussama/temme.js/blob/master/docs/assets/snippets/js/usage-2.txt

Use this snippet to create HTML elements and their content based on a JavaScript object structure. Ensure the target DOM element exists before parsing.

```javascript
const
    // The element that's going to host the skeleton.
    target = document.getElementById('target'),

    // The javascript object describing the skeleton.
    hierarchy = {
        childNodes: [
            {
                name: 'h1',
                classes: ['heading-1', 'bold'],
                content: {
                    value: 'Interesting title.'
                }
            },
            {
                name: 'hr'
            },
            {
                name: 'div',
                classes: ['container'],
                childNodes: [
                    {
                        name: 'p',
                        content: {
                            value: 'Some random text.'
                        }
                    }
                ]
            },
            {
                name: 'hr'
            }
        ]
    };

// Temme, go for it.
parse(hierarchy, target);
```

--------------------------------

### Generate HTML with Temme JS

Source: https://github.com/eoussama/temme.js/blob/master/examples/index.html

Use this snippet to generate HTML content dynamically. Ensure the Temme JS library is imported and a target DOM element is available.

```javascript
import { parse } from '../dist/temme.js';

const target = document.getElementById('target');
const hierarchy = {
  classes: ['container'],
  childNodes: [
    {
      ref: 'card-ref',
      classes: ['card'],
      childNodes: [
        {
          classes: ['card-header'],
          childNodes: [
            { name: 'h3', content: { value: 'Card header' } }
          ]
        },
        {
          classes: ['card-body'],
          childNodes: [
            {
              name: 'p',
              content: {
                type: 'html',
                value: 'This is a dummy paragraph. Generated completely using <b>Temme JS</b>.'
              }
            },
            {
              name: 'p',
              content: {
                type: 'html',
                value: 'And all that follows are duplicates of this one.'
              }
            }
          ]
        }
      ]
    },
    {
      from: { ref: 'card-ref', mode: 'override', children: { allow: true } }
    },
    {
      from: { ref: 'card-ref', mode: 'override', children: { allow: true } }
    },
    {
      from: { ref: 'card-ref', mode: 'override', children: { allow: true } }
    },
    {
      from: { ref: 'card-ref', mode: 'override', children: { allow: true } }
    }
  ]
};

try {
  parse(hierarchy, target, console.log);
} catch (e) {
  console.error(e.name, e.message);
}
```

--------------------------------

### Temme.js Validation Before Parsing

Source: https://github.com/eoussama/temme.js/wiki/Temme-usage

Shows how to use the 'validate' function from Temme.js to check a hierarchy before rendering it with 'parse'.

```javascript
import { parse, validate } from "@eoussama/temmejs";

const result = validate({
  name: "section",
  classes: ["hero"]
});

if (result.valid) {
  parse(
    {
      name: "section",
      classes: ["hero"]
    },
    document.getElementById("target")
  );
}
else {
  console.error(result.error);
}
```

--------------------------------

### Allow Children Inheritance

Source: https://github.com/eoussama/temme.js/wiki/Temme-inheritance

Control the inheritance of child nodes by setting 'children.allow' to true within the 'from' configuration. This allows child elements from the referenced node to be included.

```javascript
const hierarchy = {
  childNodes: [
    {
      ref: "list",
      name: "ul",
      childNodes: [
        { name: "li" },
        { name: "li" }
      ]
    },
    {
      from: {
        ref: "list",
        children: {
          allow: true
        }
      },
      childNodes: [
        {
          name: "span"
        }
      ]
    }
  ]
};
```

--------------------------------

### Control Children Inheritance Placement

Source: https://github.com/eoussama/temme.js/wiki/Temme-inheritance

Specify the placement of inherited child nodes using the 'children.placement' option. It can be set to 'before' or 'after' the current node's children. The default is 'after'.

```javascript
from: {
  ref: "list",
  children: {
    allow: true,
    placement: "before"
  }
}
```

--------------------------------

### Define Content Type and Value in Temme.js

Source: https://github.com/eoussama/temme.js/wiki/Temme-options

Control the element's content using the `content` option. Specify `type` as 'text' for `textContent` or 'html' for `innerHTML`, along with the `value`.

```javascript
content: {
  type: "text",
  value: "Hello world"
}
```

```javascript
content: {
  type: "html",
  value: "<strong>Hello world</strong>"
}
```

--------------------------------

### Set Dataset Attributes in Temme.js

Source: https://github.com/eoussama/temme.js/wiki/Temme-options

Use the `dataset` option to map JavaScript object properties to `data-*` attributes on an element. Values are strings.

```javascript
dataset: {
  userId: "42",
  state: "active"
}
```

--------------------------------

### Basic Hierarchy Object for Inheritance

Source: https://github.com/eoussama/temme.js/wiki/Temme-inheritance

Defines a basic hierarchy object structure with a reference to a parent. The 'from' option specifies what the object inherits from.

```javascript
const hierarchy = {
  ref: "parent",
  childNodes: [
    {
      from: {
        ref: "parent"
      }
    }
  ]
};
```

--------------------------------

### parse

Source: https://github.com/eoussama/temme.js/wiki/Home

Parses a hierarchy object and renders it into a target HTML element. It can optionally take an end callback and a node callback for custom processing.

```APIDOC
## parse(hierarchy, target, endCallback?, nodeCallback?)

### Description
Parses a hierarchy object and renders it into a target HTML element. It can optionally take an end callback and a node callback for custom processing.

### Parameters
- **hierarchy** (object) - Required - The object describing the HTML structure.
- **target** (HTMLElement) - Required - The target HTML element to render the structure into.
- **endCallback** (function) - Optional - A callback function executed after the entire hierarchy is parsed and rendered.
- **nodeCallback** (function) - Optional - A callback function executed for each node processed during parsing.
```

--------------------------------

### parse Function

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

Parses a hierarchy object and renders it into a target HTML element. It can optionally accept callbacks for post-rendering and per-node processing.

```APIDOC
## parse(hierarchy, target, endCallback?, nodeCallback?)

### Description
Parses a hierarchy object and renders it into a target HTML element. It can optionally accept callbacks for post-rendering and per-node processing.

### Parameters
#### Path Parameters
- **hierarchy** (object) - Required - The blueprint for the HTML structure.
- **target** (HTMLElement) - Required - The HTML element Temme renders into.
- **endCallback** (function) - Optional - A function that runs after the full parsing process has completed. Receives the fully sanitized hierarchy.
- **nodeCallback** (function) - Optional - A function that runs each time a hierarchy node is parsed. Receives the internal Temme ID and the sanitized hierarchy object for that node.

### Return value
- **Hierarchy** - The fully sanitized hierarchy object after validation, sanitization, inheritance resolution, and rendering preparation.
```

--------------------------------

### Exclude Specific Options from Inheritance

Source: https://github.com/eoussama/temme.js/wiki/Temme-inheritance

Use 'exclude' to inherit all properties except for those explicitly listed. This is useful for overriding or omitting specific inherited values.

```javascript
const hierarchy = {
  templates: [
    {
      ref: "temp-1",
      attributes: {
        visible: true,
        counter: 56
      },
      classes: ["some-class"],
      dataset: { id: 814 }
    }
  ],
  from: {
    ref: "temp-1",
    exclude: ["dataset"]
  }
};
```

--------------------------------

### Set HTML Attributes in Temme.js

Source: https://github.com/eoussama/temme.js/wiki/Temme-options

Use the `attributes` option to apply HTML attributes to parsed elements. This is useful for setting properties like `title`, `role`, or `tabindex`.

```javascript
attributes: {
  title: "Tooltip",
  role: "button",
  tabindex: "0"
}
```

--------------------------------

### Normalized Temme Options Structure

Source: https://github.com/eoussama/temme.js/wiki/Temme-options

This is the fully normalized shape Temme works with after validation and sanitization. You typically provide only the options you care about, and Temme fills in the rest with defaults.

```javascript
{
  temmeIds: [],
  ref: "",
  id: "",
  name: "div",
  classes: [],
  childNodes: [],
  templates: [],
  attributes: {},
  dataset: {},
  content: {
    type: "text",
    value: ""
  },
  from: {
    ref: "",
    mode: "append",
    include: ["name", "id", "classes", "attributes", "dataset", "content", "childNodes"],
    exclude: [],
    children: {
      allow: false,
      placement: "after"
    }
  }
}
```

--------------------------------

### Parse Function Signature

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

The signature for the main `parse` function, detailing its arguments and return type.

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

--------------------------------

### Temme.js API Signature

Source: https://github.com/eoussama/temme.js/wiki/Home

Defines the signature for the `parse` and `validate` functions in Temme.js. Use `parse` to render a hierarchy object into a target HTML element and `validate` to check the structure's validity before rendering.

```typescript
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;
};
```

--------------------------------

### parse Function

Source: https://github.com/eoussama/temme.js/blob/master/README.md

The core function of Temme.js. It takes a hierarchy object and a target HTML element to generate an HTML skeleton. Optional callbacks can be provided for end-of-parsing and node-creation events.

```APIDOC
## parse Function

### Description
Converts a JavaScript object hierarchy into an HTML skeleton and appends it to a target HTML element. It can optionally execute callback functions upon completion or when nodes are created.

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

### Parameters

- **hierarchy** (object) - Required - A JavaScript object defining the structure of the HTML skeleton to be generated. It can include properties like `name`, `classes`, `attributes`, `data`, `content`, and `childNodes`.
- **target** (HTMLElement) - Required - The HTML element to which the generated HTML skeleton will be appended.
- **endCallback** (function) - Optional - A callback function that is executed after the entire HTML skeleton has been parsed and appended. It can be asynchronous.
- **nodeCallback** (function) - Optional - A callback function that is executed for each node created during the parsing process. It receives the `temmeId` and the `hierarchy` of the created node.

### Usage Examples

#### Browser Environment
```html
<!-- The element we're going to append the HTML skeleton to. -->
<div id="target"></div>

<!-- Including Temme JS. -->
<script src="temme.js"></script>

<!-- Putting Temme to do its thing. -->
<script>
  const target = document.getElementById("target");

  parse(
    {
      classes: ["card", "card-dark"],
      childNodes: [
        {
          name: "div",
          classes: ["card-header"],
          childNodes: [
            {
              name: "h2",
              content: {
                value: "Card header"
              },
              classes: ["title", "txt-gray", "txt-bold"],
              attributes: [{ contenteditable: true }]
            }
          ]
        },
        {
          name: "div",
          classes: ["card-body", "container"],
          data: {
            source: "www.somelink.com",
            id: 536
          },
          childNodes: [
            {
              name: "p",
              content: {
                value:
                  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aspernatur deserunt assumenda in officiis dolore, perspiciatis nam soluta iste odit?"
              }
            },
            {
              name: "p",
              content: {
                type: "html",
                value:
                  'Lorem ipsum <b>dolor sit amet consectetur <u>adipisicing</u></b> elit. Dolores aspernatur <span class="link">deserunt</span> assumenda in officiis dolore, <mark>perspiciatis</mark> nam soluta iste odit?'
              }
            }
          ]
        }
      ]
    },
    target
  );
</script>
```

#### Node.js Environment
```js
// CommonJS
const { parse } = require("temmejs");

// ESM
// import { parse } from "temmejs";

// The host element.
const target = document.createElement("div");

// The hierarchy.
const hierarchy = {
  classes: ["red"]
};

// Telling Temme to do its thing.
try {
  parse(hierarchy, target);
}
catch (e) {
  console.error(e.name, e.message);
}
```
```

--------------------------------

### Minimal Parse Function Call

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

The most basic usage of the `parse` function, requiring only the hierarchy and target element.

```typescript
parse(hierarchy, target);
```

--------------------------------

### validate

Source: https://github.com/eoussama/temme.js/wiki/Home

Validates a hierarchy object to ensure it conforms to the expected structure before rendering.

```APIDOC
## validate(hierarchy)

### Description
Validates a hierarchy object to ensure it conforms to the expected structure before rendering.

### Parameters
- **hierarchy** (object) - Required - The object describing the HTML structure to validate.

### Response
#### Success Response (200)
- **valid** (boolean) - Indicates whether the hierarchy is valid.
- **error** (Error | null) - An error object if the hierarchy is invalid, otherwise null.
```

--------------------------------

### Temme.js Parse Function Signature

Source: https://github.com/eoussama/temme.js/blob/master/README.md

The signature for the main parse function in Temme.js. It takes a hierarchy object, a target HTMLElement, and optional callbacks.

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

--------------------------------

### Temme.js validate Function Signature

Source: https://github.com/eoussama/temme.js/wiki/Temme-inheritance

The `validate` function checks if a given hierarchy is valid according to Temme's rules. It returns an object indicating validity and any encountered error.

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

--------------------------------

### Validate Function Signature

Source: https://github.com/eoussama/temme.js/wiki/Temme-syntax

The signature for the `validate` function, used to check hierarchy validity without rendering.

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.