prologic / HTMX Cheatsheet

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.