q-import { /packages/qhtml7/site/layoutGS.qhtml nocache } q-datafault-site-page sitePage { navigation { datafault-nav-link { href: "/" label: "Home" } datafault-nav-link { href: "/qhtml/qhtml-home" label: "QHTML" } datafault-nav-link { href: "/projects" label: "Projects" } datafault-nav-link { href: "/tools/RouteUI/index.html" label: "RouteUI" } datafault-nav-link { href: "/freedom" label: "Freedom" } } content { q-row { height: "inherit" minHeight: "13.211vh" maxHeight: "13.211vh" flex: "0 0 13.211vh" width: "inherit" gap: "inherit" minWidth: "1vw" maxWidth: "inherit" minColWidth: "inherit" wrap: "inherit" data-layout-id: "lb-node-ms3eco1r-a" q-col { width: "inherit" minWidth: "5.735vw" maxWidth: "5.735vw" flex: "0 0 5.735vw" height: "inherit" gap: "inherit" minHeight: "inherit" maxHeight: "inherit" minColWidth: "inherit" wrap: "inherit" data-layout-id: "lb-node-ms3eco1r-9" div { padding: "18px"; br { } } } q-col { width: "inherit" minWidth: "41.268vw" maxWidth: "41.268vw" flex: "0 0 41.268vw" height: "inherit" gap: "inherit" minHeight: "inherit" maxHeight: "inherit" minColWidth: "inherit" wrap: "inherit" data-layout-id: "lb-node-ms3ecr81-e" h1,text { QHTML } } } q-layout { width: "inherit" minWidth: "1796px" maxWidth: "1796px" height: "inherit" minHeight: "769px" maxHeight: "769px" flex: "0 0 769px" gap: "inherit" minColWidth: "inherit" wrap: "inherit" data-layout-id: "lb-node-ms3eco1r-b" q-row { height: "inherit" minHeight: "50.049vh" maxHeight: "50.049vh" flex: "0 0 50.049vh" width: "inherit" gap: "inherit" minWidth: "1vw" maxWidth: "inherit" minColWidth: "inherit" wrap: "inherit" data-layout-id: "lb-node-ms3egeeg-n" q-col { width: "inherit" minWidth: "12.04vw" maxWidth: "12.04vw" flex: "0 0 12.04vw" height: "inherit" gap: "inherit" minHeight: "inherit" maxHeight: "inherit" minColWidth: "inherit" wrap: "inherit" data-layout-id: "lb-node-ms3egt9y-p" } q-col { width: "inherit" minWidth: "59.968vw" maxWidth: "59.968vw" flex: "0 0 59.968vw" height: "inherit" gap: "inherit" minHeight: "inherit" maxHeight: "inherit" minColWidth: "inherit" wrap: "inherit" data-layout-id: "lb-node-ms3eiki6-r" html {

QHTML7 is a native JavaScript implementation of the QHTML language: a declarative way to describe HTML, CSS, component structure, runtime properties, signals, layout, and browser-facing behavior in one readable source format.

Language design, specifications, and tests created by humans; implementation by ChatGPT 5.6 Codex.

What’s New

No more WebAssembly – too clunky and slow.

While it would have been nice to have a clean assembly based library, it was much too slow and over-complicated. So, QHTML7 now ships as a native JavaScript runtime. The earlier WebAssembly backing system was accurate, but large QHTML scripts had too much startup and interaction lag under WASM, and the distributable package was larger than necessary. The runtime was redesigned as native JavaScript while retaining the QHTMLDomTree object model, the QHTML node classes, and the QHTML7 syntax shortcuts used by the WASM version.

The runtime still treats QHTML as the model. Parsed source becomes a QHTMLDomTree; mounted DOM elements point back to their QHTML node objects; and editing tools can continue using .toQHTML(), .fromQHTML(), .toJSON(), .fromJSON(), and .toHTML().

Scope is intentionally component-centered:

Useful local entry points:

} } q-col { width: "20vw" height: "inherit" flex: "inherit" gap: "inherit" minWidth: "1vw" minHeight: "inherit" maxWidth: "inherit" maxHeight: "inherit" minColWidth: "inherit" wrap: "inherit" data-layout-id: "lb-node-ms3eirh1-t" } } } } }