Html2elm.obtuse.io - HTML to Elm code converter using the browser's native DOM parser

Show and Tell
1

Hello everyone!

I just released the first version of https://html2elm.obtuse.io! (source: https://github.com/obtuseio/html2elm)

I know https://github.com/mbylstra/html-to-elm exists but I took a different approach than that – I parse the HTML as well as HTML elements’ style attribute using the browser’s native parser.

This has one major benefit over mbylstra’s project: the converted HTML will behave exactly the same as the original one renders in a spec compliant browser.

It’s also way faster – pasting 1,500 lines of HTML freezes Chrome for 15 seconds on mbylstra’s version while in my version it is converted in milliseconds.

Other than that,

  1. HTML comments are converted to Elm comments.

  2. Int and Bool attributes are converted to their equivalents in elm-lang/html.

  3. The style attribute is parsed to name/value pairs and generate a call to Html.Attributes.style.

  4. The order of the attributes is preserved in the generated Elm code.

  5. And there are options to clean up text nodes, by trimming them, completely removing whitespace only nodes, and the best one: collapsing consecutive whitespace into a single space.

Two features I’ll be working on soon are:

  1. Adding support for SVG. They work right now but all of them are converted to calls to the “node” function.

  2. Generating import/exposing statements so you don’t have to type them by hand or use exposing (..).

Please let me know if you have any feedback, bug report, feature request, or suggestion!

16 Likes
2

That’s cool. Anyway I do have one feature suggestion - an option that will generate the qualified names of functions like Html.div [] [Html.text "Hi"] instead of div [] [text "Hi"]. It is an option for generating import/exposing feature :wink:

We are getting used to write the Html with those functions – I know that’s kind of chatty and redundant, however you don’t need to reason about the origin of functions and you don’t need to expose every one of them.

Anyway, it is just a suggestion. Keep up good work :wink:

2 Likes
3

Nice!! One request I would have is some sort of line length counter

    a
                [ href "/" ]
                [ text "Home" ]

can be expressed as

a [ href "/" ] [ text "Home" ]

in my view with no loss of clarity

clearly more line breaks are needed for more complex elements