Show HN: I made a HTMX Playground 100% in the browser

Show HN: I made a HTMX Playground 100% in the browser(lassebomh.github.io)

482 points by bitterblotter 2 years ago | 118 comments

I recently dug up an old project in an attempt to improve on it. It's a code sandbox for playing around with HTMX in the browser, that runs a mock server within the sandbox iframe. The server "framework" is loosely based on Django, so if you're familiar with Django, you'll immediately understand what's going on.

I recommend clicking through the examples.

Github repo: https://github.com/lassebomh/htmx-playground

Probably my favorite part is the lack of HTMX specific code. It's designed to mimic the client and server, but really nothing else. In principle, this means that it is agnostic to whatever frontend framework is being used.

Known problems: Limited mobile support, Ace Editor (should just be Monaco) and lack of proper error outputs.

Feel free to give feedback, suggestions or questions.

I learned a lot when making it, and I hope you'll something about HTMX! Happy tinkering.

recursivedoubts 2 years ago |

hey there, I'm the creator of htmx, and I really appreciate you making this! very cool!

quickthrower2 2 years ago | |

Thankyou for the awesome library! I have a question.

Is there a way to use HTMX with minimal server side changes. Specifically if I have an existing page that you fill in a form and submit and response is of course the entire page. I think it would be cool to tell htmx that the whole page is being returned BUT I only want to update #my-form and that way you don’t need any “if htmx request” kinda stuff on the server.

This is for people who care about their site working without JS. But also it allows you to have a single backend endpoint to handle multiple things (for example comments, sign up to email, like button, all in one)

pondidum 2 years ago | | |

If I understood correctly, you can achive this with `hx-target` and `hx-select` - I'm doing this in an app to replace an editor content based on which link is clicked.

- https://htmx.org/attributes/hx-select/ - https://htmx.org/attributes/hx-target/

broomhall 2 years ago | | |

I'm not sure about HTMX, but this kind of behaviour is what Unpoly https://unpoly.com/ excels at

I played with it recently and it was pretty easy to enhance a completely non-js CRUD type app and have it fall-back gracefully. Seems a similar concept to HTMX but has a more batteries included / high-level approach.

recursivedoubts 2 years ago | | |

in addition to the other tools mentioned in sibling comments, there is a multi-swap extension:

https://htmx.org/extensions/multi-swap/

naasking 2 years ago | | |

hx-boost is the simplest way to do this, but it updates the body content rather than the form. In most cases this will probably be effectively the same.

throwaway167 2 years ago | | |

hx-target="closest <your element here>" hx-swap="outerHTML swap:1s" hx-push-url="false"

That'll return whatever partial thing you want to return and replace <your element here> (with 1sec effect).

bitterblotter 2 years ago | |

Likewise man. In the face of avoiding JS, I think we've both taken one for the team here

doublerabbit 2 years ago | | |

> In the face of avoiding JS, I think we've both taken one for the team here

In which, you still need to include a JS file. I'd still count that as Javascript.

thisgoesnowhere 2 years ago | | |

Wait til you find out I'm using htmx with node.

tomberek 2 years ago | |

As a CEO of htmx, I second this appreciation. Well done!

a_c 2 years ago | |

Haven’t tried htmx. Have you heard of phoenix liveview? Are they similar concepts?

recursivedoubts 2 years ago | | |

htmx is lower level than the various liveview implementations

this makes htmx more work, in general, to accomplish things but also less opaque

htmx is laser focused on generalizing hypermedia controls in HTML (anchors & forms)

nlstitch 2 years ago |

I was seriously thinking about using HTMX myself, but I'm kinda scared it's developer pool seems too small to hire devs from.

I'm used to proprietary frameworks, in my case I worked with intershop which uses isml. (this is comparible to something like thymeleaf). In recent years we tried to move away from this approach and go to the angular front end Stack because it's easier to hire a dedicated frontend developer than it is to hire a specialized fullstacker. Stuff can get complex when you're using something like htmx and developers don't want to fight spaghetti monsters. You don't want you backend guys to be the bottleneck, e.g. when FE just creates HTML and the backend has to tie it all together.

My question is; has HTMX thought about the pitfalls like this, and how do you counter it?

philips 2 years ago |

Nice! I have been using maplibre with django and htmx. I should try and put an example up there to share with others.

arcanemachiner 2 years ago | |

Hey same! I made https://ratethispad.com and it was a lot of fun to make. (Nobody uses it though...)

I would love to see your project as well.

SushiHippie 2 years ago | | |

Would be cool if either the zoom level I need to see reviews would be smaller (more zoomed out), or if there is a list of the reviews that exist on this page.

Currently, as there are probably not many reviews on that site it is near impossible to see an example of a review.

sroerick 2 years ago | |

I'd like to see this. I don't have anything I can share publicly, but I've been making stuff with Django, htmx, SQLAlchemy and plotly and I've found it to be pretty robust

bitterblotter 2 years ago | | |

I'm curious about why you use Django together with SQLAlchemy, instead of using the built-in ORM? Or is it just separate projects?

bitterblotter 2 years ago | |

Thanks, and you are very welcome to post it here. Also, if you or anyone else wants to adapt more of the official examples, create an issue with the link, and I'll add them to the repo :)

greenie_beans 2 years ago | |

would love to see this.

Towaway69 2 years ago |

> Limited mobile support, Ace Editor (should just be Monaco) and lack of proper error outputs.

Monaco doesn't work on mobile by design, so people use Ace on mobile.

At least the last time I checked GitHub[0].

[0] https://github.com/Microsoft/monaco-editor/issues/246

_andrei_ 2 years ago | |

Monaco works fine on mobile, just used it for https://tsdiagram.com

Towaway69 2 years ago | | |

On my android, I cannot type - the keyboard does not open. So it's read-only on my mobile.

I think that was the problem with Monaco on mobile: the keyboard never worked correctly. That was my experience.

Edit: I don't want to complain, Monaco is superb editor and it would be super if it worked on mobile consistently. But from the github issue, it appears that Microsoft doesn't seem to want to change that.

yodon 2 years ago | | |

As someone who just hit tsdiagram for the first time on my phone, I'll suggest you'd be much better off with an explanatory landing page.

I can see just enough editor UI stuff on my phone to strongly suspect I'm in your target userbase, but because of screen size issue I can not see enough to have any idea what tsdiagram actually does.

bbkane 2 years ago | | |

What did you use to generate that lovely ERD-style diagram?

mseidl 2 years ago |

Does this support ActiveX?

adontz 2 years ago | |

OMG, I'm so old I understand this joke. This is sad actually.

devnull3 2 years ago | |

OMG! I had a flashback. Do any of you remember HP Quality Center?. Its early versions had entire UI in activeX and I remember a bunch of progress bars installing DLLs.

nymanjon 2 years ago |

You could use a Service Worker to do this and then have multiple pages in a different tab to be able to navigate around. It would be too difficult to do that. Then you could just use native JavaScript or whatever the user wants for the pages to be generated.

This is cool though. Good job!

aatd86 2 years ago |

Made with svelte?! Where are the purists of the MPA and their pitchforks? ;)

eterps 2 years ago | |

I am an MPA purist, yet I fully realize that there exists a class of applications where SPA is the best choice ;)

johnnylambada 2 years ago |

I love the concept behind htmx & started reading the book today. But every time I think about using it, I remember that I'll eventually have to support native mobile apps as well and I'll be completely re-writing not only my frontend but much of my backend to do it. I know about hyperview.org but a react-native app won't really cut it for the use cases I'm interested in.

recursivedoubts 2 years ago | |

https://htmx.org/essays/splitting-your-apis/

keep your domain logic out of your controllers

johnnylambada 2 years ago | | |

Thanks for the link. I read both Carson's (your?) article and Max's. In general I see the point, but I think what's missing is a htmx-specific Android/iOS app template. Something that wraps a WebView but perhaps preprocess and reacts to mobile specific html tags or special hx-mobile-xxx attribues to existing tags that know how to do special mobile things. I'll have to think more about this.

aitchnyu 2 years ago |

Wonder if there is there anybody who is making an offline app with request-reponse with html(with HTMX) and a virtual server defined in a service worker?

jonahx 2 years ago | |

This is a great question.

I love htmx but in situations that have to work offline I can't use it. Would be a great hack to be able to just run your server code in a worker.

WA 2 years ago | | |

> Would be a great hack to be able to just run your server code in a worker.

This is exactly why some people build heavy offline-first SPAs in JS. HTMX tries to avoid this entirely. Conceptually (seen from the perspective of HTMX), it makes zero sense to put the server code in a worker and run a client-server architecture in the client‘s browser.

This would be an over-engineered thing that HTMX explicitly tries to avoid in the first place.

datadeft 2 years ago | | |

I am not sure if I understand the definition of offline here. HTMX has graceful degradation options. What else could you do when the client is offline?

mozey 2 years ago | |

I'm working on a server/backend for htmx that's intended to run as a local service beside the browser. In theory you could do this with any server stack that is self host-able. My goal is to produce a single binary with no external service dependancies. I'm using Go, and a lot of the components are readily available, e.g. self updating local service, replicated database, etc. It's easy to cross-compile for different target OS and architectures. As an alternative to building everything into the browser, and assuming you're able to run a separate process, this approach makes a lot of sense to me. It would be great if Go had something similar to Deno's permission management though...

nymanjon 2 years ago | |

Yes, here is one. https://github.com/jon49/htmx-todomvc

I use this pattern for all my personal apps. I use my own little htmx-like library though. But wouldn't be that hard to swap in HTMX.

TobyTheDog123 2 years ago |

I wonder if it would be a good idea to move the whole HATEOAS thing towards things like desktop and mobile apps. Might be a fun experiment.

MrDresden 2 years ago | |

Mobile dev here. If you are talking about native mobile then I'v played around with using HATEOAS with native code in the past (around ~2013).

It works fine but is obviously not as flexible as on the web. It also does require that each linkable screen be developed in a strict black box fashion.

It was a fun exercise to try out, but not sure what the value of using it in production would be.

whstl 2 years ago | | |

I've found that HATEOAS is actually quite good for CRUD. You "link" to "lists" and items, and the information in the responses is enough to assemble pages, forms, other lists.

This way you only gotta build the "abstraction" in the app itself, the real structure of each page is entirely in the APIs.

Thing is, this saves money at the start, but people obviously want more customisation than is appropriate here. And as more and more pages become bespoke, hypermedia stop making sense :(

AtlasBarfed 2 years ago | |

I have only ever seen HATEOAS as an abstract concept, but never actually seen a real UI where I think "wow that is actually an improvement in user interaction".

REST was a welcome simplification of the SOAP monstrosities, but it comes with a lot of dogma. REST aligns natural user concepts with data with the service architecture, so I see its purpose fundamentally.

HATEOAS seemed like a product of people wanting even more dogma / pretentious drivel in architecture meetings without really concentrating on if the user experience is improved by the model.

Does anyone have a HATEOAS UI example that highlights why you would use it as some founding principle? I mean fundamentally each page has links to "what to do next", and my impression of HATEOAS is a blinged up way of trying to bring some sort of similar state model to REST service calls.

EspressoGPT 2 years ago | |

I wonder if HATEOAS is a good idea.

nymanjon 2 years ago | |

Here you go! https://hyperview.org/

pacifika 2 years ago |

Used it for work today. It works well and will keep using it going forward although I might make a php based version.

I did lose my work a few times when I tried to paste the json into they url load field (it requires an url) and when I couldn’t cleanvthe network request browser (feature request). Great work.

greatgib 2 years ago |

@bitterblotter there is a typo in the description on the main page I think: "It will run a mock server that intersepts outgoing"

Intersepts => intercepts

imetatroll 2 years ago |

Are there any companies using htmx? Places where we can see examples of complex interaction?

datadeft 2 years ago | |

Not sure what is considered complex. I have a login flow and search interface implemented in HTMX and Rust. Polishing the last few rough edges and when it is done I a writing a detailed article about it.

Joeboy 2 years ago | |

> complex interaction

Yeah, htmx looks endearingly simple but I worry we might be painting ourselves into a corner. Not sure what happens when you need more "bespoke" functionality. I didn't really look into it at all, maybe I don't need to worry?

gday2020 2 years ago | | |

I have been using HTMX with Django for over 3 years on multiple (client) projects.

In 99% of the cases, it works just fine. In the 1% of highly interactive components that aren’t working well with HTMX, you can just put in some Vue or alpineJS. whichever works best for you.

I have migrated all of my own and client apps from a decoupled Vue/django setup to HTMX. It was a ton of work, but it’s awesome having a clean setup with no node modules.

wellmet 2 years ago | |

This is a good talk showing that.

https://youtu.be/3GObi93tjZI?si=3AvdRpuWTujAGROD

ametrau 2 years ago |

Dang this is why I keep coming back to HN. Nice one.

sroerick 2 years ago |

This is very cool!

yesco 2 years ago |

Finally a way to use HTMX as a SPA framework ;)

nymanjon 2 years ago | |

I build HTMX-like offline-first SPA service worker apps for myself. It's actually quite nice :-).

jadbox 2 years ago | |

You laugh, but I've been using this technique to fully support offline behavior with htmx. (not a SPA though)

voicedYoda 2 years ago | |

The king is dead. Long live the king

PedroBatista 2 years ago | |

How sweet it is.

bitterblotter 2 years ago | |

This guy gets it

Solvency 2 years ago |

Is Htmx just the long overdue successor to DHTML that was all the hype in, say, 1997?

recursivedoubts 2 years ago | |

believe it or not I was around back then and, no, htmx is not the successor to DHTML, which was very JavaScript heavy

htmx is an attempt to generalize the two core hypermedia controls in HTML (anchors & forms). It does this by making any element able to respond to any event by issuing any type of HTTP request and then placing the returned HTML anywhere (and in any manner) in the DOM. This last idea is called transclusion and is probably the most important part, because it lets you build much more dynamic user interfaces within the standard HTML/hypermedia paradigm.

we have a book here if you are interested:

https://hypermedia.systems

subtra3t 2 years ago | | |

I know this isn't something the authors can fix just like that, but shipping and import duties mean that the hard cover book is about as expensive for me as the smartphone I'm writing this on ($96.32 for a Samsung Galacy M04 as compared to $96.6 for the book).

The book is great though. If you can't afford it I highly recommend reading it on the website. I haven't gotten through the last section just yet due to family obligations unfortunately but I look forward to finishing it soon.