I was using
elm-tailwind-modules a lot to build some UIs with TailwindCSS. In the process of building it, I ended up with a working HTML to Elm tool, so I went ahead and published it as a general tool that can be used with or without Tailwind/
elm-tailwind-modules. I hope this can serve as a useful and robust resource for the community. It includes a robust end-to-end test suite, so it was very easy to make sure that lots of different types of input are handled correctly.
The commonly used HTML to Elm was a great tool, but had a few known issues and was still built with Elm 0.18. It turns out, I was able to make sure that none of those none issues happen in html-to-elm.com, so hopefully using this tool will make people’s workflows a little more seamless (less manual editing). It feels great when the code compiles the first time you paste it into your editor, so it’s worth going that extra mile.
Here are some of the features it includes:
- Configure import aliases and exposed values to use in generated code
- Save import aliases/exposing preferences through localstorage
- Copy button
Tailwind class processing
Generated Elm code
- Generates valid SVG (using correct SVG attribute functions and mappings, and omits redundant fields like
attribute "xmlns" "http://www.w3.org/2000/svg")
elm-review fix workflow
I also published an
elm-review rule, elm-review-html-to-elm, that allows you to turn
Debug.todo """@html <div></div>""" into
div  
I like the idea of having really polished community resources, and I hope this can play that role for this particular problem. If you find any rough edges, I’d love to hear your feedback. Feel free to reach out in Slack or open a GitHub issue to discuss further.