HTMJS Logo

HTML + Javascript

No frameworks, no weird HTML attributes, no script tags. RIP frontend development

React vs HTMJS

React

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>+</button>
            <button onClick={() => setCount(count - 1)}>-</button>
            <p>{count}</p>
        </div>
    );
}

ReactDOM.render(<Counter />, document.getElementById('counter'));

❌ What is it, HTML or JavaScript?
❌ It's not runnable; you cannot just put that in a browser.
❌ Setting up a build pipeline, downloading megabytes of dependencies for a subpar coding experience.
❌ The magic behind const [count, setCount] = useState(0); is incomprehensible to mere mortals.

HTMJS

<button onclick="c=document.getElementById('counter'); c.innerHTML = parseInt(c.innerHTML) + 1;">+</button>
<button onclick="c=document.getElementById('counter'); c.innerHTML = parseInt(c.innerHTML) - 1;">-</button>
<p id="counter">0</p>

✅ This code is timeless, pure love of html and Javascript.
✅ My granpa's Windows XP with IE6 can run this and my grandkids will be able to do the same.
✅ You can literally view the source of the file and see how it is coded.
✅ You learn web while reading the code, not a library that everyone will forget in 10 years.

HTMX vs HTMJS

HTMX

<div hx-ext="client-side-templates">
    <input
        type="text"
        name="username"
        id="htmx-username"
        placeholder="Enter GitHub username"
        onblur="updateHxGetAttribute()"
    />
    <button
        id="fetch-github-user-data"
        hx-trigger="click"
        hx-target="#github-user-data"
        hx-swap="outerHTML"
        hx-request='{"noHeaders": true}'
        handlebars-template="github-user-template"
    >
        Fetch GitHub User Data
    </button>
    <div id="github-user-data">User data will appear here...</div>

    <script id="github-user-template" type="text/x-handlebars-template">
        <div>
        <h3>{{name}} (@{{login}})</h3>
        <p><strong>Bio:</strong>
            {{#if bio}}{{bio}}{{else}}N/A{{/if}}</p>
        <p><strong>Location:</strong>
            {{#if location}}{{location}}{{else}}N/A{{/if}}</p>
        <img
            src="{{avatar_url}}"
            alt="Avatar"
            style="width: 100px; height: 100px;"
        />
        </div>
    </script>
    <script>
        function updateHxGetAttribute() {
        var username = document.getElementById("htmx-username").value;
        var button = document.getElementById("fetch-github-user-data");
        button.setAttribute(
            "hx-get",
            "https://api.github.com/users/" + username
        );
        htmx.process(button);
        }
    </script>
    </div>
User data will appear here...

❌ I wish I din't spend a few hours trying to figure out ALL HTMX limitation to make it work.
❌ Ok, React is not that bad now. This is right the type of DSL I'd like to avoid.
❌ There is still a lot of things happen magically an unexpectedly.

HTMJS

<input
    type="text"
    id="username"
    placeholder="Enter GitHub username"
/>
<button
    onclick="
        (async () => {
            const username = document.getElementById('username').value;
            const url = `https://api.github.com/users/${username}`;
            
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const user = await response.json();
    
                const resultDiv = document.getElementById('result');
                resultDiv.innerHTML = `
                    <h3>${user.name} (@${user.login})</h3>
                    <p><strong>Bio:</strong> ${user.bio || 'N/A'}</p>
                    <p><strong>Location:</strong> ${user.location || 'N/A'}</p>
                    <img src='${user.avatar_url}' alt='Avatar' style='width: 100px; height: 100px;'>
                `;
            } catch (error) {
                console.error('Fetch error:', error);
                document.getElementById('result').innerHTML = `<p style='color: red;'>Error: ${error.message}</p>`;
            }
        })()
    "
>
Fetch GitHub User Data
</button>

<div id="result">User data will appear here...</div>
User data will appear here...

✅ No need to worry about a template engine, look it is just javascript.
✅ NO magic or DSL, you read the code and understand what happens.

HTMZ vs HTMJS

HTMZ

<iframe
  hidden
  name="htmz"
  onload="setTimeout(() => document.querySelector(contentWindow.location.hash || null)?. replaceWith(...contentDocument.body.childNodes))"
  ></iframe>
<form action="./wat.html#htmz-result" target="htmz">
  <label> Try it </label>
  <button>click me</button>
</form>
<div id="htmz-result"></div>

❌ No objections here, actually. I just need a second more to understand how it works.

HTMJS

<label> Try it </label>
<button
  onclick="
    fetch('./wat.html')
    .then(response => response.text())
    .then(html => {
        document.getElementById('htmjs-result').innerHTML = html;
    })
    .catch(error => console.error('Error fetching HTML:', error));
    "
    >
  click me
</button>

<div id="htmjs-result"></div>

✅ Much easier to understand what's happening, isn't it?