Show HN: HMPL – Small Template Language for Rendering UI from Server to Client
16 points
1 day ago
| 2 comments
| github.com
| HN
Hi HN! Together with contributors, we've been making a small template language for a year now, which, in our opinion, can replace HTMX and Alpine.js. It is a mix between EJS and Handlebars, that is, you can make a request with a familiar syntax to the server in HTML right in the markup.

Requests are made via fetch and are configured via javascript almost entirely, which is what is needed today to work with the server.

The very essence of the template language comes down to minimizing the size of the bundle of the original web application by moving the components to the server and then storing them there. Thus, on the client we get a framework, where we insert components from the server brick by brick.

We showed this template language a long time ago, but it was not so mature then, so people had a lot of questions: https://news.ycombinator.com/item?id=41204552

Thank you very much to everyone for your attention! Please tell me what you think about the project? It will be interesting to know!

skyzouw
8 hours ago
[-]
Really interesting approach — I love the idea of minimizing client-side complexity without going full SPA. How does HMPL handle dynamic interactivity once the component is injected? Feels like a solid middle ground between SSR and lightweight JS frameworks. Will dig into the docs!
reply
tosh
1 day ago
[-]
Reminds me of how facebook used to render html snippets on the backend and the frontend would just fetch that and update the DOM.

When you say it can replace htmx (which I’m using at the moment):

Isn’t this similar to htmx?

Like if I’m already using htmx, do I see benefits from switching?

Please correct me, but I’d rather frame HMPL, htmx and Alpine.js in the same camp?

So they are direct competitors and different flavors for the lightweight frontend approach.

But the main proposal of HMPL et al is to make people re-think if they need a huge and complex heavy frontend approach or if/when they should go for something lighter.

reply
aanthonymax
1 day ago
[-]
Hello! HMPL differs from HTMX quite seriously in that HTMX uses the outdated XMLHTTPRequest in requests, and is also almost not customizable at all. HMPL focuses on customization, which is done through more complete integration via JavaScript. It differs from Alpine.js in that it is a highly specialized tool, not a general one.

Alpine.js, HTMX and HMPL - represent the same idea (if we are talking about the server), but differ in details.

reply
tosh
1 day ago
[-]
Is there a problem with XMLHTTPRequest?

When you say customizable: how? Can you give an example?

reply
aanthonymax
1 day ago
[-]
It's old. You can specify AbortController, for example.
reply
rendall
1 day ago
[-]
Could you be more specific?
reply
aanthonymax
22 hours ago
[-]
import hmpl from "hmpl-js";

const templateFn = hmpl.compile( `<div> <button data-action="increment" id="btn">Click!</button> <div>Clicks: {{#request src="/api/clicks" after="click:#btn"}}{{/request}}</div> </div>` );

const controller = new AbortController(); const clicker = templateFn(({ request: { event } }) => ({ body: JSON.stringify({ action: event.target.getAttribute("data-action") }), signal: controller.signal, })).response;

document.querySelector("#app").append(clicker);

reply
aanthonymax
22 hours ago
[-]
In such code, you are free to specify almost all RequestInit supported by fetch.
reply