litestar-htmx

Build HTMX-powered Litestar handlers, partial templates, and server-driven client events.

Updated Aug 17, 2026
One-click install
npx skills add https://github.com/renjianguo666/litecms --skill litestar-htmx-renjianguo666
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: litestar-htmx
Source: https://github.com/renjianguo666/litecms/tree/main/.agents/skills/litestar-htmx
Command: npx skills add https://github.com/renjianguo666/litecms --skill litestar-htmx-renjianguo666

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires litestar, litestar_htmx, and includes references (resource) components.

What problem does it solve? Building interactive web UIs with HTMX inside a Litestar application requires correctly wiring HTMXPlugin, returning partial HTML instead of full pages, and managing server-driven response headers like HX-Trigger and HX-Push-Url, which is error-prone without guidance. ## Core Features & Use Cases - HTMXRequest integration: Detect HTMX requests via headers and branch between full-page and partial responses using request.htmx properties. - Server-driven responses: Use TriggerEvent, PushUrl, Reswap, Retarget, HXLocation, and ClientRefresh to control client behavior from Python handlers. - Partial templates and OOB swaps: Render Jinja2 fragments and out-of-band updates, with optional client-side JSON templating via the hx-ext="litestar" extension. - Use Case: Build an items page where a form posts via hx-post, the server returns a TriggerEvent, and the item list refreshes automatically with an OOB notification update. ## Quick Start Ask the AI to create a Litestar app with HTMXPlugin registered and an HTMX-driven items page that returns Jinja partials and triggers a client event on create.

Frequently Asked Questions about litestar-htmx

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use HTMX with Litestar in Python?

Install litestar_htmx and register HTMXPlugin() on the Litestar app constructor. Handlers can then accept HTMXRequest to inspect HX-* headers and return Template responses rendering Jinja2 partial fragments for HTMX-targeted routes.

How do I trigger client-side events from a Litestar server response?

Return a TriggerEvent response object from litestar_htmx with an event name, optional params, and an after timing (receive, swap, or settle). It sets the HX-Trigger header so HTMX fires the event on the client.

Should I return JSON or HTML from HTMX endpoints in Litestar?

HTMX endpoints should return partial HTML fragments, since hx-swap expects HTML. Alternatively, use the hx-ext="litestar" extension with hx-swap="json" and ls-* template attributes to render JSON responses client-side.

Does HTMX work with Litestar CSRF protection?

Yes. Enable Litestar's CSRF middleware, expose the token in a meta tag, and forward it via the htmx:configRequest event listener so non-GET HTMX requests include the X-CSRF-Token header.

When should I use litestar-vite with an HTMX app?

Use litestar-vite in template mode when the app needs bundled JavaScript, CSS, or hot module replacement alongside HTMX. A plain HTMX setup with a CDN script tag works fine without Vite.