QHTML Editor Playground

Edit the QHTML below, then use the editor tabs to preview rendered output and generated HTML.

q-import { ../dist/q-components.qhtml } q-style container-style { q-style-class { w3-card w3-round-large w3-padding } } q-style button-style { q-style-class { w3-button w3-blue w3-round } } q-theme my-theme { div.containerDiv { container-style } button { button-style } } q-component editor-counter { q-property count: 0 function increment() { var host = this this.count = Number(host.count) + 1; this.update(host.UUID); } my-theme,div.containerDiv { h3 { text { QHTML Playground Counter } } p { text { Click to increment. Each instance keeps its own count. } } button { type: "button" onclick { this.increment(); } text { Count: ${this.count} } } } } div.w3-container.w3-padding { h2 { text { Live QHTML Playground } } p { text { Edit this source and switch to Preview or HTML tabs. } } editor-counter obj1 { } editor-counter obj2 { } }