Skip to content

Home

Jump to bottom
Mike Nickaloff edited this page Mar 3, 2026 · 1 revision

QHTML v6 Overview

QHTML (Quick HTML) is a lightweight runtime HTML authoring system that transforms a CSS-like block syntax into standard HTML. It enables concise UI structure without introducing a heavy framework or virtual DOM layer.

QHTML runs directly in the browser. Markup written inside <q-html> is parsed and rendered as real DOM nodes.

Design Goals

  • Minimal syntax overhead for complex javascript implementations that typically require separate javascript or messy quoting.
  • Complete replacement for HTML.

Basic Usage

Include the runtime:

<script src="qhtml.js"></script>

Write QHTML:

<q-html>
  div.card {
    h1 { text { Hello QHTML } }
    p { text { Clean structure, real DOM output. } }
  }
</q-html>

Rendered output:

<div class="card">
  <h1>Hello QHTML</h1>
  <p>Clean structure, real DOM output.</p>
</div>

Core Capabilities

  • CSS-style nested block syntax
  • Attribute definitions via name: "value"
  • text {} and html {} content blocks
  • Inline event handlers (onClick)
  • Lifecycle hooks (onReady)
  • Runtime components (q-component)
  • Compile-time templates (q-template)
  • External file imports (q-import)
  • Binding Javascript expressions (q-bind)
  • Inline javascript evaluation (q-script)
  • Macro support (q-macro)
  • Aliasing (q-alias)
  • Full DOM system for QHTML code (qdom())
  • property assignment and access
  • Inline references using ${reference}
  • Customize scripting language keywords (rename q-component and any others)
  • QHTML native rewriting to javascript (q-rewrite)
  • q-component methods / functions (function)
  • signals and handlers (q-signal)
  • Optional UI components (q-components.qhtml)

Clone this wiki locally