Intro to HTMX: Dynamic HTML without JavaScript | InfoWorld

Last updated date: 2025-04-30 09:06:10

Add your website completely free of charge

Meta tags

Meta Tag Content
viewport width=device-width, initial-scale=1.0
description HTMX is the HTML extension syntax that replaces JavaScript with simple markup. It could change the course of web development.
dc_date_issued 2023-09-20T02:00-05:00
date 2023-09-20
twitter:image https://images.idgesg.net/images/article/2023/09/shutterstock_1814372885-100946119-large.jpg?auto=webp&quality=85,70
author Matthew Tyson
twitter:card summary_large_image
twitter:site @infoworld
twitter:description HTMX is the HTML extension syntax that replaces JavaScript with simple markup. It could change the course of web development.
rating General
robots NOODP,NOYDIR
google-site-verification RD0aa-ox1hse8Hjz2fU6KzOMnGyqLwYUv13rGucjtjA
msvalidate_01 04917178B598F0648B9BAD693FEC29A3
Website Page URL https://www.infoworld.com/article/3706951/htmx-dynamic-html-without-the-javascript.html

Heading tags

h1 tag

We found around "1" h1 tags which are found in this page url and are available in the table below.

S.no h1 tag content
1 Intro to HTMX: Dynamic HTML without JavaScript

h2 tag

We found around "4" h2 tags which are found in this page url and are available in the table below.

S.no h2 tag content
1 What is HTMX?
2 Server-side HTMX
3 Client-side templating with HTMX
4 Conclusion

h3 tag

We found around "1" h3 tags which are found in this page url and are available in the table below.

S.no h3 tag content
1 HTMX is the HTML extension syntax that replaces JavaScript with simple markup. It could change the course of web development.

h4 tag

We found around "4" h4 tags which are found in this page url and are available in the table below.

S.no h4 tag content
1 Listing 1. The user update in HTMX
2 Listing 2. Form POST with HTMX properties
3 Listing 3. Editing the server-side template in PUG
4 Listing 4. Handling to-do creation

h5 tag

Unfortunately we were not able to find any h3 tag in the URL of this page.

h6 tag

Unfortunately we were not able to find any h3 tag in the URL of this page.

HTML Formatting Elements - Important text (strong/bold) tags

S.no Tag content
1 Next read this:

HTML Formatting Elements - Important text (i) tags

S.no Tag content
1 descend

HTML Formatting Elements - Underline text (u) tags

S.no Tag content

HTML Formatting Elements - Code tags

S.no Tag content
1 
PUT
2 
<div hx-target="this" hx-swap="outerHTML">
    <div><label>First Name</label>: Joe</div>
    <div><label>Last Name</label>: Blow</div>
    <div><label>Email</label>: [email protected]</div>
    <button hx-get="/contact/1/edit" class="btn btn-primary">
    Click To Edit
    </button>
</div>
<!-- The edit: -->
<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" value="[email protected]">
  </div>
  <button class="btn">Submit</button>
  <button class="btn" hx-get="/contact/1">Cancel</button>
</form>
3 
hx-swap
4 
div
5 
outerHTML
6 
x-put
7 
res.render('index', { todos: filteredTodos, filter, itemsLeft: getItemsLeft() });
8 
hx-
9 
POST
10 
form(hx-post="/todos", hx-target="#todo-list", hx-swap="afterbegin", _="on htmx:afterOnLoad set #txtTodo.value to ''")
  input#txtTodo.new-todo(name="todo",placeholder='What needs to be done?', autofocus='')
11 
afterbegin
12 
on htmx
13 
form(hx-post="/todos/update/" + todo.id)
  input.edit(type="text", name="name",value=todo.name)
14 
hx-post
15 
app.post('/todos', (req, res) => {
  const { todo } = req.body;
  const newTodo = { 
    id: uuid(),
    name: todo, 
    done: false 
  };
  todos.push(newTodo);
  let template = pug.compileFile('views/includes/todo-item.pug');
  let markup = template({ todo: newTodo});
  template = pug.compileFile('views/includes/item-count.pug');
  markup  += template({ itemsLeft: getItemsLeft()});
  res.send(markup);
});
16 
newTodo
17 
Todo
18 
fetch()

The Anchor element (a) tags

S.no Anchor tag Content
1 Close Ad
2 infoworld
3 UNITED STATES
4 United States
5 United Kingdom
6 About Us
7 Contact
8 Republication Permissions
9 Privacy Policy
10 Cookie Policy
11 Copyright Notice
12 European Privacy Settings
13 Member Preferences
14 Advertising
15 Foundry Careers
16 Ad Choices
17 E-commerce Links
18 California: Do Not Sell My Personal Info
19 Home
20 Software Development
21 Matthew Tyson
22 What is HTMX?
23 Server-side HTMX
24 Client-side templating with HTMX
25 Conclusion
26 JavaScript
27 acceptance into the GitHub Accelerator
28 Carson Gross
29 this HTMX demo
30 DRY principle
31 React
32 examples
33 TODO example
34 Pug
35 here
36 Hyperscript
37 Spring Boot with Thymeleaf
38 Spring Boot with Django
39 a client-side template
40 REST is commonly misunderstood
41 JSON-ENC
42 thoughts on complexity
43 This example
44 Cloud computing is no longer a slam dunk
45 What is generative AI? Artificial intelligence that creates
46 Coding with AI: Tips and best practices from developers
47 Python moves to remove the GIL and boost concurrency
48 7 reasons Java is still great
49 The open source licensing war is over
50 HTML
51 Dark Horse Group, Inc.
52 InfoWorld
53 Copyright
54 CIO
55 Computerworld
56 CSO Online
57 Network World

Contact Us

If you have any inquiries or feedback, please don't hesitate to reach out to us at [email protected]. We will respond to your request as soon as possible. Thank you very much for your interest!

Quick Links

Country profiles