Show HN: HMPL – Small Template Language for Rendering UI from Server to Client

Summary

Server-oriented customizable templating for JavaScript Introduction hmpl 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 block-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! ☆ If you find HMPL useful, please consider giving us a star on GitHub! Your support helps us continue to innovate and deliver exciting features. Example < div > {{#request src="/api/my-component.html"}} {{#indicator trigger="pending"}} < p > Loading... </ p > {{/indicator}} {{/request}} </ div > Basic usage 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 clicker = templateFn ( ( { request : { event } } ) => ( { body : JSON . stringify ( { action : event . target . getAttribute ( "data-action" ) } ) } ) ) . response ; document . querySelector ( "#app" ) . append ( clicker ) ; Explain this! import hmpl from "hmpl-js" ; // Import the HMPL library // Compile an HMPL template with dynamic behavior const templateFn = hmpl . compile ( `<div> <button data-action="increment" id="btn">Click!</button> <!-- This div will update with the click count from /api/clicks --> <div>Clicks: {{#request src="/api/clicks" after="click:#btn"}}{{/request}}</div> <!-- Also, you can write in short: {{#r src="..."}}{{/r}} --> </div>` ) ; // Generate a response handler for the template // In the original object, we will have the following: { response: div, status: 200 } const clicker = templateFn ( ( { request : { event } } ) => ( { // Send a JSON payload with the action from the button's data attribute body : JSON . stringify ( { action : event . target . getAttribute ( "data-action" ) } )...