htmx:before:settle

View as MarkdownOpen this page as Markdown

For LLMs

llms.txthtmx overview for LLMs

llms-full.txtComplete htmx docs for LLMs

Fires after DOM insertion, before settle tasks

On this page

The htmx:before:settle event fires after new content is inserted into the DOM but before CSS transitions are applied.

When It Fires

After the swap completes, right before htmx runs the settle phase (which applies CSS transitions and removes old attributes).

Event Detail

task - The swap task being settled
newContent - Array of newly inserted nodes, which can include text nodes
settleTasks - Array of pending settle callbacks (e.g. CSS transition steps)

Example


htmx.on('htmx:before:settle', (evt) => {
  console.log('About to settle', evt.detail.newContent.length, 'node(s)');
  // Modify elements before transitions run
});