htmx 4.0 is under construction — migration guide

<hx-partial>

View as Markdown Open this page as Markdown
For LLMs
llms.txt htmx overview for LLMs
llms-full.txt Complete htmx docs for LLMs

Target multiple elements from a single response

The <hx-partial> tag lets you update multiple elements from a single response, with explicit control over targeting and swap strategy.

Syntax

<hx-partial hx-target="#messages" hx-swap="beforeend">
    <div>New message</div>
</hx-partial>

<hx-partial hx-target="#count">
    <span>5</span>
</hx-partial>

Attributes

  • hx-target - CSS selector for where to place content
  • id - Shorthand alternative to hx-target. Targets the element with that ID (e.g. <hx-partial id="messages"> targets #messages)
  • hx-swap - Swap style (defaults to innerHTML)

Either hx-target or id is required. If both are present, hx-target takes precedence.

Responses Without Main Content

When a response contains only <hx-partial> tags (no main content), the main target is left untouched. See Multi-Target Updates for details.

Alternative Syntax

Template languages that strip unknown tags can use the equivalent <template> form:

<template hx type="partial" hx-target="#messages" hx-swap="beforeend">
    <div>New message</div>
</template>

See Also