|Author||Jef Meijvis||Publish date||21/08/2023|
|Title||Getting started with HTMX||Id||18|
|Source||018-getting-started-with-htmx.md||Render timestamp||Dec 06, 2023, 06:08:31 AM (GMT+1)|
|Title||Getting started with HTMX|
|Render timestamp||Dec 06, 2023, 06:08:31 AM (GMT+1)|
Share this post:
All aboard the hypetrain because a new frontend framework just dropped!
Image: HTMX Logo
Consider the following index.html file, which is served to the client. It contains a script tag which downloads the HTMX library from UNPKG.
Next up is a button tag, which includes 2 attributes that are specific to HTMX:
At the backend we need an api that returns html. Multiple backend technologies are possible, but for the sake of demonstration I've set up a Node Express REST API. The API has a single endpoint that accepts a POST request, and returns the button HTML again, but with an updated counter.
Each time the user presses the button, a counter is updated and the new button tag is returned. This is a minimal example, as many more attributes are available. The HTMX example page showcases a lot of UI and UX patterns ands their implementation with UI/UX.
HTMX is a new library that goes back to the old approach of rendering HTML on the server. While I've never tried to create an entire web application using HTMX, it sure does offer an interesting perspective on front-end technologies!