UmBootstrap taking advantage of Umbraco Content Delivery API to try out rendering the page out in HTMX. A tiny script:

<script>
        document.addEventListener('htmx:afterSwap', function (event) {
            const siteData = JSON.parse(event.detail.xhr.response);
            const itemTemplate = document.getElementById('item-template').innerHTML;
            const siteItemsHTML = siteData.items.map(item => {
                return itemTemplate.replace('{{ title }}', item.properties.pageTitle)
                    .replace('{{ description }}', item.properties.pageDescription)
                    .replace('{{ url }}', item.route.path)
                    .replace('{{ imageUrl }}', item.properties.pageThumbnail[0].url);
            }).join('');
            document.getElementById('data-container').innerHTML = siteItemsHTML;
        });
    </script>

And

<template>```:
    ```<template id="item-template">
        <div class="g-col-12 g-col-md-6 g-col-lg-4">
            <div class="card h-100 shadow">
                <img src="{{ imageUrl }}" alt="Image" class="ratio ratio-16x9 object-fit-fill" />
                <div class="card-body">
                    <h5 class="card-title pb-1"><a class="nav-link stretched-link" href="{{ url }}">{{ title }}</a></h3>
                    <p>{{ description }}</p>
                </div>
            </div>
        </div>
    </template>

Standard Umbraco C# Razor on the left and HTMX on the right https://cdn.discordapp.com/attachments/882981290662580264/1206524213981347882/yirrCECEaL.mp4?ex=65dc523c&is=65c9dd3c&hm=eb5bdc7ddfd7a16b3b4e8ae77d5b6d544ad8088f0717fd222b34f53d99d1ab33&