Posts tagged: htmx

💭 World's easiest Live dashboard with htmx - YouTube

2025-03-29T15:04:45Z

Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

youtube.com

Damn he makes this easy. I did not know about hx-select. yes there is waste in requesting the entire thing every 5s, but damn that was easy to get life reload. I’ve only done very specific backend endpoints, built pages up from partials, made endpoints for partials. keeping this one in my back pocket.

I’m just kind of amazed that he could do this all in html without touching the backend or js, typically things like this require one or the other. Yes js is running, but no other js library I’m aware of lets you do this.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 How to configure base url for all requests using HTMX? - Stack...

2024-12-30T16:25:49Z

External Link

stackoverflow.com

Today I learned how to configure the baseurl for htmx using the tag. This is pretty handy to be able to configure different baseurls.

  <base href="<scheme>://<netloc>/api/v1/">
  <button hx-post="clicked"
       hx-trigger="click"
       hx-target="#parent-div"
       hx-swap="outerHTML">
    Click Me!
  </button>

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 FastHX

2024-07-10T12:53:15Z

FastHX - FastHX

volfpeter.github.io

Very interesting approach to htmx and fast api. It uses separate decorators for returning template partials and json that can be stacked to include both options on a single route. The templates are explicitly set in the decorator. Separate decorators are used for full page and partial pages. I don’t see an example of full and partial pages being combined. I think the demo app must be behaving in a spa like fashion where it does not get all of the data when it calls index and index will ask for user-list.

Definitely going to keep my eye on this project and ponder on it.

from fastapi import FastAPI
from fastapi.templating import Jinja2Templates
from fasthx import Jinja
from pydantic import BaseModel

# Pydantic model of the data the example API is using.
class User(BaseModel):
    first_name: str
    last_name: str

# Create the app.
app = FastAPI()

# Create a FastAPI Jinja2Templates instance and use it to create a
# FastHX Jinja instance that will serve as your decorator.
jinja = Jinja(Jinja2Templates("templates"))

@app.get("/")
@jinja.page("index.html")
def index() -> None:
    ...

@app.get("/user-list")
@jinja.hx("user-list.html")
async def htmx_or_data() -> list[User]:
    return [
        User(first_name="John", last_name="Lennon"),
        User(first_name="Paul", last_name="McCartney"),
        User(first_name="George", last_name="Harrison"),
        User(first_name="Ringo", last_name="Starr"),
    ]

@app.get("/admin-list")
@jinja.hx("user-list.html", no_data=True)
def htmx_only() -> list[User]:
    return [User(first_name="Billy", last_name="Shears")]

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 FastHX

2024-07-10T12:53:15Z

FastHX - FastHX

volfpeter.github.io

Definitely going to keep my eye on this project and ponder on it.

from fastapi import FastAPI
from fastapi.templating import Jinja2Templates
from fasthx import Jinja
from pydantic import BaseModel

# Pydantic model of the data the example API is using.
class User(BaseModel):
    first_name: str
    last_name: str

# Create the app.
app = FastAPI()

# Create a FastAPI Jinja2Templates instance and use it to create a
# FastHX Jinja instance that will serve as your decorator.
jinja = Jinja(Jinja2Templates("templates"))

@app.get("/")
@jinja.page("index.html")
def index() -> None:
    ...

@app.get("/user-list")
@jinja.hx("user-list.html")
async def htmx_or_data() -> list[User]:
    return [
        User(first_name="John", last_name="Lennon"),
        User(first_name="Paul", last_name="McCartney"),
        User(first_name="George", last_name="Harrison"),
        User(first_name="Ringo", last_name="Starr"),
    ]

@app.get("/admin-list")
@jinja.hx("user-list.html", no_data=True)
def htmx_only() -> list[User]:
    return [User(first_name="Billy", last_name="Shears")]

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 htmx ~ The response-targets Extension

2024-04-30T18:00:54Z

</> htmx ~ The htmx Response Targets Extension Extension

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypert...

htmx.org

The htmx response-targets extension allows me to respond to errors from the backend and do normal htmx swaps.

Note

by default htmx will only swap on 200 and 300 responses

Load the extension in head

<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/response-targets.js"></script>

Use the extension on an endpoint that might return a 400.

<div hx-ext="response-targets">
    <div id="response-div"></div>
    <button hx-post="/register"
            hx-target="#response-div"
            hx-target-5*="#serious-errors"
            hx-target-404="#not-found">
        Register!
    </button>
    <div id="serious-errors"></div>
    <div id="not-found"></div>
</div>

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

jinja loop variable and htmx

2024-04-06T20:47:13Z

jinja has a loop variable that is very handy to use with htmx. Whether you want to implement a click to load more or an infinite scroll this loop variable is very handy.

{% for person in persons %}
<li
{% if loop.last %}
    hx-get="{{ url_for('infinite', page=next_page) }}"
    hx-trigger="intersect once"
    hx-target="#persons"
    hx-swap='beforeend'
    hx-indicator="#persons-loading"
{% endif %}
    {{ person.name.upper() }} -
    {{ person.phone_number }}
</li>
{% endfor %}

Now for every chunk of contacts that we load we will trigger the infinite scroll by loading more once the last one has intersected the screen.

💭 htmx ~ Locality of Behaviour (LoB)

2023-10-28T01:11:56Z

</> htmx ~ Locality of Behaviour (LoB)

Carson Gross explores the Locality of Behaviour (LoB) principle, which emphasizes making the behavior of code units obvious on inspection to enhance maintainability. He discusses the tradeoffs betw...

htmx.org

Interesting principle here. What a great example, If I’m looking at the second jQuery example, I have to dig into dev tools or make some assumtions that this team uses jQuery, and selects by id, therefore I can grep for $("#d1").

Consider two different implementations of an AJAX request in HTML, the first in htmx:

<button hx-get="/clicked">Click Me</button>


> and the second in jQuery:

``` js
  $("#d1").on("click", function(){
    $.ajax({
         /* AJAX options... */
    });
  });

<button id="d1">Click Me</button>

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 sysid/sse-starlette

2023-10-12T19:14:45Z

GitHub - sysid/sse-starlette

Contribute to sysid/sse-starlette development by creating an account on GitHub.

GitHub · github.com

sse-FastAPI.">starlette provides server sent events for startlette and FastApi. I’m evaluating for use with htmx.

Installation: #

pip install sse-starlette

Usage: #

import asyncio
import uvicorn
from starlette.applications import Starlette
from starlette.routing import Route
from sse_starlette.sse import EventSourceResponse

async def numbers(minimum, maximum):
    for i in range(minimum, maximum + 1):
        await asyncio.sleep(0.9)
        yield dict(data=i)

async def sse(request):
    generator = numbers(1, 5)
    return EventSourceResponse(generator)

routes = [
    Route("/", endpoint=sse)
]

app = Starlette(debug=True, routes=routes)

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000, log_level='info')

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 teej dv 🔭 on X: "Hypermedia fixes this HATEOAS gonna hate" / X

2023-10-05T01:13:37Z

External Link

X (formerly Twitter) · twitter.com

HATEOAS gonna hate. More and more htmx seems like the js library for backend devs. So rather than making 55 rest calls here, just make an endpoint that does what you want it to do with one, or a few requests.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 htmx ~ The disable-element Extension

2023-09-02T17:02:58Z

</> htmx ~ The disable-element Extension

v1.htmx.org

An extension to disable elements during flight of an htmx request, Looks super useful for things like a create or delete button where the server would end up with an error if you double delete or double create. This eliminates an error path that the user might see under normal use of the ui.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 htmx ~ hx-indicator Attribute

2023-09-02T16:59:30Z

</> htmx ~ hx-indicator Attribute

The hx-indicator attribute in htmx allows you to specify the element that will have the `htmx-request` class added to it for the duration of the request. This can be used to show spinners or progre...

htmx.org

The htmx-request class is added to htmx-target elements. You can target this css selector to create loading state throbbers.

By default the target element will the self, but you can use the typical htmx css selector to select which element will recieve the htmx-request class while the request is running.

The only way to override the name of the class is through config.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 The Truth About HTMX | Prime Reacts - YouTube

2023-09-01T19:02:47Z

HTMX | Prime Reacts" playlabel="Play: The Truth About HTMX | Prime Reacts">

Prime concisely made sense of why htmx is so awesome compared to what has become modern reactive web dev in 2 minutes. I had never thought of it this way and it’s incredible.

One thing I have comepletely missed out on with my use of htmx is setting the disabled state while the server is working, what a genius move!

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 htmx ~ Examples ~ Updating Other Content

2023-08-26T01:03:10Z

</> htmx ~ Examples ~ Updating Other Content

htmx.org

Three ways to support updating other content. Fantastic article walking through the different ways to update other parts of the screen using htmx.

In htmx there is no 2 way data binding, the dom is your state, and if you have elements derived from the same data on the screen in different places you need to think about how to keep them in sync.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 python - How to use a Pydantic model with Form data in FastAPI...

2023-08-08T13:46:19Z

External Link

stackoverflow.com

I went down the route of leveraging the json-enc extention in htmx, but later realized that this completely breaks browsers/users who do not wish to use javascript. While most of the web would feel quite broken with javascript disabled, I don’t want to contribute to that without good reason.

Taking a second look into this issue, rather than using json-enc, and using as_form to get form data into a model keeps the nice DX fo everything being a pydantic model, but the site still works without js. with js htmx kicks in, you get a spa like experience by loading partials onto the page, and without, you just get a full page reload.

the implementation #

copied from https://stackoverflow.com/questions/60127234/how-to-use-a-pydantic-model-with-form-data-in-fastapi

import inspect
from typing import Type

from fastapi import Form
from pydantic import BaseModel
from pydantic.fields import ModelField

def as_form(cls: Type[BaseModel]):
    new_parameters = []

    for field_name, model_field in cls.__fields__.items():
        model_field: ModelField  # type: ignore

        new_parameters.append(
             inspect.Parameter(
                 model_field.alias,
                 inspect.Parameter.POSITIONAL_ONLY,
                 default=Form(...) if model_field.required else Form(model_field.default),
                 annotation=model_field.outer_type_,
             )
         )

    async def as_form_func(**data):
        return cls(**data)

    sig = inspect.signature(as_form_func)
    sig = sig.replace(parameters=new_parameters)
    as_form_func.__signature__ = sig  # type: ignore
    setattr(cls, 'as_form', as_form_func)
    return cls

And the usage looks like

@as_form
class Test(BaseModel):
    param: str
    a: int = 1
    b: str = '2342'
    c: bool = False
    d: Optional[float] = None


@router.post('/me', response_model=Test)
async def me(request: Request, form: Test = Depends(Test.as_form)):
    return form

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 htmx ~ The json-enc Extension

2023-07-28T14:59:37Z

External Link

htmx.org

json-enc extension converts url encoded form values into json encoded data, this is very useful for fastapi to have the same interface for htmx and curl type of interfaces.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 htmx ~ Documentation

2023-07-28T14:59:37Z

</> htmx ~ Documentation

htmx.org

A complete reference of all of the htmx swapping methods.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 htmx ~ The client-side-templates Extension

2023-07-28T14:59:37Z

External Link

htmx.org

Using templates with htmx requires the client-side-templates extension, and the template engine to be loaded in a <script> tag.

example htmx using templates.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://unpkg.com/htmx.org"></script>
  <script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
  <script src="https://unpkg.com/mustache@latest"></script>
</head>
<body>
  <div hx-ext="client-side-templates">
    <button hx-get="https://jsonplaceholder.typicode.com/todos/1"
            hx-swap="innerHTML"
            hx-target="#content"
            mustache-template="foo">
      Click Me
    </button>

    <p id="content">Start</p>

    <template id="foo">
      <p> {% raw %}{{userID}}{% endraw %} and {% raw %}{{id}}{% endraw %} and {% raw %}{{title}}{% endraw %} and {% raw %}{{completed}}{% endraw %}</p>
    </template>
  </div>
</body>
</html>

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 HTMX looks pretty neat #coding #javascript - YouTube

2023-07-28T14:59:37Z

HTMX looks pretty neat #coding <a href=" tags="" javascript="" "="" class="hashtag-tag" data-tag="javascript" data-count="4" data-reading-time="6" data-reading-time-text="6 minutes">#javascript" playlabel="Play: HTMX looks pretty neat #coding #javascript">

Love the poling example with hx-trigger=‘every 1s’.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts