Golang + HTMX - Creating a Go webserver / HTMX Integration / Template Fragments

Playlist ▶️: • Go Programming
In this video, we'll explore how to integrate HTMX with the Go programming language on the server.
We'll cover:
- how to setup a webserver with the Go net/http package
- how to define routes and handlers with the HandleFunc function
- how to return HTML templates with the html/template package
- using HTMX to submit form data to the server
- swapping HTML responses into the document from our Golang handlers
- using template fragments to return blocks of HTML from a parent template
Final code can be found on this Github repository:
github.com/bugbytes-io/htmx-g...
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugbytes
Playlist ▶️:
• Go Programming
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
01:32 Creating a web server in Golang
03:28 Defining server URL and handler function with http.HandleFunc
06:31 Rendering template from Golang functions
09:40 Adding Context Data to templates
11:21 Displaying server data in templates
13:44 Styling list with Bootstrap 5
15:34 Submitting form with HTMX hx-post attribute
19:44 Extract Submitted Data from POST request in handler function
21:03 Returning HTML from Golang handler function
24:03 Using hx-target to swap content into targeted DOM element
26:51 Displaying feedback during request with hx-indicator
30:37 Template Fragments in Golang
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/posts/
👾 Github: github.com/bugbytes-io/htmx-g...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Install Go: go.dev/doc/install
Go ‘Hello World’: gobyexample.com/hello-world
Go net/http package: pkg.go.dev/net/http
Go html/template package: pkg.go.dev/html/template
Go templates: golangforall.com/en/post/temp...
HTMX Install: htmx.org/docs/#installing
HTMX Swap Methods: htmx.org/docs/#swapping
Bootstrap 5 CDN: getbootstrap.com/docs/5.3/get...
Bootstrap Spinner: getbootstrap.com/docs/5.2/com...
#golang #htmx #webdevelopment

[@elhaambasheerch7058]

I would love to see a bigger project with HTMX + GOLANG that uses databases, great content man!

[@bugbytes3923]

Definitely coming up! Thanks for commenting!

[@Ash-qp2yw]

This should be simple enough to do -- have your endpoints make sql queries. I tend to split it up into "endpoint code" and "database query code" and just call my db insert/select functions from the endpoint function

[@paranoia77]

When will it release?? I'm looking forward to it!@@bugbytes3923

[@qwoolrat]

seems not that hard as long as you know GORM

[@paradiseonheaven]

i mean there's angular + go with databases. isnt it same? dont you just need to do the same?@@qwoolrat

[@smyrnian_]

More Golang + HTMX please!

[@bugbytes3923]

A series, perhaps?!

[@ArisSetiawan-xy1dk]

Series will be great. Thanks!

[@bugbytes3923]

@@ArisSetiawan-xy1dk Understood! 😄

[@ramadhanngallen9217]

​@@bugbytes3923 series like a complete project

[@bugbytes3923]

@@ramadhanngallen9217 Good idea!

[@mentotong9652]

Great content! Your django+htmx content has helped me building an interactive web app for a national hospital without the need of JS frontend framework. It is currently used by the hospital and I am still enriching or improving the web app bit by bit. Now with GO, really helps me to learn new PL with different perspectives and approaches to tackle some of the Python issues. Would love to see more GO contents. Thanks a million.

[@bugbytes3923]

Thank you! That's amazing to hear that you're using Django + HTMX in such a cool way for the hospital!
Thanks again for the nice comment, and I'll try and add more Go content soon.

[@benderino42]

I'm new to Go and HTMX. The majority of the time I work with React/Node.js project. I was looking for a quick overview of these technologies. This video is exactly what I was looking for. In my opinion, it's a great intro. Thanks! Looking forward to seeing more advanced videos.

[@bugbytes3923]

Thanks! Glad to hear you liked this video. HTMX + Go is a cool combo! I'll have more coming out from September onwards.

[@clintoka]

I'm in the same position! React mostly. So interested to see more about htmx and go...

[@darthcabs]

Love your way of teaching! Straight to the point, but going step by step, and doing everything by hand, rather than pasting blocks of code. Congratulations!

[@bugbytes3923]

Thanks a lot, that means a lot! Glad you like the approach.

[@geoblk3000]

This is one of the most concise and straight to the point tutorials on Go + HTMX and templating on CZcams!

[@bugbytes3923]

Thanks a lot! Glad to hear that, really appreciate the comment - cheers!

[@speedTurtle]

Stopped at 6:38 to say how excellent this video is, from a beginner's perspective.

[@bugbytes3923]

Thanks a lot, really appreciate that!

[@avithedev]

HTMX + Go series is absolutely necessary
Subbed 🙌

[@bugbytes3923]

Thanks a lot! Appreciate it - will work on some new content for this.

[@oluwaseunomotosho6812]

very very necessary

[@MaybeBL1TZ]

@@bugbytes3923 True it's very necessary specially with a better file structure and a cleaning code + i subbed

[@ZorroRBF]

This video is a master piece. I watched it a week ago with little knowledge of HTMX and no knowledge of GO templates. After learning more about the two subjects, I saw this video again and it is great! Thx a lot! Really good job!

[@bugbytes3923]

Thanks a lot for that, delighted to hear it and thanks for watching!

[@FirdausAziz]

I appreciate that you explained certain terms or concepts in relation to Django. It really helps put things in perspective. This is one of the most understandble Go video I've seen. Thank you. I hope to see more. Especially with something along Fiber + GORM. Because from my readings that are the nearest combination to Django.

[@bugbytes3923]

Thank you, glad to hear that's useful! Fiber + GORM are definitely on my list. Definitely important to know a bit about the database/sql package as a starting point though, but I'll expand on this soon. Thanks again!

[@user-qs3vs2gb7z]

Thanks a lot! Very cool video. I'm just dealing with a bunch of GO and HTMX! Looking forward to more videos on this topic! You're doing great!

[@bugbytes3923]

Thanks! I'll look into some more Go + HTMX stuff. And some more Go in general!

[@baz5719]

This was such a great video! Appreciate the thorough and straightforward explanation as we went along. Interested in more Go content. Keep up the great work.

[@bugbytes3923]

Thanks a lot - really glad to hear it was useful! Thanks for the comment 🙏

[@20dareason09]

A great video! Clear, concise, and helpful! Looking forward to the series!

[@bugbytes3923]

Thanks a lot! Hoping to get it prepared in the next month and start releasing.

[@catcatcatcatcatcatcatcatcatca]

This seems like an awesome introduction to both golang and HTMX - can’t wait to try this!

[@bugbytes3923]

Thanks!

[@benyaminyakobi3652]

Just got started with Golang & HTMX
Thanks for the great content, perfect demo project for beginners!

[@bugbytes3923]

Awesome, thanks! Good luck with Go and HTMX!

[@willdurant141]

You are constantly anticipating what I want to learn. This is great.

[@bugbytes3923]

Thanks a lot Will, glad to hear it!

[@MHasnain2663]

This was so straightforward and easy to understand. Thank you!

[@bugbytes3923]

Thanks a lot!!

[@BbB-vr9uh]

Awesome video! Loved how you show each piece in detail before moving onto the next piece.

[@bugbytes3923]

Thanks a lot!

[@maximofernandez196]

12:20 Btw, if you guys happen to be iterating over an array, you must use {{ . }}
That means that it would just use the data as is. If you send a slice, say "Slice": { "hello", "world"}
it should be something like this
{{ range .Slice }}
{{.}}
{{end}}
that should print hello and world in separated lines.
I suppose that's also why you use .Slice, because you send a map, so the point represents that particular map.
Also, I don't know if that changed, but right now hot reloading works, so it's not neccesary to restart the server everytime you make a change.
This is a beautiful and fast tutorial. Thank you so much, and also thank you for sharing the links for learning further.

[@anujtyagi8173]

More such Go tutorials appreciated. Also, group GO tutorials into a playlist like you've created for Python.

[@ThomasSchlosser]

Excellent video. You hit the spot for my current demand. Exactly the right steps for the compile cycles, concise language. Top. Thank you!

[@bugbytes3923]

Awesome to hear that, thanks for the comment!

[@stevemccauley]

This is a fantastic video, with a lot of great Go server and template stuff. You gave a great explanation of how HTMX works, e.g. with hx-target, and the template fragment looks to be something that will be really useful. I've subscribed to see more HTMX with Go. Thanks!

[@bugbytes3923]

Thanks a lot! Will do a proper project with Go + HTMX soon!

[@josesimoes3478]

Great video!! Very concise and educational!! Exactly the level of detail I would pike to see in videos!

[@bugbytes3923]

Thanks a lot!

[@jasonmucio6067]

Great video! I like your consistent flow, which makes the content easy to follow. I'd love to see more a more involved project. 👍

[@bugbytes3923]

Thanks a lot, still preparing some new Go + HTMX stuff for a more involved project - hopefully will release soon!

[@angstrom1058]

This is great, thank you. Good pace, lots of info, no fluff. Love it. I would like to impose upon you... please, more. :)

[@bugbytes3923]

Thanks a lot! Much more Go to come!

[@ahmettek315]

Thanks! I started checking HTMX with Go just an hour ago and surprisingly found your video that is published 16 hours ago. I am lucky. Though htmx itself was easy, you made that surely easier :) Thanks again.

[@bugbytes3923]

Thanks a lot Ahmet! Glad it helped. :)

[@pseabrook]

Fantastic content dude! Extremely clear and informative.

[@bugbytes3923]

Thanks a lot Peter. Glad it was clear and thanks for watching!

[@licokr]

Great tutorial, easy to understand and perfect explanation! Thanks a lot!

[@bugbytes3923]

Thanks a lot!

[@garbagechannel6514]

this is very well explained, thank you. i love the simplicity of the whole system too

[@bugbytes3923]

Thanks a lot!

[@markopavlovic2597]

Very good introduction 👏
Awesome you posted all the valid reference links 💪

[@bugbytes3923]

Thanks a lot, glad you liked it!

[@timbrockley]

Great introduction - you covered a lot of useful coding techniques in an easy to understand way :)

[@bugbytes3923]

Thanks a lot!

[@michalbotor]

this is really elegant!
your presentation is great, and i came here for go, but i'm super impressed with htmx!

[@bugbytes3923]

Thanks a lot for the comment! Great to hear - and yeah, HTMX is cool!

[@MarcusHammarberg]

Brilliant teaching at neck breaking speed! I love it

[@bugbytes3923]

Thanks a lot!

[@TheKer7]

Prime's talk of Go+hx got me here. Great content and explanations!

[@bugbytes3923]

Thanks a lot!

[@AmoahDevLabs]

I've watched this video over and over again and it is very interesting. I suggest we continue with this and do more with Go lang.

[@bugbytes3923]

Thanks a lot! I think some more Go will be coming up soon!

[@AmoahDevLabs]

@@bugbytes3923 Wonderful 😊. I can't wait for more Go stuffs 😁

[@jedi2light]

Thank you for that type of content, really, I appreciate such a series of videos! Golang and HTMX is currently the stack of technologies I want to learn to gain some valuable experience, so really thank you for you job 🥰

[@bugbytes3923]

Thanks a lot, glad it was helpful! Good luck on your journey with Go!

[@FrostlightX]

Thank you, HTMX + GO is exactly what I'm looking for, keep 'em coming

[@bugbytes3923]

Thanks a lot, will do!

[@fersalamanca2606]

Amazing content man. Really looking forward to a bigger project tutorial of Go + HTMX, maybe with some ORMs and migrations? Thanks for your efforts!

[@FedericoPedemonte]

great video, thanks! As a Go lover and JS hater I think I'm gonna love HTMX 🙂

[@AgustinLencina96]

niceee I will wait for a Go + htmx series!

[@Ego_Maritm]

Amazing. I have been getting hands-on with Golang, and this is really beneficial. Again, thanks, bro💪

[@bugbytes3923]

Thanks a lot! Good to mix it up a bit from Python.

[@AliHassan-wc6nb]

​@@bugbytes3923 greetings!
What would you suggest/what to choose for scalable applications? MOJO, GO or python Django!
Great work bro!

[@bugbytes3923]

@@AliHassan-wc6nb I haven't tried Mojo yet - you? Any good?
To be honest, I think all can be scalable if used properly. Go has some advantages in speed, ease-of-concurrency over Python, but I think both languages are fine for 99% of web backends (if used properly). Software architecture can be a bigger factor than the language, imo.

[@0ktothorp]

This is exactly what I wanted to learn lately. Thanks! 😁

[@bugbytes3923]

You're welcome, thanks a lot for the comment!

[@IQUBE]

Loved this video mate! Great job!

[@bugbytes3923]

Thanks a lot!

[@christhornham]

Great tutorial! Thank you! I'd love to see more videos on this topic.

[@bugbytes3923]

Thanks a lot! I'll try extending this soon into a larger HTMX + Go app!

[@Gusto20000]

Why does it feel like I went back 10 years and watching Angular 1 tutorial. Thank you for the video anyway, it's really informative
Edit: This is very cool, much better that Angular 1 ;) thanks

[@mycroftholmesiv]

This is exactly what I was looking for

[@bugbytes3923]

Thanks a lot!

[@marju101010]

It's been a long time since I've learned so much from a youtube video.

[@marju101010]

Thank you so much. Congrats.

[@bugbytes3923]

@@marju101010 Thanks a lot, glad to hear it was helpful!

[@jjj886dfhttgrdvjj7]

A truly brilliant video. Tyvm!

[@bugbytes3923]

Thanks a lot!

[@muhammadadibshaharudin6978]

that is very detail and straightforward explanations.. great content.. Would love to see more with database.. Thank you

[@bugbytes3923]

Thanks a lot - it's definitely coming, soon!

[@Dettol68]

great teaching style - the big paste of code was a struggle at times, but otherwise, loved it! Keep doing them

[@bugbytes3923]

Thanks a lot! (and sorry for the copy/paste!)

[@nodidog]

Great video, thanks for sharing. Be aware that the method used at 21:45 won't escape user inputs, so isn't safe for use in production. The html/template package does automatically escape though, so you can just use a template and parse the data.

[@iGageit]

Thanks for making this video! I needed it for my job lol

[@bugbytes3923]

Thanks a lot for watching! Glad it helped.

[@marcusk7855]

Loved it. Just started learning GoLang.

[@bugbytes3923]

Thanks a lot! Any Go requests, feel free to let me know!

[@prashlovessamosa]

Thanks this is something new and fresh.

[@bugbytes3923]

Mixing it up a bit 😀

[@jiasheanleong7918]

Great video! I love your explanation and how you only use the standard libraries. Keep it up.

[@bugbytes3923]

Thanks a lot, appreciate it!

[@markg1netsg]

Really well articulated, would love to see a series on GO - Hyperscript - HTMX - thanks a lot

[@bugbytes3923]

Coming very soon! Thanks!

[@jollygirl2978]

Well explained! Thank you sooo much! More videos like this on HTMX and Go. Would love to see an exemple with interactive table element.

[@bugbytes3923]

Thank you very much! I'll definitely be doing some more HTMX+Go stuff soon.

[@87zoomy]

Great video. Just what I'm looking for

[@bugbytes3923]

Thank you!

[@adamtak3128]

Would love to see more Go + HTMX + Database videos!

[@bugbytes3923]

Definitely coming up soon, I'm gonna do a video on Go + databases very soon as a prelude to more HTMX stuff.

[@darthcabs]

Fantastic content, pal!

[@bugbytes3923]

Thanks a lot!

[@lukehooper3435]

Nice stuff, keep it up! Golang/Gin, htmx, alpine, tailwind would be cool to see!

[@dazealex]

Quite powerful for folks getting started and don't want to mess with Vue or React, though Vue is pretty simple, but still has a bit of a learning curve.

[@JanHKila]

Just great!
Thank you.

[@bugbytes3923]

Thanks for watching!

[@Lzadhito]

Top notch video for newcomer like me! thanks!

[@bugbytes3923]

Awesome! Thanks a lot!

[@z01d]

Liked! Request for more go videos.

[@bugbytes3923]

Thanks, they're coming, just planning some stuff now!

[@szmonszmon]

Thanks! That was 2 technologies that I want to see together 🙂

[@bugbytes3923]

Nice - thanks for watching!

[@Frawkesish]

Super enlightening . I'm just starting to learn to after using react and node for 3months while learning to program in general 😅 this really seems like it will simplify the hell out of my life and job ..

[@bugbytes3923]

Thanks a lot! HTMX can definitely simplify things, for sure!

[@MonoMario89]

really great video! dependency free content, lovely

[@bugbytes3923]

Thanks a lot!

[@AmoahDevLabs]

I thought about switching to GO lang for some of my projects but I never did that 😅. It seems you're getting started with Go. Thanks very much.

[@bugbytes3923]

It's always good to check out other languages. Go is definitely a good one. Thanks!

[@runthat]

Thank you!! You introduced me to HTMX foreverago and I love it. 😁

[@bugbytes3923]

Thanks! Definitely a cool bit of tech.
Good FastAPI videos yourself, btw! Will check out some more 💪

[@runthat]

@@bugbytes3923 thank you! Working on the third in the tutorial series but I’ve gotten distracted by these 1-liner shorts I’ve been making. They’re so fun. Anyway thanks!!

[@dizphunkt]

Great tutorial, thank you so much!

[@bugbytes3923]

You're welcome - and thank you for watching!

[@gaius100bc]

great tutorial, subscribed

[@bugbytes3923]

Thanks a lot!

[@mlsandreas]

Thank you!!! Really interesting video!!

[@bugbytes3923]

Thanks for watching!

[@jellyamna5521]

wow thanks u, great ever golang htmlx videos..

[@bugbytes3923]

Thanks a lot!

[@overbyte]

Love this. Thanks man

[@bugbytes3923]

Cheers man!

[@hm_webdev]

A Scotsman! 🎉 Refreshing to hear other accents.

[@bugbytes3923]

Thanks from Glasgow!

[@GabrielPozo]

Great video!!! Thanks!

[@bugbytes3923]

Thanks!

[@kevinz1991]

awesome video! thank you so much. subscribed :)

[@bugbytes3923]

Thanks a lot!!

[@oluwaseunomotosho6812]

a big well done
and
Yes yes
more Go+HTMX

[@bugbytes3923]

Thanks a lot - it's coming!

[@anirudhreddy9205]

Great Tutorial 👏👏

[@bugbytes3923]

Thanks so much!

[@tatemo_labs]

Very interesting content, thank you.

[@bugbytes3923]

Thanks a lot!

[@C.S.Argudo]

It took like a year of learning wtf youre saying but i kinda get it now

[@afreebiker]

Great tutorial, thanks

[@bugbytes3923]

Thanks a lot!

[@xizt5973]

3 awesome things in this video. Golang, HTMX and the beautiful scottish accent

[@jerbear7952]

Yeah it's a great accent unless you are selling Purple Burglar Alarms.

[@Tay74514]

Love your content ❤

[@bugbytes3923]

Thanks a lot!

[@nskmptrck5492]

Thanks a lot for this one, really 🎉

[@bugbytes3923]

Thanks for watching!

[@pyrhockz]

Amazing tutorial thank you

[@bugbytes3923]

Thank you!

[@ChitChatLLMs]

Brilliant.

[@acronproject]

Thank you for this

[@bugbytes3923]

You're welcome, thanks for watching!

[@PeterNunnOZ]

Great video, thanks heaps. Glad I found it through Go Weekly. Is there a way to clear the form once the post is done? I'm sure there is, but worth an ask.

[@nixoncode]

htmx+go just rocks!

[@bugbytes3923]

I'm excited to make more videos on it - it's a cool combo!

[@danielsemerjyan513]

Very interesting

[@bugbytes3923]

Thanks a lot!

[@TerenceKearns]

I didn’t know this would be so easy. Beats the fell out of server side js frameworks.

[@bugbytes3923]

Thanks a lot, really appreciate that! :)

[@bisadk2284]

Really grateful for all your valuable tutorials. I will be really helpful If you shows us how to create dynamic multistep form using Django since no other youtube have any tutorial related to this topic

[@bugbytes3923]

Thanks a lot!
I'll have a think about that one. Do you have any examples in mind? I can maybe try and make something.

[@mrwhatwhat15]

More go videos please :)

[@bugbytes3923]

Coming soon! Thanks :D

[@oussamasethoum1665]

More of this content please talk about the hx-boost and how to navigate between pages.

[@bugbytes3923]

Good idea, will add to the list! Thanks.

[@norunners_]

Nice tutorial. My only critique is to not parse templates per request, it should be done once on startup and then reused throughout.

[@bugbytes3923]

Thanks a lot for that tip! That's definitely a better approach, an oversight on my part - thanks again!

[@jcbritobr]

Nice stuff

[@bugbytes3923]

Thanks!

[@archibaldivanovich4103]

🔥🔥🔥

[@thomasguttler5179]

Thank you! I would like to see a video about the Golang package "Bob" for databases.

[@bugbytes3923]

Thanks for the suggestion, will have a look into it!