GitHub - jon49/htmz-be: An implementation of HTMZ

2 min read Original article ↗

HTMZ a Back-End Driven Hypermedia Approach

See the web page for complete documentation and examples.

Introduction | Documentation

Introduction

HTMZ is a minimalist HTML microframework for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML. This is an "extension" that I have made to make it even more powerful and flexible.

Features:

  • Automatic partial page updates
  • Seamless form submissions
  • Back end driven hypermedia requests. The back end determines how to update the front end.
  • Lightweight and easy to use

Documentation

This implementation of HTMZ uses four APIs to determine how the updates are applied.

  1. id

    The id attribute matches the element that will be updated. It replaces the original element with the new content. This is the simplicist and easiest way to perform updates.

  2. hz-target

    uses the query selector to determine what element to update.

  3. hz-swap

    determines how the content is inserted. There are four different values which can be used:

    • replaceWith - replaces the content of the target element (default). In practice this never needs to be explicit.
    • append - appends the content to the end of the target element
    • prepend - prepends the content to the beginning of the target element
    • before - inserts the content before the target element
    • after - inserts the content after the target element
  4. template

    When you do not have a root HTML element use the template element. This is useful for inserting table rows, list items, and other elements that do not have a single root element. When you return an empty template it will delete the old template when you use the strategy replaceWith (which is default, of course).