HTMZ inspired form subission

Dillon Headley — Sun, 31 Mar 2024 15:31:04 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I was inspired by htmz (which was in turn inspired by htmx) and how the author got pretty close to a basic htmx-like experience just using an iframe. I wanted to push it a little further so whipped this demo together. My submission demonstrates progressive enhancement for the form - with js enabled the request targets an iframe that is inserted into the dom, meaning the page doesn't actually navigate (similar to event.preventDefault()). The iframe receives the html response from the request and on load triggers a function to swap out it's contents into the main page.

Demo

You can find my demo here: https://glam-up.netlify.app/
And the code here: https://github.com/dillonbheadley/glam-up

Journey

I put this together pretty quickly so there are probably bugs or things I haven't dealt with or handled (like validation). For simplicity I just used Netlify's edge functions and js template literals for "components".

I think you could get pretty far with this little setup for simple sites/apps with very little overhead or maintenance. It was fun to mess around with at least! I'd be happy to answer any questions.

DEV Community: Dillon Headley

HTMZ inspired form subission

What I Built

Demo

Journey