Learn the basics of htmx - an HTML-focused UI library that can handle data fetching and rendering in web applications without complex JavaScript code or frameworks. 

#webdevelopment #javascript #100SecondsOfCode 

💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

- htmx docs https://htmx.org
- HTML in 100 seconds https://youtu.be/ok-plXXHlWw
- Nuxt in 100 Seconds https://youtu.be/dCxSsr5xuL8
- Math for Programmers https://youtu.be/lkIFF4maKMU

🔥 Get More Content - Upgrade to PRO

Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- What is htmx?
- htmx quickstart tutorial
- Alpine.js vs htmx
- Do I need a JavaScript framework?
- What is AJAX in web development?
- htmx boost vs Turbolinks
2024-02-04T05:03:14.783Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
a6cab17d-fb5f-4e77-898a-95725413804c
62c8c1a104f45d5db0ff3474ae0d6ac94b123597ca57218ba311ee6a8a6e3c1f
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
HTMX, a UI library for the web that can replace your JavaScript framework with the simplicity of HTML.
Plain HTML is more capable than you think.
Every time you click on a link or submit a form, it automatically sends an HTTP request to the server and renders the t fonts in the UI.
It's so easy, but why stop there?
H t m x embraces an architectural constraint known as hypermedia as the engine of application state, by adding new attributes to HTML that can handle the complex requirements of modern UIs.
It gives you the ability to make a request to the server from any element by hiding an attribute with an HTTP verb and the URL endpoint on the server.
It'll take the response from the server and replace this element asynchronously, or it can specify a target to replace a different element on the page.
It can also customize the event on which it's triggered along with modifiers like delay and throttle to control the way the request descent.
It keeps track of the loading state so you can show a spinner, applies CSS transitions for animation, and builds on the HTML validation API to validate forms.
It even has a client side router called boost that can make any traditional web application feel like a faster single page application, and it also includes extensions for more advanced features like web sockets, and integrations with other HTML frameworks like Alpine.
To install it, simply import h t m x in a script tag from the head of an HTML document.
You just put the hyper back into hypertext.
Now all you need is a server in your favorite programming language that returns HTML text as a response.
HTML.
Now we can use the h x get attribute to make a request to this endpoint along with h x swap to replace this element with the HTML on the response.
When swapping though, we don't only have the option to replace the outer HTML, but we could also append or prepend the response to the existing UI, or the h x target attribute allows us to move the UI to a completely different element.
It finds that element with a CSS selector, but has additional syntax like next and closest, allowing you to easily find the proper element without a bunch of custom IDs.
We might also use htmx indicator to show a loading spinner, and write a CSS transition animation for the incoming element.
Behind the scenes, h tmx x has an extensive event system that you can tap into by listening to custom events with JavaScript.
And if you wanna run your own client side JavaScript, the h x on allows you to bind a JavaScript function to any element, and that's all it takes to build a highly polished full stack HTML application on the information superhighway.
This has been h t m in 100 seconds.
Do you love it or do you hate it?
Let me know in the comments.
Thanks for watching, and I will see you in the next one.

Speaker 0: HTMX, a UI library for the web that can replace your JavaScript framework with the simplicity of HTML. Plain HTML is more capable than you think. Every time you click on a link or submit a form, it automatically sends an HTTP request to the server and renders the t fonts in the UI. It's so easy, but why stop there? H t m x embraces an architectural constraint known as hypermedia as the engine of application state, by adding new attributes to HTML that can handle the complex requirements of modern UIs.

It gives you the ability to make a request to the server from any element by hiding an attribute with an HTTP verb and the URL endpoint on the server. It'll take the response from the server and replace this element asynchronously, or it can specify a target to replace a different element on the page. It can also customize the event on which it's triggered along with modifiers like delay and throttle to control the way the request descent. It keeps track of the loading state so you can show a spinner, applies CSS transitions for animation, and builds on the HTML validation API to validate forms. It even has a client side router called boost that can make any traditional web application feel like a faster single page application, and it also includes extensions for more advanced features like web sockets, and integrations with other HTML frameworks like Alpine.

To install it, simply import h t m x in a script tag from the head of an HTML document. You just put the hyper back into hypertext. Now all you need is a server in your favorite programming language that returns HTML text as a response. HTML. Now we can use the h x get attribute to make a request to this endpoint along with h x swap to replace this element with the HTML on the response.

When swapping though, we don't only have the option to replace the outer HTML, but we could also append or prepend the response to the existing UI, or the h x target attribute allows us to move the UI to a completely different element. It finds that element with a CSS selector, but has additional syntax like next and closest, allowing you to easily find the proper element without a bunch of custom IDs. We might also use htmx indicator to show a loading spinner, and write a CSS transition animation for the incoming element. Behind the scenes, h tmx x has an extensive event system that you can tap into by listening to custom events with JavaScript. And if you wanna run your own client side JavaScript, the h x on allows you to bind a JavaScript function to any element, and that's all it takes to build a highly polished full stack HTML application on the information superhighway.

This has been h t m in 100 seconds. Do you love it or do you hate it? Let me know in the comments. Thanks for watching, and I will see you in the next one.
HTMX, a UI library for the web that can replace your JavaScript framework with the simplicity of HTML. Plain HTML is more capable than you think. Every time you click on a link or submit a form, it automatically sends an HTTP request to the server and renders the t fonts in the UI. It's so easy, but why stop there? H t m x embraces an architectural constraint known as hypermedia as the engine of application state, by adding new attributes to HTML that can handle the complex requirements of modern UIs. It gives you the ability to make a request to the server from any element by hiding an attribute with an HTTP verb and the URL endpoint on the server. It'll take the response from the server and replace this element asynchronously, or it can specify a target to replace a different element on the page.
It can also customize the event on which it's triggered along with modifiers like delay and throttle to control the way the request descent. It keeps track of the loading state so you can show a spinner, applies CSS transitions for animation, and builds on the HTML validation API to validate forms.
animation
It even has a client side router called boost that can make any traditional web application feel like a faster single page application, and it also includes extensions for more advanced features like web sockets, and integrations with other HTML frameworks like Alpine. To install it, simply import h t m x in a script tag from the head of an HTML document. You just put the hyper back into hypertext. Now all you need is a server in your favorite programming language that returns HTML text as a response. HTML. Now we can use the h x get attribute to make a request to this endpoint along with h x swap to replace this element with the HTML on the response. When swapping though, we don't only have the option to replace the outer HTML, but we could also append or prepend the response to the existing UI, or the h x target attribute allows us to move the UI to a completely different element. It finds that element with a CSS selector, but has additional syntax like next and closest, allowing you to easily find the proper element without a bunch of custom IDs.
We might also use htmx indicator to show a loading spinner, and write a CSS transition animation for the incoming element. Behind the scenes, h tmx x has an extensive event system that you can tap into by listening to custom events with JavaScript. And if you wanna run your own client side JavaScript, the h x on allows you to bind a JavaScript function to any element, and that's all it takes to build a highly polished full stack HTML application on the information superhighway.
animation
This has been h t m in 100 seconds. Do you love it or do you hate it? Let me know in the comments. Thanks for watching, and I will see you in the next one.
HTMX, a UI library for the web that can replace your JavaScript framework with the simplicity of HTML. Plain HTML is more capable than you think. Every time you click on a link or submit a form, it automatically sends an HTTP request to the server and renders the t fonts in the UI. It's so easy, but why stop there? H t m x embraces an architectural constraint known as hypermedia as the engine of application state, by adding new attributes to HTML that can handle the complex requirements of modern UIs. It gives you the ability to make a request to the server from any element by hiding an attribute with an HTTP verb and the URL endpoint on the server. It'll take the response from the server and replace this element asynchronously, or it can specify a target to replace a different element on the page. It can also customize the event on which it's triggered along with modifiers like delay and throttle to control the way the request descent. It keeps track of the loading state so you can show a spinner, applies CSS transitions for animation, and builds on the HTML validation API to validate forms. It even has a client side router called boost that can make any traditional web application feel like a faster single page application, and it also includes extensions for more advanced features like web sockets, and integrations with other HTML frameworks like Alpine. To install it, simply import h t m x in a script tag from the head of an HTML document. You just put the hyper back into hypertext. Now all you need is a server in your favorite programming language that returns HTML text as a response. HTML. Now we can use the h x get attribute to make a request to this endpoint along with h x swap to replace this element with the HTML on the response. When swapping though, we don't only have the option to replace the outer HTML, but we could also append or prepend the response to the existing UI, or the h x target attribute allows us to move the UI to a completely different element. It finds that element with a CSS selector, but has additional syntax like next and closest, allowing you to easily find the proper element without a bunch of custom IDs. We might also use htmx indicator to show a loading spinner, and write a CSS transition animation for the incoming element. Behind the scenes, h tmx x has an extensive event system that you can tap into by listening to custom events with JavaScript. And if you wanna run your own client side JavaScript, the h x on allows you to bind a JavaScript function to any element, and that's all it takes to build a highly polished full stack HTML application on the information superhighway. This has been h t m in 100 seconds. Do you love it or do you hate it? Let me know in the comments. Thanks for watching, and I will see you in the next one.
HTMX,
htmx
a
a
UI
ui
library
library
for
for
the
the
web
web
that
that
can
can
replace
replace
your
your
JavaScript
javascript
framework
framework
with
with
the
the
simplicity
simplicity
of
of
HTML.
html
Plain
plain
HTML
html
is
is
more
more
capable
capable
than
than
you
you
think.
think
Every
every
time
time
you
you
click
click
on
on
a
a
link
link
or
or
submit
submit
a
a
form,
form
it
it
automatically
automatically
sends
sends
an
an
HTTP
http
request
request
to
to
the
the
server
server
and
and
renders
renders
the
the
t
t
fonts
fonts
in
in
the
the
UI.
ui
It's
it's
so
so
easy,
easy
but
but
why
why
stop
stop
there?
there
H
h
t
t
m
m
x
x
embraces
embraces
an
an
architectural
architectural
constraint
constraint
known
known
as
as
hypermedia
hypermedia
as
as
the
the
engine
engine
of
of
application
application
state,
state
by
by
adding
adding
new
new
attributes
attributes
to
to
HTML
html
that
that
can
can
handle
handle
the
the
complex
complex
requirements
requirements
of
of
modern
modern
UIs.
uis
It
it
gives
gives
you
you
the
the
ability
ability
to
to
make
make
a
a
request
request
to
to
the
the
server
server
from
from
any
any
element
element
by
by
hiding
hiding
an
an
attribute
attribute
with
with
an
an
HTTP
http
verb
verb
and
and
the
the
URL
url
endpoint
endpoint
on
on
the
the
server.
server
It'll
it'll
take
take
the
the
response
response
from
from
the
the
server
server
and
and
replace
replace
this
this
element
element
asynchronously,
asynchronously
or
or
it
it
can
can
specify
specify
a
a
target
target
to
to
replace
replace
a
a
different
different
element
element
on
on
the
the
page.
page
It
it
can
can
also
also
customize
customize
the
the
event
event
on
on
which
which
it's
it's
triggered
triggered
along
along
with
with
modifiers
modifiers
like
like
delay
delay
and
and
throttle
throttle
to
to
control
control
the
the
way
way
the
the
request
request
descent.
descent
It
it
keeps
keeps
track
track
of
of
the
the
loading
loading
state
state
so
so
you
you
can
can
show
show
a
a
spinner,
spinner
applies
applies
CSS
css
transitions
transitions
for
for
animation,
animation
and
and
builds
builds
on
on
the
the
HTML
html
validation
validation
API
api
to
to
validate
validate
forms.
forms
It
it
even
even
has
has
a
a
client
client
side
side
router
router
called
called
boost
boost
that
that
can
can
make
make
any
any
traditional
traditional
web
web
application
application
feel
feel
like
like
a
a
faster
faster
single
single
page
page
application,
application
and
and
it
it
also
also
includes
includes
extensions
extensions
for
for
more
more
advanced
advanced
features
features
like
like
web
web
sockets,
sockets
and
and
integrations
integrations
with
with
other
other
HTML
html
frameworks
frameworks
like
like
Alpine.
alpine
To
to
install
install
it,
it
simply
simply
import
import
h
h
t
t
m
m
x
x
in
in
a
a
script
script
tag
tag
from
from
the
the
head
head
of
of
an
an
HTML
html
document.
document
You
you
just
just
put
put
the
the
hyper
hyper
back
back
into
into
hypertext.
hypertext
Now
now
all
all
you
you
need
need
is
is
a
a
server
server
in
in
your
your
favorite
favorite
programming
programming
language
language
that
that
returns
returns
HTML
html
text
text
as
as
a
a
response.
response
HTML.
html
Now
now
we
we
can
can
use
use
the
the
h
h
x
x
get
get
attribute
attribute
to
to
make
make
a
a
request
request
to
to
this
this
endpoint
endpoint
along
along
with
with
h
h
x
x
swap
swap
to
to
replace
replace
this
this
element
element
with
with
the
the
HTML
html
on
on
the
the
response.
response
When
when
swapping
swapping
though,
though
we
we
don't
don't
only
only
have
have
the
the
option
option
to
to
replace
replace
the
the
outer
outer
HTML,
html
but
but
we
we
could
could
also
also
append
append
or
or
prepend
prepend
the
the
response
response
to
to
the
the
existing
existing
UI,
ui
or
or
the
the
h
h
x
x
target
target
attribute
attribute
allows
allows
us
us
to
to
move
move
the
the
UI
ui
to
to
a
a
completely
completely
different
different
element.
element
It
it
finds
finds
that
that
element
element
with
with
a
a
CSS
css
selector,
selector
but
but
has
has
additional
additional
syntax
syntax
like
like
next
next
and
and
closest,
closest
allowing
allowing
you
you
to
to
easily
easily
find
find
the
the
proper
proper
element
element
without
without
a
a
bunch
bunch
of
of
custom
custom
IDs.
ids
We
we
might
might
also
also
use
use
htmx
htmx
indicator
indicator
to
to
show
show
a
a
loading
loading
spinner,
spinner
and
and
write
write
a
a
CSS
css
transition
transition
animation
animation
for
for
the
the
incoming
incoming
element.
element
Behind
behind
the
the
scenes,
scenes
h
h
tmx
tmx
x
x
has
has
an
an
extensive
extensive
event
event
system
system
that
that
you
you
can
can
tap
tap
into
into
by
by
listening
listening
to
to
custom
custom
events
events
with
with
JavaScript.
javascript
And
and
if
if
you
you
wanna
wanna
run
run
your
your
own
own
client
client
side
side
JavaScript,
javascript
the
the
h
h
x
x
on
on
allows
allows
you
you
to
to
bind
bind
a
a
JavaScript
javascript
function
function
to
to
any
any
element,
element
and
and
that's
that's
all
all
it
it
takes
takes
to
to
build
build
a
a
highly
highly
polished
polished
full
full
stack
stack
HTML
html
application
application
on
on
the
the
information
information
superhighway.
superhighway
This
this
has
has
been
been
h
h
t
t
m
m
in
in
100
100
seconds.
seconds
Do
do
you
you
love
love
it
it
or
or
do
do
you
you
hate
hate
it?
it
Let
let
me
me
know
know
in
in
the
the
comments.
comments
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker discusses HTMX, a UI library for the web that can replace JavaScript framework, and provides information on how it works. They explain how HTMX has an architectural constraint called hypermedia and how it allows for elements to be replaced with new ones, including a web application that supports multiple media outlets and integrates with other HTML frameworks. The speaker also mentions HTMX's event system and how it allows for the creation of a fully polished stack HTML application.
htmx in 100 seconds
HTMX, a UI library for the web that can replace your JavaScript framework with the simplicity of HTML. Plain HTML is more capable than you think. Every time you click on a link or submit a form, it automatically sends an HTTP request to the server and renders the t fonts in the UI. It's so easy, but why stop there? H t m x embraces an architectural constraint known as hypermedia as the engine of application state, by adding new attributes to HTML that can handle the complex requirements of modern UIs. It gives you the ability to make a request to the server from any element by hiding an attribute with an HTTP verb and the URL endpoint on the server. It'll take the response from the server and replace this element asynchronously, or it can specify a target to replace a different element on the page. It can also customize the event on which it's triggered along with modifiers like delay and throttle to control the way the request descent. It keeps track of the loading state so you can show a spinner, applies CSS transitions for animation, and builds on the HTML validation API to validate forms. It even has a client side router called boost that can make any traditional web application feel like a faster single page application, and it also includes extensions for more advanced features like web sockets, and integrations with other HTML frameworks like Alpine. To install it, simply import h t m x in a script tag from the head of an HTML document. You just put the hyper back into hypertext. Now all you need is a server in your favorite programming language that returns HTML text as a response. HTML. Now we can use the h x get attribute to make a request to this endpoint along with h x swap to replace this element with the HTML on the response. When swapping though, we don't only have the option to replace the outer HTML, but we could also append or prepend the response to the existing UI, or the h x target attribute allows us to move the UI to a completely different element. It finds that element with a CSS selector, but has additional syntax like next and closest, allowing you to easily find the proper element without a bunch of custom IDs. We might also use htmx indicator to show a loading spinner, and write a CSS transition animation for the incoming element. Behind the scenes, h tmx x has an extensive event system that you can tap into by listening to custom events with JavaScript. And if you wanna run your own client side JavaScript, the h x on allows you to bind a JavaScript function to any element, and that's all it takes to build a highly polished full stack HTML application on the information superhighway. This has been h t m in 100 seconds. Do you love it or do you hate it? Let me know in the comments. Thanks for watching, and I will see you in the next one.
The speaker discusses HTMX, a UI library for the web that can replace JavaScript framework, and provides information on how it works. They explain how HTMX has an architectural constraint called hypermedia and how it allows for elements to be replaced with new ones, including a web application that supports multiple media outlets and integrates with other HTML frameworks. The speaker also mentions HTMX's event system and how it allows for the creation of a fully polished stack HTML application.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : htmx in 100 seconds 
        and a small summary : The speaker discusses HTMX, a UI library for the web that can replace JavaScript framework, and provides information on how it works. They explain how HTMX has an architectural constraint called hypermedia and how it allows for elements to be replaced with new ones, including a web application that supports multiple media outlets and integrates with other HTML frameworks. The speaker also mentions HTMX's event system and how it allows for the creation of a fully polished stack HTML application.
        [/INST]
        
        Generate the video : HTMX, a UI library for the web that can replace your JavaScript framework with the simplicity of HTML. Plain HTML is more capable than you think. Every time you click on a link or submit a form, it automatically sends an HTTP request to the server and renders the t fonts in the UI. It's so easy, but why stop there? H t m x embraces an architectural constraint known as hypermedia as the engine of application state, by adding new attributes to HTML that can handle the complex requirements of modern UIs. It gives you the ability to make a request to the server from any element by hiding an attribute with an HTTP verb and the URL endpoint on the server. It'll take the response from the server and replace this element asynchronously, or it can specify a target to replace a different element on the page. It can also customize the event on which it's triggered along with modifiers like delay and throttle to control the way the request descent. It keeps track of the loading state so you can show a spinner, applies CSS transitions for animation, and builds on the HTML validation API to validate forms. It even has a client side router called boost that can make any traditional web application feel like a faster single page application, and it also includes extensions for more advanced features like web sockets, and integrations with other HTML frameworks like Alpine. To install it, simply import h t m x in a script tag from the head of an HTML document. You just put the hyper back into hypertext. Now all you need is a server in your favorite programming language that returns HTML text as a response. HTML. Now we can use the h x get attribute to make a request to this endpoint along with h x swap to replace this element with the HTML on the response. When swapping though, we don't only have the option to replace the outer HTML, but we could also append or prepend the response to the existing UI, or the h x target attribute allows us to move the UI to a completely different element. It finds that element with a CSS selector, but has additional syntax like next and closest, allowing you to easily find the proper element without a bunch of custom IDs. We might also use htmx indicator to show a loading spinner, and write a CSS transition animation for the incoming element. Behind the scenes, h tmx x has an extensive event system that you can tap into by listening to custom events with JavaScript. And if you wanna run your own client side JavaScript, the h x on allows you to bind a JavaScript function to any element, and that's all it takes to build a highly polished full stack HTML application on the information superhighway. This has been h t m in 100 seconds. Do you love it or do you hate it? Let me know in the comments. Thanks for watching, and I will see you in the next one.
        