This is the most basic htmx example. We set up a route called /htmx/time that returns the current server time. Then, we have a button that can be clicked to load the route with hx-get.

It assumes a default trigger action of "click", and a default target to place the html return from the get into whichever div was clicked.

This is the exact same example as above, but we show that *any* element can be used as a hypermedia control. In this case, we are using a <div> instead of a <button>.

It assumes a default trigger action of "click", and a default target to place the html return from the get into whichever div was clicked.

This does exactly the same thing as the examples above. But here we explicitly set the hx-trigger, the hx-target, and the hx-swap method to the exact same as the defaults.

This is just to illustrate that htmx assumes certain default values. In this case, the hx-get on a div assumes a default trigger of click, a default target of this (the same div that is clicked), and a default swap method of innerHTML.

The next several examples will demonstrate what happens when you change these defaults.

We have now changed the hx-target so that we can send the html returned from hx-get to any element on the page. Use a css selector (in this case the id #hx-get-target) to set the target.

In this case, we set a small div under the clickable div, so when you click it, the target is filled with the html from the /htmx/time route.

We have now changed the hx-trigger so that we can activate it on a different user event.

In this case, we are using mouseenter to let the user trigger the hx-get when they hover over the div.

We have now changed the hx-swap away from the default of innerHTML to outerHTML.

This means that when we get our response, the html completely replaces the element (the div we clicked in this case) with the html from the server.

Again, we are using a css selector to set the target, but now we are targeting the element #some-notification-target, which is outside of our original example.

You can see when you click to load the server time, it is now placed in the notification target at the top right of the page.

WARNING: DOESN'T WORK!

Click to load, then try to enter data in the form to see what's wrong.

The reason the form doesn't work is because by default it is loaded into the innerHTML of the div you clicked. The problem is that the div you clicked then wraps the form, and the hx-get attribute on that div will continue to work as expected, and reload the form!

Now we should be able to load the form AND use it correctly.

The reason this works is because we are now loading the form to a separate element than the one that has the click trigger on it.

You can click the div again to *reload* the blank form from the server.

Again, we should be able to load the form AND use it correctly now.

The reason it works this time is that we have changed the hx-swap default from innerHTML (the default) to outerHTML.

hx-swap="outerHTML" will replace the entire target itself, rather than replace the content inside the div as the innerHTML default does.

Now, we are changing the default hx-trigger so that instead of "click", it will trigger the hx-get on "load".

The "load" trigger option is triggered when the page loads. This pattern is commonly called lazy loading. Because it happens immediately on load, you will likely not see the original text in the div.