Introduction
Less than 1 minute
Introduction
🌐 hmpl is a small template language for displaying UI from server to client. It is based on requests sent to the server via fetch and processed into ready-made HTML. Reduce the size of your
javascript files and display the same UI as if it was written in a modern framework.
Example
HTML before
<div id="wrapper"></div>
<script src="https://unpkg.com/hmpl-js@2.1.7/dist/hmpl.min.js"></script>
<script>
const templateFn = hmpl.compile(
`<div>
{
{
"src":"http://localhost:8000/api/test"
}
}
</div>`
);
const wrapper = document.getElementById("wrapper");
const obj = templateFn();
/**
* obj = {
* response: div,
* status: 200
* }
*/
wrapper.appendChild(obj.response);
</script>
API route - /api/test
<span>123</span>
HTML after
<div id="wrapper">
<div><span>123</span></div>
</div>