> Yeah. I spent so much time learning svelte, then right before I started using it for production I found out htmx and hyperscript, felt like an idiot for learning svelte my journey as well last spring

thanks 1cg for making a bunch of us feel like idiots! 😁

Yup agreed thanks 😅

😀

Hello! I'm messing around with HTMX with Rust w/ Axum as a backend, and I am struggling a bit with how to pass input field values into the URIs for gets/posts. I have this modified version of the active search example

html
<input class="form-control" 
       name="search" 
       placeholder="Begin Typing To Search Users..." 
       hx-get="/search/:name" 
       hx-include="[name='search']"
       hx-trigger="keyup changed delay:500ms" 
       hx-target="#search-results" 
       >
<div id="search-results"></div>

and this is my handler and main function setting up the axum server

rust
async fn get_profile(Path(profile_name): Path<String>) -> Html<String> {
    let orders_example = vec![
        Item {
            id: 1,
            name: "Article banana".into(),
        },
        Item {
            id: 2,
            name: "Article apple".into(),
        },
    ];

    let profile_example = Profile {
        full_name: profile_name,
        items: orders_example,
    };

    let r = render!(PROFILE_TEMPLATE, profile => profile_example);
    Html(r)
}
//....
#[tokio::main]
async fn main() {
    let app = Router::new()
        .route(
            "/",
            get(home),
        )
        .route(
            "/search/:name",
            get(get_profile).post(get_profile),
        );

    axum::Server::bind(&"0.0.0.0:3000".parse().unwrap())
        .serve(app.into_make_service())
        .await
        .unwrap();
}

In its current state, it will show the name as ":Name". I know if I manually edit the path of the request to e.g. /search/joe the name will show up as Joe, but I struggle to see how I can feed the typed value from the input box to the URI.

I reckon I am missing something obvious, but if anyone has any helpful tips to nudge me in the right direction that would be much appreciated 🙂

if you have

<input name="q" hx-get="/search">

, htmx will send a request

GET /search?q=...

where

...

is the value entered in the input. basically it will be a query parameter so you handle that in the backend

Ah, ok, so instead of the handler function having input of Path, it needs Query instead (using the Axum types)?

i'm not familiar with Axum types 🙂 basically whatever is the typical way to get the value of a query parameter

yeah that sounds right. and you don't need :name in the path, since it's in the query data

I’ll try that then, thanks to you both for the help! 🙂

It worked! Had to update the name of the input to match the struct field in rust, but the query itself worked 🙂

https://github.com/djc/askama I’ve experimented a bit with askama and think this seems quite nice. Based on Jinja. It uses macros to generate rust code from HTML templates at compile time.

#909436816388669530 !

It was more in reference to the question about template libraries 🙂 still very early in experimentation, might have something to show at a later point!

You can also used Serde field attributes to keep names idiomatic in HTTP/HTML and Rust https://serde.rs/field-attrs.html

I casted out for rust templating recommendations on hn, with a couple responses: https://news.ycombinator.com/item?id=35920773#35922708 Besides the ones I mention, someone mentioned tera which has a jinja2-like templating syntax: https://tera.netlify.app/ I also found rstml, a moderately active fork of syn-rsx: https://github.com/rs-tml/rstml/tree/fixup-docs

I haven't really given this much thought, so it's not even mixed let alone baked, but instead of templating, wouldn't it be possible to build a fancy serde serializer that spits out html fragments of the required shape? Where the 'shape' is determined by preconfiguring the serializer (👋 👋 👋 ).

Do you mean kinda like how leptos allows you to write html like code in the rust code? So that you could write htmx like that?

No, I'm thinking more like you could define a struct to represent the data required for a particular html partial. Then all an htmx-serving route needs to do is create or retrieve the struct (from some combination of queries & processing on the backend), then serialize to html for the response. Eg in the typical 'todo' list app, the list view route would just be returning a retrieved

Vec<Todo>

(or whatever), but run through serde for the html response. Of course you'd need more boilerplate in there (containing divs, css classes and the like), which would be part of the custom serializer's configuration. Not thought through, as I say, so it could be a non-starter. But I might have a play with the concept myself.

This sounds like what Askama already does

Sorry for pictures, can’t get source format working on my phone discord now

Which corresponds to

I don’t have any new() functions here, but you could initialise this with a vec and return the html template

Askama was on my list to check out. Presumably in Askama you have to use template looping constructs etc? I was thinking of something akin to this pseudocode-ish:

rust
#[derive(Serialize)]
struct Todo {
  id: usize,
  content: String,
  .. etc
}

fn axum_handler() -> impl IntoResponse {
    // probably passed in as State
    let se = serde_htmx::Builder::new()
     .div_container()
     .css_class("class-name")
     .build();

   let todos = query_todos();

   Html(se.to_html(todos))
}

The serializer would take care of creating

<ul><li></li></ul>

etc (defaults + config if required). No template syntax needed. Is something like that possible with Askama?

Ah, I see what you mean

No don’t think that is possible, but I haven’t used it extensively, just dipped my toes in it. It uses template looping constructs as you say. It can determine errors in the html template file

OK thanks. Might be an interesting direction for me to explore anyway.

Maybe stpl or markup could work for you. To me, they seem more in line with your code snippet (haven't used either unfortunately): https://github.com/dpc/stpl https://github.com/utkarshkukreti/markup.rs As far as i know/ understand, Askama always expects a template source that is effectively not Rust code (see https://djc.github.io/askama/creating_templates.html#the-template-attribute)

Oh I wasn't so much looking for a library; rather considering writing a serializer myself that I could use in something like the way I described above. I thought it might make it very fast & ergonomic to create axum routes to serve html fragments to htmx clients. Unfortunately the more I sketch ideas out, the less viable it seems (to cut a long story short - the required 'Builder' ends up so large & complex that I might as well just use templates). Anyway, I'll have a look at those links. Thanks.