Last active 1719065616

Cheat Sheet for HTMX (https://htmx.org) -- The Hypermedia system

prologic revised this gist 1719065616. Go to revision

1 file changed, 152 insertions

htmx.md(file created)

@@ -0,0 +1,152 @@
1 + Sure! Here's a Markdown cheatsheet for the key concepts and capabilities of htmx:
2 +
3 + ```markdown
4 + # htmx Cheatsheet
5 +
6 + ## Getting Started
7 + Include htmx in your HTML:
8 + ```html
9 + <script src="https://unpkg.com/htmx.org"></script>
10 + ```
11 +
12 + ## Basic Attributes
13 +
14 + ### `hx-get`
15 + Performs a GET request and swaps the response into the target element.
16 + ```html
17 + <button hx-get="/path/to/resource" hx-target="#result">Load Data</button>
18 + <div id="result"></div>
19 + ```
20 +
21 + ### `hx-post`
22 + Performs a POST request.
23 + ```html
24 + <form hx-post="/submit/form" hx-target="#result">
25 + <input type="text" name="name" />
26 + <button type="submit">Submit</button>
27 + </form>
28 + <div id="result"></div>
29 + ```
30 +
31 + ### `hx-push-url`
32 + Updates the browser's URL bar using the History API.
33 + ```html
34 + <button hx-get="/new/page" hx-push-url="true">Load Page</button>
35 + ```
36 +
37 + ## Content Swapping
38 +
39 + ### `hx-target`
40 + Specifies the target element to update with the response.
41 + ```html
42 + <div hx-get="/info" hx-target="#info-target">Click me</div>
43 + <div id="info-target"></div>
44 + ```
45 +
46 + ### `hx-swap`
47 + Defines how the response content is swapped into the target element.
48 + - `innerHTML` (default)
49 + - `outerHTML`
50 + - `beforebegin`
51 + - `afterbegin`
52 + - `beforeend`
53 + - `afterend`
54 + - `delete`
55 +
56 + ```html
57 + <div hx-get="/snippet" hx-swap="outerHTML">Replace me</div>
58 + ```
59 +
60 + ## Event Handling
61 +
62 + ### `hx-trigger`
63 + Specifies the event that triggers the request.
64 + ```html
65 + <button hx-get="/fetch" hx-trigger="click">Fetch Data</button>
66 + ```
67 +
68 + ### `hx-on`
69 + Binds an event handler directly in the HTML.
70 + ```html
71 + <div hx-get="/info" hx-on="mouseover: someFunction()">Hover over me</div>
72 + ```
73 +
74 + ## Additional Attributes
75 +
76 + ### `hx-include`
77 + Includes additional elements' values in the request.
78 + ```html
79 + <form hx-post="/search" hx-target="#results" hx-include="#additional-input">
80 + <input type="text" name="query" />
81 + <input type="text" id="additional-input" name="extra" />
82 + <button type="submit">Search</button>
83 + </form>
84 + <div id="results"></div>
85 + ```
86 +
87 + ### `hx-vals`
88 + Includes additional parameters in the request.
89 + ```html
90 + <button hx-post="/vote" hx-vals='{"item": "123"}'>Vote</button>
91 + ```
92 +
93 + ### `hx-headers`
94 + Adds custom headers to the request.
95 + ```html
96 + <button hx-get="/data" hx-headers='{"X-CSRFToken": "abc123"}'>Load Data</button>
97 + ```
98 +
99 + ## WebSockets and Server-Sent Events
100 +
101 + ### `hx-sse`
102 + Handles Server-Sent Events.
103 + ```html
104 + <div hx-sse="connect:/events">
105 + <p>Waiting for updates...</p>
106 + </div>
107 + ```
108 +
109 + ### `hx-ws`
110 + Handles WebSocket connections.
111 + ```html
112 + <div hx-ws="connect:/socket">
113 + <p>Real-time data will appear here.</p>
114 + </div>
115 + ```
116 +
117 + ## Example Usage
118 +
119 + ### Simple GET Request
120 + ```html
121 + <button hx-get="/hello" hx-target="#greeting">Say Hello</button>
122 + <div id="greeting"></div>
123 + ```
124 +
125 + ### Form Submission
126 + ```html
127 + <form hx-post="/submit" hx-target="#response">
128 + <input type="text" name="username" />
129 + <button type="submit">Submit</button>
130 + </form>
131 + <div id="response"></div>
132 + ```
133 +
134 + ### Dynamic Content Swap
135 + ```html
136 + <div hx-get="/content" hx-target="#dynamic-content" hx-swap="innerHTML">
137 + Load Content
138 + </div>
139 + <div id="dynamic-content"></div>
140 + ```
141 +
142 + ### Real-time Updates with SSE
143 + ```html
144 + <div hx-sse="connect:/updates">
145 + <p>Waiting for updates...</p>
146 + </div>
147 + ```
148 +
149 + For more detailed information, visit the [htmx documentation](https://htmx.org/docs/).
150 + ```
151 +
152 + This cheatsheet covers the basic attributes and features of htmx, providing a quick reference for common tasks and use cases.
Newer Older

Powered by Opengist Load: 10ms