Skip to content

Conversation

scriptogre
Copy link

@scriptogre scriptogre commented Aug 16, 2025

You can now use hx-select to select a portion of HTML from an SSE event to swap, just like you can with hx-get or hx-post.

Example:

Server Event:

data: <div id="message">Hello</div><div id="status">Online</div>

You can now select and swap just the #message div:

HTML:

<div sse-connect="/events" sse-swap="message" hx-select="#message">
<!-- This div will be updated with the content of #message -->
</div>

Htmx version: 2.0.6
Used extension(s) version(s): 2.2.2

Checklist

  • I have read the contribution guidelines
  • I ran the test suite locally (npm run test) and verified that it succeeded

The SSE extension swap function now reads the hx-select attribute
from the element and passes it to htmx.swap in the swapOptions.

This allows selecting a fragment of the HTML response from an SSE event,
making the extension more powerful and consistent with the rest of htmx.
It also helps prevent HierarchyRequestError when the SSE event returns
a full HTML document.
Copy link

netlify bot commented Aug 16, 2025

Deploy Preview for htmx-extensions canceled.

Name Link
🔨 Latest commit 6678d22
🔍 Latest deploy log https://app.netlify.com/projects/htmx-extensions/deploys/68a0eae5bf03e7000829d78a

@scriptogre scriptogre changed the title Add support for hx-select in SSE extension Add hx-select support for SSE swaps Aug 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant