### Example of outerMorph Swap

Source: https://four.htmx.org/docs/full.md

Demonstrates how 'outerMorph' can be used to swap content while preserving element states like video playback. The example shows an HTML structure and a button that triggers a swap, with the response content designed to be morphed into the existing DOM.

```html
<div id="video-elt">
    <h1>Title</h1>
    <iframe id="video" width="791" height="445" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>
<button hx-get="/swap"
        hx-target="#video-elt"
        hx-swap="outerMorph">
    Swap Header To Bottom
</button>
```

```html
<div id="video-elt">
    <iframe id="video" width="791" height="445" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
    <h1>Title</h1>
</div>
```

--------------------------------

### Install htmx using npm

Source: https://four.htmx.org/docs/get-started/installation.md

Install the htmx.org package using npm. This command installs version 4.0.0-beta4.

```sh
npm install htmx.org@4.0.0-beta4
```

--------------------------------

### HTML Content Example

Source: https://four.htmx.org/docs/features/css-transitions.md

This is the initial HTML content of a div.

```html
<div id="div1">Original Content</div>
```

--------------------------------

### Server Response for hx-get

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

The server should return HTML content to be swapped into the target element. This example shows a simple HTML response.

```html
<div>You have 3 new messages</div>
```

--------------------------------

### Progressive Enhancement for Active Search

Source: https://four.htmx.org/docs/features/boosting.md

This example shows how to make an active search input progressively enhanced by wrapping it in a form. JavaScript-enabled clients get AJAX search, while non-JavaScript clients can still submit the form.

```html
<form action="/search" method="POST">
    <input class="form-control" type="search"
           name="search" placeholder="Begin typing to search users..."
           hx-post="/search"
           hx-trigger="keyup changed delay:500ms, search"
           hx-target="#search-results"
           hx-indicator=".htmx-indicator">
</form>
```

--------------------------------

### Customizing Out-of-Band Swap Style

Source: https://four.htmx.org/docs/core-concepts/multi-target-updates.md

Specify a different swap style for out-of-band updates by providing the swap style after `hx-swap-oob`. This example appends content instead of replacing it.

```html
<div id="notifications" hx-swap-oob="beforeend">
    <span>New notification</span>
</div>
```

--------------------------------

### HX-Location Response Header Examples

Source: https://four.htmx.org/docs/core-concepts/hcon.md

The server can return HCON or JSON in the HX-Location header to control client-side navigation. Examples show basic path and configured navigation.

```HTTP Response Header
HX-Location: /new-page
HX-Location: path:"/new-page" push:"true"
HX-Location: {"path":"/new-page","push":"true"}
```

--------------------------------

### HCON JSON Fallback Example

Source: https://four.htmx.org/docs/core-concepts/hcon.md

When a value starts with '{', it's parsed as JSON instead of HCON. This allows server-side composition of configuration.

```HTML
<!-- server renders this -->
<meta name="htmx-config" content='{"defaultSwap":"outerHTML","transitions":true}'>

<!-- or on an element -->
<button hx-get="/api" hx-config='{"credentials":"include","timeout":5000}'>
```

--------------------------------

### Load Polling with 'load' Trigger and Delay

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

Achieve polling using a 'load' trigger with a delay. This example polls '/messages' every second and replaces the element with the response.

```html
<div hx-get="/messages"
     hx-trigger="load delay:1s"
     hx-swap="outerHTML">
</div>
```

--------------------------------

### hx-swap morph and text content examples

Source: https://four.htmx.org/docs/get-started/migration.md

Demonstrates new hx-swap styles for morphing content and setting text content. 'innerMorph' and 'outerMorph' use the idiomorph algorithm for smoother UI updates, while 'textContent' updates only the text.

```html
<div hx-get="/data" hx-swap="innerMorph">...</div>
<div hx-get="/data" hx-swap="outerMorph">...</div>
<div hx-get="/text" hx-swap="textContent"></div>
<div hx-get="/remove" hx-swap="delete"></div>
```

--------------------------------

### hx-swap Modifiers with HCON

Source: https://four.htmx.org/docs/core-concepts/hcon.md

The swap style is followed by modifiers parsed as HCON. This example shows setting swap, settle, and scroll behavior.

```HTML
<div hx-get="/update" hx-swap="innerHTML swap:200ms settle:100ms scroll:top">
<div hx-get="/update" hx-swap="outerHTML transition:true ignoreTitle:true">
```

--------------------------------

### Duplicate hx-confirm Attributes

Source: https://four.htmx.org/docs/features/attribute-inheritance.md

This example shows redundant hx-confirm attributes on multiple buttons. Use attribute inheritance to avoid this duplication.

```html
<button hx-delete="/account" hx-confirm="Are you sure?">
    Delete My Account
</button>
<button hx-put="/account" hx-confirm="Are you sure?">
    Update My Account
</button>
```

--------------------------------

### Set Content Security Policy via HTTP Header

Source: https://four.htmx.org/docs/security/best-practices.md

Configure a Content Security Policy using an HTTP header to enhance browser security. This example sets the default source to the same origin and allows scripts from the same origin with a specific nonce.

```http
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-<nonce>'
```

--------------------------------

### Custom CSS for Request Indicators

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

Customize the visibility of request indicators using CSS. This example uses 'display: none' and 'display: inline' to show/hide the indicator.

```css
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-request.htmx-indicator {
    display: inline;
}
```

--------------------------------

### Conditional Swapping for 404 and 500 Responses

Source: https://four.htmx.org/docs/full.md

Use `hx-status` to define specific swap behaviors for different HTTP error codes. This example shows handling 404 with 'none' and 500 by targeting an error container.

```html
<button hx-get="/data"
        hx-status:404="none"
        hx-status:500="target:#error-container">
    Load Data
</button>
```

--------------------------------

### HCON Value Types Example

Source: https://four.htmx.org/docs/core-concepts/hcon.md

Demonstrates parsing of boolean, integer, quoted string, and bare-word string values in HCON. Unspecified values default to true.

```HTML
<!-- booleans -->
<button hx-get="/api" hx-config="validate">          <!-- validate: true -->
<button hx-get="/api" hx-config="validate:false">    <!-- validate: false -->

<!-- numbers -->
<button hx-get="/api" hx-config="timeout:5000">

<!-- strings — quotes needed when value contains spaces or special chars -->
<button hx-get="/api" hx-config='credentials:"include"'>
<button hx-get="/api" hx-config="mode:'cors'">
```

--------------------------------

### Explicitly Targeting Request Indicators with 'hx-indicator'

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

Specify which element should receive the 'htmx-request' class for indicator management. This example targets an image by its ID.

```html
<div>
    <button hx-get="/click" hx-indicator="#indicator">
        Click Me!
    </button>
    <img id="indicator" class="htmx-indicator" src="/spinner.gif" alt="Loading..."/>
</div>
```

--------------------------------

### Import htmx in JavaScript (Default)

Source: https://four.htmx.org/docs/get-started/installation.md

Import the htmx library into your JavaScript project after installing it via npm. This makes htmx globally available.

```javascript
import 'htmx.org';
```

--------------------------------

### Load Data on Click with hx-get

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

Use the `hx-get` attribute on an element to trigger an AJAX GET request when the element is clicked. The response HTML will replace the element's content.

```html
<button hx-get="/messages">
    Load Messages
</button>
```

--------------------------------

### hx-status for status code specific swaps

Source: https://four.htmx.org/docs/get-started/migration.md

Configure different swap behaviors based on HTTP status codes using the hx-status attribute. This example shows how to handle validation errors (422) and server errors (5xx) differently.

```html
<form hx-post="/save"
      hx-status:422="swap:innerHTML target:#errors select:#validation-errors"
      hx-status:5xx="swap:none push:false">
    <!-- form fields -->
</form>
```

--------------------------------

### Displaying Request Indicators with 'htmx-indicator' Class

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

Show users that an AJAX request is in progress by using the 'htmx-indicator' class. This example reveals a spinner image on button click.

```html
<button hx-get="/click">
    Click Me!
    <img class="htmx-indicator" src="/spinner.gif" alt="Loading...">
</button>
```

--------------------------------

### Active Search with Input Delay and Enter Key Trigger

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

This example demonstrates advanced trigger modifiers: `delay:500ms` to wait 500ms after input before sending a request, and `keyup[key=='Enter']` to trigger on Enter key press. Results are targeted to `#search-results`.

```html
<input type="text"
       name="q"
       placeholder="Search..."
       hx-get="/search"
       hx-trigger="input delay:500ms, keyup[key=='Enter']"
       hx-target="#search-results">
<div id="search-results"></div>
```

--------------------------------

### Using Partials for Explicit Targeting

Source: https://four.htmx.org/docs/core-concepts/multi-target-updates.md

Wrap content in `<hx-partial>` tags and use `hx-target` and `hx-swap` to explicitly define where the content should be placed. This provides granular control over updates.

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

<hx-partial hx-target="#notifications">
    <span class="badge">5</span>
</hx-partial>

<form id="my-form">
    <!-- Main form content -->
</form>
```

--------------------------------

### hx-trigger Modifiers Example

Source: https://four.htmx.org/docs/core-concepts/hcon.md

Event names in hx-trigger are followed by modifiers parsed as HCON. This example shows delay and throttle.

```HTML
<input hx-get="/search" hx-trigger="keyup delay:300ms">
<button hx-post="/save" hx-trigger="click throttle:1s">
<div hx-get="/poll" hx-trigger="every 2s">
<form hx-post="/submit" hx-trigger="submit once">
```

--------------------------------

### Load Profile Data on Click

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

A common pattern is to use `hx-get` to load user-specific data when a button is clicked.

```html
<button hx-get="/profile">View Profile</button>
```

--------------------------------

### Preventing Triggers with Shift-Click Filter

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

Use trigger filters to conditionally prevent htmx requests. This example triggers only on a Shift-Click event.

```html
<div hx-get="/shift_clicked" hx-trigger="click[shiftKey]">
    Shift Click Me
</div>
```

--------------------------------

### Load htmx 2-compat Extension

Source: https://four.htmx.org/docs/get-started/migration.md

Include the htmx-2-compat extension to restore implicit inheritance, old event names, and previous error-swapping defaults.

```html
<script src="/path/to/htmx.js"></script>
<script src="/path/to/ext/htmx-2-compat.js"></script>
```

--------------------------------

### Run htmx Upgrade Checker

Source: https://four.htmx.org/docs/get-started/migration.md

Use the command-line tool to scan project files for htmx 2.x code that requires updating for htmx 4.x compatibility.

```bash
npx htmx.org@next upgrade-check -- ./path/to/project/root
```

```bash
npx htmx.org@next upgrade-check --ext .vue ./path/to/project/root
```

--------------------------------

### Load htmx and an Extension with a Bundler

Source: https://four.htmx.org/docs/features/extensions.md

Import htmx and the desired extension when using a JavaScript bundler.

```javascript
import 'htmx.org';
import 'htmx.org/dist/ext/hx-sse';

```

--------------------------------

### Initialize htmx in Shadow DOM

Source: https://four.htmx.org/docs/features/web-components.md

Call `htmx.process` on the shadow root after creating it to enable htmx functionality within the component.

```javascript
customElements.define('my-counter', class extends HTMLElement {
    connectedCallback() {
        const shadow = this.attachShadow({mode: 'open'})
        shadow.innerHTML = "
          <button hx-post=\"/increment\" hx-target=\"#count\">+1</button>\n          <div id=\"count\">0</div>
        "
        htmx.process(shadow) // Initialize htmx for this shadow DOM
    }
})

```

--------------------------------

### Custom Swap Style with handle_swap hook

Source: https://four.htmx.org/docs/get-started/migration.md

Illustrates how to implement a custom swap style using the special handle_swap hook, which receives positional parameters.

```javascript
handle_swap: (swapStyle, target, fragment, swapSpec) => {
    if (swapStyle === 'my-swap') {
        target.appendChild(fragment);
        return true;
    }
    return false;
}
```

--------------------------------

### Attribute Inheritance with :append

Source: https://four.htmx.org/docs/core-concepts/hcon.md

The :append composition feature merges child attribute values with inherited parent values by concatenation. This example appends headers.

```HTML
<div hx-headers:inherited='{"X-Tenant": "acme"}'>
  <button hx-get="/api"
          hx-headers:append='{"X-Request-ID": "123"}'>
    <!-- sends both headers -->
  </button>
</div>
```

--------------------------------

### HCON Dot-Notation for Nested Keys

Source: https://four.htmx.org/docs/core-concepts/hcon.md

Use dot-notation to set nested object properties within HCON. This example configures SSE reconnect behavior.

```HTML
<meta name="htmx-config" content="sse.reconnect:true sse.reconnectDelay:1000">
```

--------------------------------

### Set htmx Target Element

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

Use the `hx-target` attribute to specify which element should receive the response from an htmx request. This example targets an element with the ID `results`.

```html
<button hx-get="..."
        hx-target="#results">
  Load Results
</button>

<div id="results">
    <!-- Response goes here -->
</div>
```

--------------------------------

### hx-config for Per-Element Fetch Options

Source: https://four.htmx.org/docs/core-concepts/hcon.md

Use hx-config to set fetch options like timeout and credentials for individual elements. Supports HCON and JSON.

```HTML
<button hx-get="/slow" hx-config="timeout:30000">
<button hx-get="https://api.example.com/data" hx-config='credentials:"include" mode:"cors"'>
```

--------------------------------

### Implementing Server Polling with 'every' Syntax

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

Implement polling by periodically issuing requests to the server. This snippet polls '/news' every 2 seconds.

```html
<div hx-get="/news" hx-trigger="every 2s"></div>
```

--------------------------------

### hx-swap Aliases for Swap Styles

Source: https://four.htmx.org/docs/full.md

Provides new, shorter aliases for existing hx-swap styles for convenience.

```html
<div hx-swap="before"></div>
```

```html
<div hx-swap="after"></div>
```

```html
<div hx-swap="prepend"></div>
```

```html
<div hx-swap="append"></div>
```

--------------------------------

### Disabling Title Update with Swap Option

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

This example shows how to use the 'ignoreTitle:true' modifier with hx-swap to prevent htmx from updating the document title with the one from the response.

```html
<button hx-post="/like" hx-swap="outerHTML ignoreTitle:true">Like</button>
```

--------------------------------

### Selecting Specific Elements for Out-of-Band Swaps

Source: https://four.htmx.org/docs/core-concepts/multi-target-updates.md

Use `hx-select-oob` on the triggering element to specify which elements from the response should be swapped out-of-band. This allows for OOB swaps even if the response elements lack `hx-swap-oob` attributes.

```html
<button hx-post="/submit"
        hx-target="#form"
        hx-select-oob="#message, #counter">
    Submit
</button>
```

--------------------------------

### Self-host htmx (Minified)

Source: https://four.htmx.org/docs/get-started/installation.md

After downloading htmx.min.js and saving it to your project, include it in your HTML's head tag using a relative path.

```html
<script src="/js/htmx.min.js"></script>
```

--------------------------------

### Include Extensions in htmx 4

Source: https://four.htmx.org/docs/get-started/migration.md

Demonstrates how to load extensions in htmx 4 by including their script files directly.

```html
<script src="/path/to/htmx.js"></script>
<script src="/path/to/ext/my-extension.js"></script>
```

--------------------------------

### Trigger Request on Mouse Enter

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

Use the `hx-trigger` attribute to specify custom events that initiate an AJAX request. This example triggers a POST request when the mouse enters the div.

```html
<div hx-post="/mouse_entered" hx-trigger="mouseenter">
    Mouse Trap
</div>
```

--------------------------------

### Initialize 3rd Party Library with htmx.onLoad

Source: https://four.htmx.org/docs/core-concepts/client-scripting.md

The `htmx.onLoad` function provides a clean way to initialize third-party libraries on elements processed by htmx, similar to using `htmx:after:process`.

```javascript
htmx.onLoad(function (target) {
    myJavascriptLib.init(target);
});
```

--------------------------------

### Migrate Extension Registration and Callbacks

Source: https://four.htmx.org/docs/get-started/migration.md

Shows the conversion from htmx 2.x's defineExtension with onEvent to htmx 4's registerExtension with specific event hooks.

```javascript
htmx.defineExtension('my-ext', {
    onEvent: function(name, evt) {
        if (name === 'htmx:beforeRequest') { /* ... */ }
    }
});
```

```javascript
htmx.registerExtension('my-ext', {
    htmx_before_request: (elt, detail) => { /* ... */ }
});
```

--------------------------------

### Basic HTML Anchor Tag

Source: https://four.htmx.org/docs/core-concepts/mental-model.md

A standard HTML anchor tag used to navigate to a URL. Clicking this link triggers a GET request and loads the response into the browser window.

```html
<a href="/blog">Blog</a>
```

--------------------------------

### Load htmx and an Extension via Script Tags

Source: https://four.htmx.org/docs/features/extensions.md

Include the htmx core library and a specific extension script after each other in your HTML.

```html
<script src="https://cdn.jsdelivr.net/npm/htmx.org@next/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@next/dist/ext/hx-sse.js"></script>
```

--------------------------------

### Using :inherited Modifier for Attribute Inheritance

Source: https://four.htmx.org/docs/features/attribute-inheritance.md

This example demonstrates hoisting the hx-confirm attribute to a parent div using the :inherited modifier. All htmx elements within the div will now inherit this attribute.

```html
<div hx-confirm:inherited="Are you sure?">
    <button hx-delete="/account">
        Delete My Account
    </button>
    <button hx-put="/account">
        Update My Account
    </button>
</div>
```

--------------------------------

### Enable View Transitions for Boosted Elements

Source: https://four.htmx.org/docs/full.md

Enable view transitions for boosted elements by setting hx-boost to 'transition:true'.

```html
<a href="/" hx-boost="transition:true">Boosted Link</a>
```

--------------------------------

### hx-swap scroll modifiers: htmx 4 syntax

Source: https://four.htmx.org/docs/get-started/migration.md

Use separate keys for 'show' and 'scroll' modifiers in hx-swap for htmx 4. This example demonstrates the correct syntax for targeting specific positions.

```html
<div hx-swap="innerHTML show:top showTarget:#other"></div>
<div hx-swap="innerHTML scroll:bottom scrollTarget:#other"></div>
```

--------------------------------

### Configure CSP for Connect Source

Source: https://four.htmx.org/docs/security/best-practices.md

Set the `connect-src` directive in a Content Security Policy meta tag to explicitly allow connections to specific origins, such as an API on a different subdomain, while maintaining security.

```html
<meta http-equiv="Content-Security-Policy"
      content="connect-src 'self' https://api.example.com">
```

--------------------------------

### Reset Form After Request

Source: https://four.htmx.org/docs/core-concepts/client-scripting.md

This example demonstrates how to reset a form after an HTMX request has successfully completed. It uses the `htmx:after:request` event and the `find()` helper to locate and reset the closest form element.

```html
<button hx-post="/example"
        hx-on:htmx:after:request="find('closest form').reset()">
    Post Me!
</button>
```

--------------------------------

### HTTP Methods with htmx Attributes

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

htmx provides specific attributes for different HTTP methods (GET, POST, PUT, PATCH, DELETE) to control the request type. Each attribute includes the target URL.

```html
<button hx-get="/users">Load Users</button>
<button hx-post="/users">Create User</button>
<button hx-put="/users/1">Update User</button>
<button hx-patch="/users/1">Patch User</button>
<button hx-delete="/users/1">Delete User</button>
```

--------------------------------

### HTML Structure for Morph Swap

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

This HTML demonstrates a structure with a video element and a button that triggers an outerMorph swap. It's used to show how morphing preserves video playback.

```html
<div id="video-elt">
    <h1>Title</h1>
    <iframe id="video" width="791" height="445" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>
<button hx-get="/swap"
        hx-target="#video-elt"
        hx-swap="outerMorph">
    Swap Header To Bottom
</button>
```

--------------------------------

### Form Submission with Status-Code Specific Error Handling

Source: https://four.htmx.org/docs/full.md

Configure form submissions to direct different error responses to specific target elements. This example handles 422, 500, and 503 status codes distinctly.

```html
<form hx-post="/submit"
      hx-target="#result"
      hx-status:422="target:#validation-errors"
      hx-status:500="target:#server-error"
      hx-status:503="none">
    <input name="email">
    <button type="submit">Submit</button>
</form>

<div id="result"></div>
<div id="validation-errors"></div>
<div id="server-error"></div>
```

--------------------------------

### htmx Button for Dynamic Updates

Source: https://four.htmx.org/docs/core-concepts/mental-model.md

An example of an htmx-enhanced button that triggers a POST request on click and swaps the target element's outer HTML with the response. This demonstrates htmx's generalization of HTML hypermedia controls.

```html
<button hx-post="/clicked"
        hx-trigger="click"
        hx-target="#output"
        hx-swap="outerHTML">
    Click Me
</button>
<output id="output"></output>
```

--------------------------------

### Server Response with HTML Content

Source: https://four.htmx.org/docs/core-concepts/hypermedia-controls.md

The server should respond with standard HTML content. htmx will then use this HTML to update the DOM.

```http
HTTP/1.1 200 OK
Content-Type: text/html

<div>You have 3 new messages</div>
```

--------------------------------

### HTMX Configuration with JSON Fallback

Source: https://four.htmx.org/docs/full.md

Configure HTMX globally or per-element using JSON strings. This allows server-side composition of configurations.

```html
<meta name="htmx-config" content='{"defaultSwap":"outerHTML","transitions":true}'>
```

```html
<button hx-get="/api" hx-config='{"credentials":"include","timeout":5000}'>
```

--------------------------------

### Enable View Transitions Per Swap

Source: https://four.htmx.org/docs/full.md

Enable view transitions for a specific swap by including the 'transition:true' property in the hx-swap attribute.

```html
<button hx-swap="outerHTML transition:true">Click Me</button>
```

--------------------------------

### SortableJS Integration Example

Source: https://four.htmx.org/docs/core-concepts/client-scripting.md

This HTML structure is used in conjunction with SortableJS and HTMX to enable drag-and-drop reordering of items. The `hx-trigger="end"` attribute on the form ensures that an HTMX POST request is sent when the sorting action ends.

```html
<form class="sortable" hx-post="/items" hx-trigger="end">
    <div class="htmx-indicator">Updating...</div>
    <div><input type='hidden' name='item' value='1'/>Item 1</div>
    <div><input type='hidden' name='item' value='2'/>Item 2</div>
    <div><input type='hidden' name='item' value='2'/>Item 3</div>
</form>
```

--------------------------------

### Migrate getSelectors to htmx_after_init hook

Source: https://four.htmx.org/docs/get-started/migration.md

Demonstrates replacing the htmx 2.x getSelectors callback with the htmx 4 htmx_after_init hook for checking attributes.

```javascript
// htmx 2.x
getSelectors: function() {
    return ['[my-custom-attr]'];
},
onEvent: function(name, evt) {
    if (name === 'htmx:afterProcessNode') {
        initializeCustomBehavior(evt.target);
    }
}
```

```javascript
// htmx 4
htmx_after_init: (elt) => {
    if (api.attributeValue(elt, 'my-custom-attr')) {
        initializeCustomBehavior(elt);
    }
}
```

--------------------------------

### Target Multiple Elements with hx-partial

Source: https://four.htmx.org/docs/get-started/migration.md

Use `<hx-partial>` to target multiple elements with explicit control over targeting and swap strategy. Each instance specifies its own `hx-target` and `hx-swap`.

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

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

--------------------------------

### New hx-swap Styles: Morph, TextContent, Delete

Source: https://four.htmx.org/docs/full.md

Introduces morph swaps for state preservation, textContent for plain text updates, and delete for element removal.

```html
<div hx-get="/data" hx-swap="innerMorph">...</div>
```

```html
<div hx-get="/data" hx-swap="outerMorph">...</div>
```

```html
<div hx-get="/text" hx-swap="textContent">...</div>
```

```html
<div hx-get="/remove" hx-swap="delete">...</div>
```

--------------------------------

### Initialize htmx in Component Without Shadow DOM

Source: https://four.htmx.org/docs/features/web-components.md

Call `htmx.process` on the component itself if it does not use a shadow DOM.

```javascript
customElements.define('simple-widget', class extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `Load`
        htmx.process(this)
    }
})

```

--------------------------------

### Referencing the Window Object with 'window'

Source: https://four.htmx.org/docs/features/extended-selectors.md

Use the 'window' keyword to reference the window object. This is primarily used with window events.

```html
<div hx-trigger="scroll from:window">...</div>
```

--------------------------------

### Enable View Transitions

Source: https://four.htmx.org/docs/get-started/migration.md

Enable View Transitions API support by setting `htmx.config.transitions` to true. This feature is disabled by default.

```javascript
htmx.config.transitions = true;
```

--------------------------------

### Alternative Partial Syntax with <template>

Source: https://four.htmx.org/docs/core-concepts/multi-target-updates.md

For template languages that might strip unknown tags, use the equivalent `<template>` form for partials. htmx converts `<hx-partial>` to this form internally.

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

--------------------------------

### Migrate init callback to htmx 4

Source: https://four.htmx.org/docs/get-started/migration.md

Converts the htmx 2.x init callback, which returned a value, to the htmx 4 init hook that stores the internalAPI reference.

```javascript
// htmx 2.x
init: function(api) {
    return null;
}
```

```javascript
// htmx 4
init: (internalAPI) => {
    api = internalAPI;
}
```

--------------------------------

### Include Additional Parameters with hx-include

Source: https://four.htmx.org/docs/full.md

Include values from other elements in the request by using the hx-include attribute with a CSS selector.

```html
<div hx-include="#my-element">...</div>
```

--------------------------------

### Referencing the Entire Document with 'document'

Source: https://four.htmx.org/docs/features/extended-selectors.md

Use the 'document' keyword to reference the entire document. This is primarily used with event triggers.

```html
<div hx-trigger="click from:document">...</div>
```

--------------------------------

### Include htmax bundle

Source: https://four.htmx.org/docs/get-started/installation.md

Include the htmax.min.js script to use htmx along with its most popular extensions bundled together. Extensions are available automatically.

```html
<script src="/js/htmax.min.js"></script>
```

--------------------------------

### Basic hx-boost on a div

Source: https://four.htmx.org/docs/features/boosting.md

This snippet demonstrates how to enable hx-boost on a container element, causing all anchor tags within it to perform AJAX requests.

```html
<div hx-boost:inherited="true">
    <a href="/blog">Blog</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</div>
```

--------------------------------

### Synchronized Form and Input with hx-sync

Source: https://four.htmx.org/docs/features/synchronization.md

This HTML shows how to use hx-sync to synchronize a form submission with an input's validation request. The 'closest form' sync on the input ensures its request is aborted if the form is submitted, while 'this:replace' on the form allows it to supersede the input's request.

```html
<form hx-post="/store" hx-sync="this:replace">
    <input id="title" name="title" type="text"
           hx-post="/validate"
           hx-trigger="change"
           hx-sync="closest form">
    <button type="submit">Submit</button>
</form>
```