q-import { wiki-common.qhtml }
wiki-shell {
sectionKey: "quick-start"
pathPrefix: ""
pageTitle: "Quick Start"
pageIntro: "Start here if you have never used QHTML before. These examples cover setup, loading the runtime, and writing the first block."
main {
wiki-example-card {
title: "Project setup"
summary: "The repository ships the runtime and the optional component bundle. The smallest setup is just qhtml6.js."
note: "The component bundle is optional. Use it when you want things like tabs, grid, modal, sidebar, or editor-ready widgets."
details {
html {
git clone https://github.com/qhtml/qhtml6.git
source ./deploy.sh /path/to/project
}
}
}
wiki-example-card {
title: "Include qhtml6.js"
summary: "Load the runtime once in the page head or before the closing body tag."
note: "This is the only required file for a first render."
details {
html {
<script src="qhtml6.js"></script>
}
}
}
wiki-example-card {
title: "Write your first q-html block"
summary: "A q-html block is the place where QHTML source lives. The runtime parses it and mounts the resulting DOM."
note: "This is the smallest working example in the whole language."
details {
html {
<q-html>
h1 { text { Hello QHTML } }
p { text { Your first QHTML render is running. } }
</q-html>
}
}
}
}
}