SPRIG: best way to update head information like title, meta,

Question

We are currently working on a website using the Sprig Plugin to show and reactively filter event overviews.

One of the options is to browse through monthly views, showing you all information for one month at a time. In this context we also update the URL the s-push-url attribute and we also want to update <title> and maybe some meta tags.

Our way to do it is by listening to the htmx:afterOnLoad event and fetching title information from a certain header:

<script>
    document.body.addEventListener('htmx:afterOnLoad', function(event) {
        // Check if the response includes a custom header or data with the new title
        var newTitle = event.detail.xhr.getResponseHeader('X-Page-Title');
        if (newTitle) {
            document.title = newTitle;
        }
    });
</script>

This works but I do not really like it. Are there any other solutions for this requirement?

Thanks!

Answer 1

The simplest way to update the title is to include a title element anywhere in the response.

<title>New title</title>

I’m not sure if the same is true for meta tags. You can ask I in the htmx discord server, since swap functionality is handled by htmx.