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

[bitterblotter]

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]

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

[quickthrower2]

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)

[bitterblotter]

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

[tomberek]

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

[a_c]

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

[nlstitch]

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?

[Hendrikto]

> I'm kinda scared it's developer pool seems too small to hire devs from

It is very straightforward to pick up. Unless you hire code camp devs who only ever learned React, no actual CS topics, anybody should be productive within at most a week.

[infecto]

How to counter it. HTMX takes no more than half a day to pick up, probably quicker than that.

Keep in mind HTMX does not solve all scenarios, there are times when a SPA using a JS framework is required.

[ricardobeat]

> Stuff can get complex when you're using something like htmx

Interesting to hear that after a mention of Angular. Different ideas of complexity I guess - frameworks like it give you structure but complexity is still there, and probably orders of magnitude higher.

Ultimately you want FE devs that know the web stack well - JS, CSS, HTML, browser APIs. They will be able to pick the best tools & frameworks for the job. Something like HTMx is trivial to pick up.

[recursivedoubts]

Well, nothing succeeds like success, and htmx came in at #2 on the 2023 js rising stars:

https://risingstars.js.org/2023/en#section-framework

Just behind react and ahead of vue, svelte & angular. So the future looks promising in that regard (although I do expect it to drop back after the initial excitement dies down).

htmx is pretty simple, most web developers can pick it up in a day or so. It does require a mental shift for both developers as well as PM/architects in how development is done, because it pushes the organization more towards a full-stack paradigm, with developers owning whole features rather than "front end" and "back end". We have a book, free online, you can read, that will help with this:

https://hypermedia.systems

In addition to the docs (https://htmx.org/docs, which should take about an hour to read) we also have a bunch of essays on both philosophical & practical issues around htmx & hypermedia in general:

https://htmx.org/essays

htmx tries to be "scaleable" in that there are very few base ideas to the library and you can use only a few of them to implement useful behavior (e.g. lazy loading, to pull a section of a page out of the critical first-paint path, is two attributes: https://htmx.org/examples/lazy-load) but then it provides enough hooks and deeper features (e.g. events, event filters, etc.) that as you get deeper into it you can accomplish what you want.

finally, with respect to spaghetti code, this is a perennial danger in all software development. My admittedly limited experience with SPA libraries has not convinced me that they prevent spaghetti. w/htmx you want to focus your efforts on the back end and take advantage of whatever tools your server-side environment offers to properly factor your application. Because htmx allows you to pick any server side technology (SPAs put pressure on you to adopt JavaScript/TypeScript on the back-end, since you already have a large application written in them for the front-end) you have many more options & paradigms available for organizing the bulk of your application logic.

addendum: I should mention that i try to outline when htmx is a good choice for an application here:

https://htmx.org/essays/when-to-use-hypermedia/

htmx is a tool, a good tool in many cases, but just a tool, and i want to be clear that it isn't a silver bullet for web development

[nymanjon]

It's more about their back end skills as you would be hiring a back end dev who can do a little front end. No need to worry about having HTMX on their resume, just something like <Whatever back end language you like> and JavaScript. And most developers that are web developers qualify for that.

[sethammons]

I've not used it in a team environment. I'm used to working with an FE developer or team. The last time I did js, jquery was the new hotness. For me on a personal project, I tried react and svelte. Both we monsters for building a site that needed some js elements and interaction. I was able to get htmx working quickly and I've only had a couple of snags.

One neat benefit is that I am now able to unit test (well, unit integration) my views with a headless browser because my UI is served by my backend and not a separate service that has to run with all the yarn and npm bs.

TL;DR: I'm a backend person who struggled to pick up react over a weekend but picked up htmx in an hour. Your FE devs will have no problems with htmx.

They will have to become familiar with your system's templates syntax and how to work in the backend to organize their partials and components and may even have to decide how that should all be structured.

[philips]

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

[arcanemachiner]

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.

[sroerick]

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]

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]

would love to see this.

[Towaway69]

> 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_]

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

[mseidl]

Does this support ActiveX?

[adontz]

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

[devnull3]

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]

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]

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

[eterps]

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

[johnnylambada]

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]

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

keep your domain logic out of your controllers

[aitchnyu]

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]

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.

[mozey]

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]

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]

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]

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.

[AtlasBarfed]

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]

I wonder if HATEOAS is a good idea.

[nymanjon]

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

[pacifika]

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]

@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]

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

[datadeft]

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]

> 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?

[wellmet]

This is a good talk showing that.

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

[ametrau]

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

[sroerick]

This is very cool!

[yesco]

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

[nymanjon]

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

[jadbox]

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

[voicedYoda]

The king is dead. Long live the king

[PedroBatista]

How sweet it is.

[bitterblotter]

This guy gets it

[Solvency]

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

[recursivedoubts]

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

[geenat]

htmx is html but: all elements can make http requests, not just <a> and <form>

[diegof79]

You are currently using the successor of DHTML.

Dynamic HTML was a marketing term used by Netscape and Microsoft to refer to the combination of HTML, CSS, and JavaScript. Also under that umbrella term you have the introduction of the div tag for IE or the layer tag for NS4 (also NS4 included a JS version of CSS)

It was “dynamic” because you could do effects like hover menus using JS snippets or the first iterations of CSS (ohh the memories of my first Geocities pages). But, XHR APIs didn’t existed yet.

Edit: it seems that the marketing term was used mainly by Microsoft for IE.

[gardenhedge]

I don't think so. HTMX is a JavaScript library that abstracts the JavaScript part away from the user

[lagniappe]

htmx is intercoolerjs

[mahbran10]

Try Using techspypro, they know exactly what they are doing. Always make research before hiring a hacker and They are all scam. You can use “techspypro @ gmail com ” and you can be able to have some questions for them stay safe.