from Hacker News

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

by bitterblotter on 1/8/24, 1:03 AM with 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.

  • by recursivedoubts on 1/8/24, 3:50 AM

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

  • by nlstitch on 1/8/24, 11:17 AM

    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?

  • by philips on 1/8/24, 1:52 AM

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

  • by Towaway69 on 1/8/24, 7:47 AM

    > 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

  • by mseidl on 1/8/24, 10:11 AM

    Does this support ActiveX?

  • by nymanjon on 1/13/24, 5:45 PM

    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!

  • by aatd86 on 1/8/24, 5:31 AM

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

  • by johnnylambada on 1/8/24, 10:00 PM

    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.

  • by aitchnyu on 1/8/24, 5:05 AM

    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?

  • by TobyTheDog123 on 1/8/24, 6:05 AM

    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.

  • by pacifika on 1/8/24, 7:44 PM

    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.

  • by greatgib on 1/8/24, 7:38 AM

    @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

  • by imetatroll on 1/8/24, 9:53 AM

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

  • by ametrau on 1/8/24, 1:36 PM

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

  • by sroerick on 1/8/24, 3:41 AM

    This is very cool!

  • by yesco on 1/8/24, 10:00 AM

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

  • by Solvency on 1/8/24, 3:24 AM

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