Hyperscript and HTMX - Creating an Interactive Book Form

In this video, we create a small, interactive user interface containing a form and some buttons, using Hyperscript to control when certain elements are shown, and using Hyperscript to clear input elements in our form upon certain actions.

We use HTMX to handle form submissions, and to load new content, without a page refresh being required.

Elements are styled with TailwindCSS.

This video was inspired by ideas from David - thank you, David!

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
01:48 Creating a Book model
02:42 Creating a Book Form
04:49 Adding Form to Context
05:24 Installing & Using django-widget-tweaks
07:30 Styling form with TailwindCSS
10:17 Using Hyperscript to Toggle Classes
11:51 Submitting Form with HTMX
19:33 Using Hyperscript and Custom HTMX Events
21:36 Using Hyperscript to Clear Inputs
23:22 Showing Books Below Form with HTMX

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#python #django #webdevelopment #webdeveloper #tailwindcss

[silkogelman]

Custom HTMX Events, Tailwind form styling, Hyperscript: so many interesting topics packed in this tutorial! 🥳
Thank you BugBytes!

[seydinaoumarsamabaly]

Everytime I receive notification of a new video from your channel, I know immediately that I will learn something new or update my skills to high level. Thank you for everything. God bless you.

[khunjohn]

As usual, awesome content. I just started writing htmx and _hyperscript in production code. I picket _hyperscript over Alpine because the tight htmx integration. Your videos helped me get started.

[theodoreivanov]

Any effort to bring together htmx/hyperscript and our favourite back-ends, be they in Python, Go or other, is worthy of big praise.

[robhafemeister]

As always, another EXCELLENT video, makes my day when I receive a notification that you have a new video. Definitely my favorite channel.

[aidoskanapyanov]

Amazing content! You've got one of the best tutorials on YouTube 👏

[wiki-infodevelopment]

I am sure it will be good :) I'm watching

[esmondadjei]

Love the stack: HTMX, HyperScript, Tailwind and Django. Can build apps at turbo speed. Should be called the Turbo stack

[DavidSoles]

Thank you for this amazing explanation.

[TravisPickle]

awesome tut. thanks for htmx and hyperscript + django

[umni_kot]

very high quality and great content. thank you very much don't stop!

[iRageKamikaze]

To avoid re-fetching all books with the `bookAdded` event could you instead return an out-of-band element in the form response with the new book <li> element? I think you'd need to use a normal swap on form submit to add the <li> element using `beforeEnd` to the book list and then use an `hx-select-oob` to swap in the hidden book form

[gustavvilaca]

Another great tutorial. Thanks man, we all appreciate you!

[franciscodelafruitas]

Excellente presentation! Really helpful thank you!

[repotranstech]

As usual much appreciated for top notch content.👍

[repotranstech]

Just a recommendation, use bootstrap in future for your styles such that it doesn't obstruct the main theme which is Django and Htmx.

[ayubkara]

Excellent content as always, i have a request please can you make a video about interactive forms like for example choosing an option from a drop down list can make another field on the form appear or disappear

[franciscodelafruitas]

Would love to see a unique number/ID automatically generated and added on each book added. As well as number of book copies, checkout books, books removed from the database when checked out. Of course books would have to be added back in if 'checkout' is cancelled. Would unicorn be better suited? Excellente content thanks!

[مقاطعمترجمة-شث]

Please keep this framework as simple as it now, don't make it complicated and had tons of feature that no one will use,

[NgazetungueMuheue]

Greatwork, i like this. can you please do add to cart with htmx + hyperscipt + alpine in future if possible