I’ve given it a fair try, but I must say that what appears to be the standard way of writing HTML in Haskell-like languages and frameworks (Yesod, Elm, Halogen…) doesn’t quite compute to me. I can imagine that I’m not the only one having a hard time processing that this:
HH.div [ HP.id "root" ] [ HH.input [ HP.placeholder "Name" ] , HH.button [ HP.classes [ HH.ClassName "btn-primary" ] , HP.type_ HP.ButtonSubmit ] [ HH.text "Submit" ] ]
<div id="root"> <input placeholder="Name" /> <button class="btn-primary" type="submit"> Submit </button> </div>
The latter is universally readable and there’s a clear visual distinction between properties and contents (meaning that in the glimpse of an eye, one can understand whether something is a property value like
btn-primary, or some content like
Submit or even another nested tag).
The former is, at least to the untrained eye, quite cryptic, and more importantly there is absolutely no visual distinction between properties and content, both being enclosed in square brackets, which to me sounds like a net negative (and a massive one) compared to the regular HTML version.
I stumbled across Smolder which does a better job at distinguishing between properties/content but it doesn’t seem to be maintained anymore (last commit from more than almost two years ago).