QHTML Wiki

QHTML is a block-based UI language for writing HTML, components, styles, state, and runtime behaviors in a compact declarative form. This wiki is organized like a guided tour: start with basic syntax, then move into components, signals, styling, and editor tooling.

This landing page intentionally mixes plain HTML and multiple <q-html> blocks. The goal is to show how QHTML can sit beside normal HTML instead of replacing the whole page.

Quick Start First render, first import, and the smallest working page. Core Syntax Nesting, selector chains, shorthand, attributes, and text/html/style blocks. Components Runtime pieces, named instances, properties, workers, timers, and more. Styles and Themes Reusable styles, theme mapping, transitions, and painters. State with q-script Compute property values from short JavaScript expressions. q-script Inline replacement and assignment-form script results. Inline Expressions Use ${...} in text, attributes, macros, and scoped aliases. Signals Function-style q-signal, slot signals, connect, and q-connect. State Machines Swap active declarative QHTML states through a component-backed host. QDOM API Mutate the source-of-truth tree and re-render explicitly. Particle Emitter Canvas-backed particles from one custom element and declarative attributes. Debug Tips Runtime flags, update flows, and q-logger. Optional Tag Libraries Deprecated W3 and Bootstrap tag helpers plus q-style equivalents. Module READMEs Where to read next if you are extending the framework itself. Escape Sequences Literal brace handling inside block content. Try It Yourself Open a live editor and send QHTML through a GET request.
q-import { wiki-common.qhtml } wiki-shell { sectionKey: "home" pathPrefix: "" pageTitle: "Start here" pageIntro: "Use the sidebar to move through the language in README order. Each section keeps the examples small so you can see one idea at a time." main { wiki-example-card { title: "A first render" summary: "This is the smallest useful QHTML block. It creates real DOM without any helper JavaScript." note: "Use this pattern when you want to prove the runtime is mounted and parsing correctly." details { html { <q-html> h1 { text { Hello QHTML } } p { text { Your first QHTML render is running. } } </q-html> } } } wiki-example-card { title: "One page can use many q-html blocks" summary: "QHTML can be used in small islands. You can keep plain HTML for the page shell and add QHTML where you want live behavior." note: "This page itself is built that way." details { html { <section>Normal HTML hero</section> <q-html> div { p { text { QHTML island one } } } </q-html> <q-html> div { p { text { QHTML island two } } } </q-html> } } } } } div.wiki-mini-card { h3 { text { A tiny live component } } q-component welcome-pill { q-property title: "Readable blocks" span.w3-tag.w3-round.w3-blue { text { ${this.component.title} } } } p { text { Below is a real component instance rendered on the page: } } welcome-pill { } }