I have been surprised at how fast JS is in the browser, I've expected to have to make stuff more complicated for perf reasons and I havent

Do you think it's possible to make something like editor.js (https://editorjs.io/) in htmx?

Perhaps htmx is unsuitable for this

or not worth it

🤔

@miniature-lizard-24702 Why would you want something that is purely client side to interact with the server?

this sounds to me like one of those cases where it makes little sense to use something like htmx.

editor.js and it's plugins are nice... but it's a lot ofjavascript and I really dont like javascript. But not using it will probably bring me more pain...

htmx is javascript too 🙂 when it comes down to it

hmm, it's a case of which choice will I dislike more I guess

sure but I can use that to do alot more than editor.js

I can do more for less

but how do you expect an editor to work with htmx or alike tech? It doesn't sound very practical to send every keypress, update the whole thing?

I wouldn't but I can periodically save content of a block or the entire document by posting to an endpoint

it's a block/cell based editor library

I think I could recreate most of it except for the context menu when you highlight text

I was just curious if anyone has built something like this in htmx

maybe I should ask in #864934037381971988 specifically?

Hi, I have a question about using htmx with bootstrap 5 modals. There is this example on htmx website: https://htmx.org/examples/modal-bootstrap/ I have tried it and it works, that is, it shows/closes the modal. But it substitutes some custom javascript for the Bootstrap 5 javascript, so the behaviour of the modal is not as smooth (it just pops up, no slide-ins) as in the rest of my app (still running on jquery + Bootstrap, using native Bootstrap javascript to open and to close the modals). So I was wondering if it would be possible to use the native Bootstrap javascript instead of subsituting it with something else?

I am almost there... but not quite. This code fires the modal the smooth slidy boostrap way: Add data function getForm() { htmx.ajax('GET', '', '#modals-here').then(() => { var addModal = new bootstrap.Modal(document.getElementById('add_meeting'), {}); addModal.show(); }); } And then I fill in the form and it is submitted, I cannot close the modal "the bootstrap way": function sendRequest() { htmx.ajax('POST', '', '#meeting_1').then(() => { modal = bootstrap.Modal.getInstance(addModal); modal.hide(); }); } -- when I submit the form, the htmx does it's job: sends the data, receives it, adds it to the DOM, but then I get the error in Javascript console: "Uncaught (in promise) ReferenceError: addModal is not defined" So I guess that has to do with scope: the addModal variable created in the getForm() function is not available in sendRequest() function... Oh javascript I rather hate you...

OK, anyway, I had this script with modals nicely made in jQuery and I am looking for a more modern replacement: could someone point me to some readily-made example? This is the routine: The button fires up an ajax request to the server which gets the data and fires up the form in a modal; I fill in the form and the jquery validation library does not allow to submit it before it is valid; once submitted, the modal stays open (with a spinner indicating progress in the button) while the request is processed by server; if successfull response is received, the modal is closed, the data is replace on the page without reload, and the sweetalert notification let's me know it was success. If server returns an error, the modal dialog stays open and a sweetalert notification tells me there is a problem and what it is. If I could replicate it all without much redesign of the app in htmx (+alpine.js?), that would be great...

Does anyone have any links to articles about hypermedia/HATEOAS/Rest not already linked on htmx.org?

https://hypermedia.systems in case you haven’t already seen it

The Part: “Hypermedia Concepts” is a lot of concepts combined and explored, in order, which I thought was expertly done

I can't find a good solution for this. DOMParser (and the tag) just doesn't like table elements outside of tables, at all (and will convert their content to text nodes). The only thing that's kinda sortof worked is wrapping everything in a specially marked (i.e. Containing a special attribute) element, then domparser throws all other nodes outside and wraps the loose tr/th/td elements appropriately. It's pretty hit or miss though. Maybe htmx 2.0 could have something like a requirement to place a Record Separator (0x1e) ASCII character between the normal content to be replaced and each OOB swap element.

How do you folks approach UI testing with the hypermedia model? HTMX etc adds interactivity to UIs, so often the state of UI testing in fullstack frameworks (Django, Symfony...) is they allow inspecting the HTML of a response, often by selecting elements using CSS selectors. This is OK for static functionality, eg "check that there's a link with this name and href", but then if we do decide to write some JS, we need to test that as well. In the SPA world, folks have created fantastic tools such as https://github.com/testing-library/dom-testing-library to help test UIs with confidence, by building accessibility into the testing workflow and avoiding to depend on implementation details (this is my main concern with CSS selector-based testing) Unfortunately, this kind of tool assumes you've got a JS SPA framework of some kind to plug your component into. In the hypermedia world, most often we've got templates with sprinkles of interactivity, not "JS components"

Is there a way to optimize the following select-oob? Maybe add little DRY here so my eyes don't die:

html
<form hx-select-oob="#st-colors-search:morph:outerHTML,#st-impressionss-search:morph:outerHTML,#st-cpcs-search:morph:outerHTML,#st-ctrs-search:morph:outerHTML,#st-spends-search:morph:outerHTML,#st-orderss-search:morph:outerHTML,#st-saless-search:morph:outerHTML,#st-acoss-search:morph:outerHTML,#st-roass-search:morph:outerHTML,#st-clickss-search:morph:outerHTML,#st-cvrs-search:morph:outerHTML,#st-unitss-search:morph:outerHTML,#st-startDates-search:morph:outerHTML,#st-endDates-search:morph:outerHTML,#st-portfolios-button-selected:morph:outerHTML,#st-campaigns-button-selected:morph:outerHTML,#st-adGroups-button-selected:morph:outerHTML,#st-matchTypes-button-selected:morph:outerHTML,#st-portfolios-search-selected:morph:outerHTML,#st-campaigns-search-selected:morph:outerHTML,#st-adGroups-search-selected:morph:outerHTML,#st-matchTypes-search-selected:morph:outerHTML,#st-searchTerms-search-selected:morph:outerHTML,#st-impressionss-search-selected:morph:outerHTML,#st-colors-search-selected:morph:outerHTML,#st-cpcs-search-selected:morph:outerHTML,#st-ctrs-search-selected:morph:outerHTML,#st-spends-search-selected:morph:outerHTML,#st-orderss-search-selected:morph:outerHTML,#st-saless-search-selected:morph:outerHTML,#st-acoss-search-selected:morph:outerHTML,#st-roass-search-selected:morph:outerHTML,#st-clickss-search-selected:morph:outerHTML,#st-cvrs-search-selected:morph:outerHTML,#st-unitss-search-selected:morph:outerHTML,#st-startDates-search-selected:morph:outerHTML,#st-endDates-search-selected:morph:outerHTML,#st-portfolios-top-filter-icon:morph:outerHTML,#st-campaigns-top-filter-icon:morph:outerHTML,#st-adGroups-top-filter-icon:morph:outerHTML" script="init noEnter(me)">

Am I doing something wrong?

In the source it's actually little simpler than that, thanks to nunjucks filters:

html
'#st-portfolios-search,#st-campaigns-search,#st-adGroups-search,#st-matchTypes-search,#st-searchTerms-search,#st-colors-search,#st-impressionss-search,#st-cpcs-search,#st-ctrs-search,#st-spends-search,#st-orderss-search,#st-saless-search,#st-acoss-search,#st-roass-search,#st-clickss-search,#st-cvrs-search,#st-unitss-search,#st-startDates-search,#st-endDates-search'|oobSwap('morph:outerHTML')

But still, it's generating a significant weight in html

well, to be fair that would be even more weighty in a seperate js file.

My question is what you want to achieve