Sure! Here's a Markdown cheatsheet for the key concepts and capabilities of htmx:

```markdown
# htmx Cheatsheet

## Getting Started
Include htmx in your HTML:
```html
<script src="https://unpkg.com/htmx.org"></script>
```

## Basic Attributes

### `hx-get`
Performs a GET request and swaps the response into the target element.
```html
<button hx-get="/path/to/resource" hx-target="#result">Load Data</button>
<div id="result"></div>
```

### `hx-post`
Performs a POST request.
```html
<form hx-post="/submit/form" hx-target="#result">
  <input type="text" name="name" />
  <button type="submit">Submit</button>
</form>
<div id="result"></div>
```

### `hx-push-url`
Updates the browser's URL bar using the History API.
```html
<button hx-get="/new/page" hx-push-url="true">Load Page</button>
```

## Content Swapping

### `hx-target`
Specifies the target element to update with the response.
```html
<div hx-get="/info" hx-target="#info-target">Click me</div>
<div id="info-target"></div>
```

### `hx-swap`
Defines how the response content is swapped into the target element.
- `innerHTML` (default)
- `outerHTML`
- `beforebegin`
- `afterbegin`
- `beforeend`
- `afterend`
- `delete`

```html
<div hx-get="/snippet" hx-swap="outerHTML">Replace me</div>
```

## Event Handling

### `hx-trigger`
Specifies the event that triggers the request.
```html
<button hx-get="/fetch" hx-trigger="click">Fetch Data</button>
```

### `hx-on`
Binds an event handler directly in the HTML.
```html
<div hx-get="/info" hx-on="mouseover: someFunction()">Hover over me</div>
```

## Additional Attributes

### `hx-include`
Includes additional elements' values in the request.
```html
<form hx-post="/search" hx-target="#results" hx-include="#additional-input">
  <input type="text" name="query" />
  <input type="text" id="additional-input" name="extra" />
  <button type="submit">Search</button>
</form>
<div id="results"></div>
```

### `hx-vals`
Includes additional parameters in the request.
```html
<button hx-post="/vote" hx-vals='{"item": "123"}'>Vote</button>
```

### `hx-headers`
Adds custom headers to the request.
```html
<button hx-get="/data" hx-headers='{"X-CSRFToken": "abc123"}'>Load Data</button>
```

## WebSockets and Server-Sent Events

### `hx-sse`
Handles Server-Sent Events.
```html
<div hx-sse="connect:/events">
  <p>Waiting for updates...</p>
</div>
```

### `hx-ws`
Handles WebSocket connections.
```html
<div hx-ws="connect:/socket">
  <p>Real-time data will appear here.</p>
</div>
```

## Example Usage

### Simple GET Request
```html
<button hx-get="/hello" hx-target="#greeting">Say Hello</button>
<div id="greeting"></div>
```

### Form Submission
```html
<form hx-post="/submit" hx-target="#response">
  <input type="text" name="username" />
  <button type="submit">Submit</button>
</form>
<div id="response"></div>
```

### Dynamic Content Swap
```html
<div hx-get="/content" hx-target="#dynamic-content" hx-swap="innerHTML">
  Load Content
</div>
<div id="dynamic-content"></div>
```

### Real-time Updates with SSE
```html
<div hx-sse="connect:/updates">
  <p>Waiting for updates...</p>
</div>
```

For more detailed information, visit the [htmx documentation](https://htmx.org/docs/).
```

This cheatsheet covers the basic attributes and features of htmx, providing a quick reference for common tasks and use cases.