Enables HTMX to retrieve the contents of <template> elements rather than make an HTTP request.
<p hx-get="template:lorem" hx-trigger="load delay:3s">Loading...</p>
<template id="lorem">Lorem ipsum dolor sit amet...</template>Upon a request being made by HTMX, if the request path begins with template:, the extension will take over and retrieve the contents of the <template> element with a matching id, name, or data-name attribute, instead of making an HTTP request.
This allows for keeping simple changes that don't require server-side processing entirely on the client side, which can increase performance, decrease bandwidth usage, and improve conceptual locality in your code.
<!-- From jsDelivr -->
<script src="https://cdn.jsdelivr.net/gh/katrinakitten/[email protected]/htmx-template.min.js"></script>
<!-- Or a local file -->
<script src="./htmx-template.min.js"></script>Once the script is included, you'll need to use the hx-ext attribute to enable the extension. See the HTMX docs for more information.
<body hx-ext="template">
<!-- Your content here -->
</body>