I was thinking about how to create a front end with n8n and thus make a real app. Thanks to the suggestions from Ed_P, I realized that it was possible to create something in HTML and JS.
So I had an epiphany and immediately thought that I could use htmx2!
So I did some tests, and it seems to work!
Now I’m going to sleep, but tomorrow I try some more deep tests with complex applications!
STAY TUNED!
It works like a charm! Completely custom UI HTML form, with dynamic select populations on load page, with custom graphics.
This confirms you can create one-page app application without buildstep
i have just use htmx, bulma for simple CSS settings, validator.js for validating form field and some custom JS for fuzzy search in select options.
Potentially, , with the correct prompt you can generate UI directly from AI and you don’t need to touch any code.
I’m new to the community, and so this might be covered elsewhere, but I’ve had some good success using webhooks to create a bit of a web front-end.
I’ve also thought about using HTMX, but I haven’t gotten that far yet!
Basically, I’ve got a workflow that copies data from Airtable into another system (to keep the other system up to date). I’d like for non-n8n users to be able to initiate this workflow, so a webhook seemed like a good solution.
I wanted to make it a bit cleaner than just sending someone a URL and saying when they visit it, the workflow gets triggered. Plus, you can only send a GET HTTP request in your browser when you visit a URL and the pedantic side of me thought, “we shouldn’t really push data on a GET request, anyway… that should happen only with a POST request.”
So, I made TWO webhook triggers, both with the same path, one each for GET and POST requests. For the GET webhook, I used a Respond to Webhook node with HTML that included a form/button to generate a POST request to the same URL.
It’s worked out nicely. With the response to the first request (the GET one), I can put messages to users in the HTML about what will happen when they hit the button, etc.
I’d like to use HTML to make it even more interactive, so I’ll be interested to see what you get up to!
Let’s say that using htmx and seeing that it works opens interesting doors for creating entire interfaces and single-page applications without having to use frameworks or build steps that you can’t use on n8n.
as for post and get requests currently you can also do them all from the same webhook without creating 2 of them
Let’s say that using htmx and seeing that it works opens interesting doors for creating entire interfaces and single-page applications without having to use frameworks or build steps that you can’t use on n8n.
as for post and get requests currently you can also do them all from the same webhook without creating 2 of them.
Or you can do as you did two separate webhooks
That’s a really great idea… I didn’t realize you could have it respond to >1 verb! I’ll have to try that out!
Great work! I love htmx. Can’t wait to play around with this. For those new to htmx, it works really well with Tailwind and html/css UI libraries (Flowbite, etc). You include a tiny bit of js for the htmx, and a tad of js for the interactivity of the UI libraries, but can skip the rest of the js bloat.
i think is better if we use js vanilla and standard css
@mredodos would you be willing to share that workflow?
i cant share the entire form is for our customer but im working on another project, soon i can share this 
let me know if you want specific part of workflow of you need help to build something like that
Here another example on what you can create with htmx and n8n
(its not a final version and is not production ready you need to change and finish to set some stuff)
