8 ms·
Show HN: I made a HTMX Playground 100% in the browser
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 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.
- nymanjon 3y agoYou 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!
- sroerick 3y agoThis is very cool!
- mahbran10 3y ago[flagged]
- mahbran10 3y agoTry 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.
- philips 3y agoNice! I have been using maplibre with django and htmx. I should try and put an example up there to share with others.
- bitterblotter 3y agoThanks, 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 :)
- sroerick 3y agoI'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 3y agoI'm curious about why you use Django together with SQLAlchemy, instead of using the built-in ORM? Or is it just separate projects?
- sroerick 3y agoI'm using SQLAlchemy to access external data sources to build reports on. Essentially, I'm using it as a dumb BI connector (mostly to access a Databricks metastore), while my Django ORM manages any app information. I'm not sure it's the most elegant solution, but it has been pretty functional
- jsmeaton 3y agoUnless you’re writing raw sql, Django does not make it easy to build reporting type queries with the ORM so I’d suggest you’re probably doing the optimal thing here. Fun fact (and a bit of a brag, apologies), I was the contributor that added the “new” Expressions API with the intent of building a reporting platform on top of it. That platform never eventuated but I’ve still got lots of use out of those APIs.
- deleted 3y ago[deleted]
- Solvency 3y agoIs Htmx just the long overdue successor to DHTML that was all the hype in, say, 1997?
- recursivedoubts 3y agobelieve 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 https://hypermedia.systems
- dilyevsky 3y agoThis sort of sounds like turbolinks (or whatever it is called now)?
- recursivedoubts 3y agoTo an extent, htmx is the successor to intercooler.js, which was released in 2013 and which was a turbolinks-adjacent technology (although never really noticed by the 37Signals folks). htmx is a bit more focused on one core concept, generalizing hypermedia controls, than hotwire.dev is, and is a little less magic. Both are fine choices for a hypermedia driven application.
- subtra3t 3y agoI 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.
- recursivedoubts 3y agohey there, I'm the creator of htmx, and I really appreciate you making this! very cool!
- tomberek 3y agoAs a CEO of htmx, I second this appreciation. Well done!
- bitterblotter 3y agoLikewise man. In the face of avoiding JS, I think we've both taken one for the team here
- thisgoesnowhere 3y agoWait til you find out I'm using htmx with node.
- bitterblotter 3y agoMe when I buy a face mask and immediately ask people to spit in my eyes
- chatmasta 3y agoWait til he finds out what htmx is built with.
- recursivedoubts 3y agobased
- doublerabbit 3y 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.
- rideontime 3y ago
- aitchnyu 3y agoWonder 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?
- nymanjon 3y agoYes, here is one. https://github.com/jon49/htmx-todomvc 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.
- jonahx 3y agoThis 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 3y 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.
- nymanjon 3y agoI made an app doing this with an HTMX-like library with a total of 100 kB minified/zipped code. Not bloated at all. The code to make it work is about 10 kB. The rest is the code for the actual app.
- gedy 3y ago> This would be an over-engineered thing that HTMX explicitly tries to avoid in the first place. Yes, this is where I think a lot of folks who moan about "bloated JS frameworks", etc. really are just complaining they can't use their favorite (or only) language for web UI development.
- aatd86 3y agoMade with svelte?! Where are the purists of the MPA and their pitchforks? ;)
- eterps 3y agoI am an MPA purist, yet I fully realize that there exists a class of applications where SPA is the best choice ;)
- TobyTheDog123 3y agoI 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.
- nymanjon 3y agoHere you go! https://hyperview.org/ https://hyperview.org/
- MrDresden 3y agoMobile 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 3y agoI'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 :(
- EspressoGPT 3y agoI wonder if HATEOAS is a good idea.
- AtlasBarfed 3y agoI 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.
- greatgib 3y 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
- Towaway69 3y 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 https://github.com/Microsoft/monaco-editor/issues/246
- _andrei_ 3y agoMonaco works fine on mobile, just used it for https://tsdiagram.com https://tsdiagram.com
- Towaway69 3y agoOn 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.
- _andrei_ 3y agoSuper weird, I can type on Android, will try some other phones.
- 8organicbits 3y agoI am able to get the keyboard to pop up if I long press and select something, like copy, from the menu. But I assume they keyboard is supposed to open easier than that. I'm using Galaxy A50, Android 11, Firefox 121 (latest).
- yodon 3y agoAs 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.
- imetatroll 3y agoAre there any companies using htmx? Places where we can see examples of complex interaction?
- Joeboy 3y 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?
- deleted 3y ago[deleted]
- gday2020 3y agoI 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.
- trommlp 3y agoI think you mention a very valid point that is worth reiterating: Even when you enter territory where HTMX gets cumbersome for some reason, you can still use custom JS or some other library to work around it. I admit that I initially started to use HTMX to avoid JS, but I am now more comfortable than ever before to fall back to some lines of Javascript in the few cases where HTMX does not feel like a great fit to solve the problem at hand. Another great side effect (that you also mentioned) is how much cleaner the project is structured now. But I also realize that this might not apply to big projects.
- naasking 3y ago> I admit that I initially started to use HTMX to avoid JS, but I am now more comfortable than ever before to fall back to some lines of Javascript in the few cases where HTMX does not feel like a great fit to solve the problem at hand. Many people don't realize that great engineering happens under constraints. When you're faced with an empty project and the full power of JavaScript, you have 5,000,000 ways to do something and the chance to make a series of wrong choices that back you into a corner is high. By contrast, when you're working within a system that constrains the available choices, the possible design paths are considerably fewer and so the system becomes more understandable and maintainable, which makes for a very straightforward, comfortable dev experience.
- yesco 3y agoFinally a way to use HTMX as a SPA framework ;)
- nymanjon 3y agoI build HTMX-like offline-first SPA service worker apps for myself. It's actually quite nice :-).
- bitterblotter 3y agoThis guy gets it
- PedroBatista 3y agoHow sweet it is.
- voicedYoda 3y agoThe king is dead. Long live the king
- jadbox 3y agoYou laugh, but I've been using this technique to fully support offline behavior with htmx. (not a SPA though)
- deleted 3y ago[deleted]
- mseidl 3y agoDoes this support ActiveX?
- nlstitch 3y agoI 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?
- nymanjon 3y agoIt'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.
- Hendrikto 3y ago> 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.
- yellow_lead 3y agoI would go so far as to say if you can understand React, you can understand HTMX.
- danslo 3y agoIf you can understand HTML, you can understand HTMX.
- randomgiy3142 3y ago
- ametrau 3y agoDang this is why I keep coming back to HN. Nice one.
- pacifika 3y agoUsed 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.
- johnnylambada 3y agoI 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 3y agohttps://htmx.org/essays/splitting-your-apis/ https://htmx.org/essays/splitting-your-apis/ keep your domain logic out of your controllers
- johnnylambada 3y agoThanks 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.