HMPL

🌐 HMPL (/ˈhæmpəl/ portmanteau of the words Cample and HTML) is a small template language for displaying UI from server to client. It is based on customizable requests sent to the server via fetch and processed into ready-made HTML. The language is syntactically object-based and integrated with JSON5 and DOMPurify. Reduce the size of your javascript files and display the same UI as if it was written in a modern framework!

Example

<div>
  {{#request src="/api/my-component.html"}}
    {{#indicator trigger="pending"}}
      <p>Loading...</p>
    {{/indicator}}
  {{/request}}
</div>

How it works?

The HTML you use on your site is enhanced by adding special blocks that resemble components in syntax, but are more like “helper blocks” like in Handlebars.

In these blocks you describe the request that will be sent to the server to get the finished components from there. This includes HTTP methods, request frequency and many other things that are used when talking about fetch.

To describe it more briefly, it is something in between HTMX and EJS 👀.

Why HMPL?

Unlike other similar modules, the template language provides more complete customization due to a well-thought-out balance between HTML and JS. HMPL supports modern EcmaScript standards - thanks to its well-thought-out functionality, you will not depend on versions.

Also, the template language format itself allows you to work with .hmpl extension files if you use Vite or WebPack.