Htmz – a low power tool for HTML

htmz - a low power tool for html => htmz > a low power tool for html htmz is a minimalist HTML microframework for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML . [GitHub] plain 🍦 Use straight up HTML. No supersets. No hz- ng- hx- v- w- x-; no special attributes. No DSLs. No . Just vanilla HTML. lightweight 🪶 166 bytes in total. Zero dependencies. Zero JS bundles to load. Not even a backend is required. Just an inline HTML snippet . nofilter ⚡ No preventDefaults. No hidden layers. Real DOM, real interactions. No VDOM, no click listeners. No AJAX, no fetch. No reinventing browsers . In a nutshell, htmz lets you swap page fragments on request using vanilla HTML. Imagine clicking a link, but instead of reloading the whole page, it only updates the relevant portion of the page . htmz is an experiment inspired by htmx , Comet , ‘HTML As The Engine Of Application State’ [1] [2] , and other similar web application architectures. Demos Check out these demos to get an idea of what htmz can do! Tabs Greeting Edit inline Dialog More examples # 🐙 Select an example above! See also: Extensions 🍱 Installing Simply copy the following snippet into your page: For npm enjoyers , use the following npm commands to automate the simple process of copying the snippet . For maximum npm enjoyment, this npm package contains 25 bonus dependencies! npm install --save-dev htmz npx htmzify ./path/to/my/index.html For hackers , you may start with the development version (deminified): htmz.dev.html Basic usage To invoke htmz, you need a hyperlink (or form) having these attributes: href (or action) pointing to the resource URL href =" /flower.html ⋯ Continuing within the href: destination ID selector ⋯ #my-element " And a target attribute with this value target= htmz < a href =" /flower.html #my-element " target= htmz >Flower While this looks like an abuse of the URL fragment (it is), there is no other use for the URL fragment in this context, so it was repurposed as the destination ID selector. And it already looks like a CSS ID selector. ⚠ Important note: The loaded content replaces the selected destination. It may not be intuitive at first, but htmz does not insert the content into the destination. The rationale is that replacement is a more powerful operation. With replacement, you can replace , delete (replace with nothing), and insert-into (replace with the same container as original). What does it do exactly? htmz does one thing and one thing only. Load HTML onto any element in the page on request. Think tabbed UIs, dual-pane list-detail layouts, dialogs, in-place editors, and the like. This idea is not new. Dividing web pages into independently reloading parts has been a thing since mid-1990s. They were called frames , namely,