Need an element gone? HTMXv4’s delete swap can remove it.

Think about login flows: expired auth can route to an “auth” panel, validation to a “fix this” panel, server errors to a “try later” panel. HTMX 4 makes this declarative.

hx-morph-skip keeps selected elements out of a morph. #HTMXv4

Form workflow in HTMX 4, valid input updates the main result. A typo triggers 422 and fills a validation panel. A server failure routes to a server error banner. One form, multiple outcomes.

HTMXv4 makes targeted, state-aware updates easier.

When a whole parent is refreshed, third-party widgets may not appreciate being rebuilt. Use morph exclusion or preservation to protect the parts of your page that carry their own state. #HTMXv4

hx-preserve helps keep an element’s state through an HTML swap. #HTMX

Need to remove an element after a server request? HTMX 4’s delete swap can remove the target from the page. Useful for list items, table rows, alerts, and dismissed banners.

Same card, same update, different result: an outerHTML swap reloads the embedded video, while outerMorph preserves playback as the heading moves below it. That’s state preservation in action. #HTMXv4

Send plain text, swap with textContent. #HTMXv4

Keep your map, chart, or editor untouched during an update. #HTMXv4

Morphing a parent can update all its children but what if one child should stay untouched? HTMX 4’s hx-morph-skip gives you a way to exclude an element from morphing.

Use swap-delete for dismissed alerts, banners, and rows. #HTMXv4

Updating a text field from the server? With HTMX 4’s textContent swap, the response can be just a plain string. No need to wrap simple text in a whole HTML fragment.

Update the page, not the playback. #HTMXv4

HTMX 4 makes error handling and multi-target UI updates declarative and fast.

HTMX 4 feels like a shift toward more expressive HTML: declarative status routing and multi-target updates reduce glue code and make the UI’s behavior visible at a glance.

Shopping cart flow: add item, bump badge, show toast, all from one response. #HTMXv4

The demo: click one button, main text updates, a new “New Message Received” row appears, and the notification badge increments. One request, coordinated UI updates. #HTMXv4

A single form can update success output and error output in different places.

HTMX 4 ships with a new default: error responses render into your target. During development, this is gold. When you deploy, you can still configure it to behave like v2.

DOM Morphing, Morph Exclusion, Special Morphs and Element Preservation. All from New HTMXv4. youtu.be/sjTKMhKOsmU

HTMX v4, Whats new and why you should care.

YouTube video by Draupner Data

youtu.be

Multi-target updates in HTMX 4: one response can update multiple parts of the page at once. Main content, messages list, and notification badge can all change from a single POST.

hx-status turns HTTP error descriptions into declarative UI routing rules. #htmx v4

HTMX 4 stops swallowing errors and shows them directly in your target.

HTMXv4 changes error handling in a big way: errors no longer vanish silently. Trigger a 400 and the message shows right in your target div. Faster debugging, tighter feedback loops.

Outliers reveal opportunities the averages hide. #FastHTML #YouTubeTool

Sick of exporting CSVs and wrestling spreadsheets? I rebuilt my YouTube niche tool in FastHTML, loading raw API data and sorting it with a click. First stop: clean, unsorted tables you can actually trust.

Gave the welcome page a background image

Long AI workflows, test runs, heavyweight queries. Offload them to background tasks and free the UI. Users stay in control while work cooks in the back, then get a clear signal when it is done. #fastHTML