HTMX Attributes in a HTML

Go + HTMX + Tailwind — Create Beautiful Responsive Web Apps (?!) Without Javascript (sort of)

Yes, you read the title correct. There is a way to create a whole suite of Web Apps without you need to touch Javascript. No, I’m not crazy.

And the solution might be viable even for your next billion dollar startup ideas. It is so viable in fact, that it was mind boggling how convulted and difficult front end dev nowadays with React, Angular, and Vue.

What’s the secret?

The secret ingredient is actually only 1 thing: HTMX. HTMX is a tools that allows us to extend the functionality of a HTML and promotes Hypermedia Driven web development.

But what does HTMX does exactly? I will quote the first paragraph in their homepage:

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

…What? That’s it?

Yes, that’s it! but think again for a second. What makes a web app… a web app? What makes web app differs from the good old Static Webpages? The key difference between the two is basically 1 thing and 1 thing only: Responsive.

It reacts to user input quickly, it does not require you to change webpage to do simple things. Everything is in a beautiful modals, popups, and floating item that reacts to your behaviour.

HTMX offers such responsiveness by using several tricks that allows us to replace HTML element with server-sent response that also contains HTML.

Let see following’s example:

<script src="https://unpkg.com/htmx.org@1.9.4"></script>
  <!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
</button>

and in the backend (which is Go) we create simple router that returns HTML:

e := echo.New()
e.POST("/clicked", func(c echo.Context) error {
    return c.HTML(http.StatusOK, `
    <p>You Clicked Me!</p>
    `)
})

In action, it will look like this:

This might sound simple but anyone that has ever working in Web Front End development will swear that this is mindblowing.

And this is the basis of responsivity in HTMX. It allows us to replace existing element on a page with REST API response from the server. It introduce responsivity and reactivity to an old technology of Static Web Page.

Now to the Meat of the Matter

This will be a series of articles documenting all of my effort in learning how to create full responsive web apps using just Go + HTMX + Tailwind CSS. By the end of the series, we will be able to create something like this: A Blogging App that has realtime Markdown Renderring done in the Backend

In the next article, I will present the basic setup that was needed to create a HTMX + Go based web. It will introduce you to several HTMX attributes that corresponds to various functionality.

See you there!

Next Up

1. Setting up Go + HTMX : Create Responsive Web Pages. (Work in Progress)
2. Introducing Tailwind in a Server Side Rendered Web Apps. (Work in Progress)
3. Rendering Markdown without JavaScript. (Work in Progress)