@maravilla-labs/htmx-ext-title
v1.0.0
Published
htmx extension to update document.title from HX-Title response header
Maintainers
Readme
@maravilla-labs/htmx-ext-title
htmx extension to update document.title from the HX-Title response header.
Installation
npm / pnpm / yarn
npm install @maravilla-labs/htmx-ext-titleimport htmx from 'htmx.org';
import { title } from '@maravilla-labs/htmx-ext-title';
title(htmx);CDN
<script src="https://unpkg.com/htmx.org@2"></script>
<script src="https://unpkg.com/@maravilla-labs/htmx-ext-title/dist/title.min.js"></script>Usage
Enable the extension on any element (typically the body):
<body hx-ext="title">
<!-- Your content -->
</body>When your server responds to an htmx request, include the HX-Title header:
HX-Title: Dashboard - My AppThe extension will automatically update document.title to the header value.
Server Examples
PHP
header('HX-Title: ' . $pageTitle);Node.js / Express
res.set('HX-Title', pageTitle);Python / Flask
response.headers['HX-Title'] = page_titlePython / Django
response['HX-Title'] = page_titleGo
w.Header().Set("HX-Title", pageTitle)Ruby / Rails
response.headers['HX-Title'] = page_titleRust / Axum
headers.insert("HX-Title", page_title.parse().unwrap());How It Works
The extension listens for the htmx:afterRequest event and reads the HX-Title response header. If present, it updates document.title.
This is useful for SPA-like navigation with htmx where you want the browser title and history to reflect the current page without full page reloads.
License
Licensed under either of Apache License, Version 2.0 or MIT license at your option.
