What is qHTML.js?

qHTML is a simplified, custom representation of HTML designed for ease of reading and maintenance; its syntax resembles CSS but defines HTML structure and attributes inline. Because qHTML is implemented as a custom web component, you simply wrap your markup in a <q-html> element and it will transform into standard HTML without any boilerplate or JavaScript API. It’s also easy to extend by defining new custom components so you can reuse blocks with custom attributes.

How it works

A qHTML document looks like CSS: you write tag names followed by braces, and inside the braces you specify attributes and nested elements. Attributes are assigned using name: "value" pairs, and the content property (or synonyms like text or innertext) sets the inner text of an element. All valid HTML attributes work, including event handlers like onclick, and you can nest elements by declaring additional blocks inside braces.

For example:

<script src="qhtml.js"></script>
<q-html>
  div {
    id: "myDiv"
    class: "container"
    content: "click the button below for a special message"
    button {
      onclick: "alert('hello world')"
      content: "click me!"
    }
  }
</q-html>

When the page loads, the qHTML component generates the equivalent HTML:

<div id="myDiv" class="container">
  click the button below for a special message
  <button onclick="alert('hello world')">click me!</button>
</div>

qHTML also includes optional helpers like simplified nesting (write multiple tags separated by commas), custom components defined with <q-component>, and a <q-script> tag for adding event listeners in a concise syntax.
Check out the examples below for a couple of exmaples of features available in qHTML.

Why use qHTML instead of traditional HTML?

• ✓Readable, CSS‑like syntax — qHTML uses a familiar, indentation‑friendly syntax so you spend less time closing tags and more time describing structure:.
• ✓No boilerplate — because qHTML is a custom element, you don’t need to write JavaScript or import any APIs; drop your qHTML inside a <q-html> tag and it renders automatically.
• ✓Easy extensibility — define new custom components with <q-component> and they become available with all their inline attributes.
• ✓Nesting and attributes — all valid HTML attributes and event handlers work; you can nest elements naturally using braces.
• ✓Scripting helper — qHTML provides a <q-script> tag to attach event listeners and write small scripts using CSS selector syntax.