How to embed raw HTML in Elm

code.elm

div [ (Html.Attributes.property "innerHTML" (Json.Encode.string "Test <em>em</em> here.")) ] []

MoreInfo.md

More info

• https://github.com/eeue56/elm-for-web-developers#can-i-enter-html-as-a-string
• https://github.com/evancz/elm-html/issues/54

Nice solution, I extracted to:

main : Html msg
main =
    textHtml "<b>Hello</b>"

textHtml: String -> Html msg
textHtml t =
    span
        [ Json.Encode.string t
            |> Html.Attributes.property "innerHTML"
        ]
        []

Given this is the first hit in Google, the example given by @roine is more complex than the one in the first link. Which is:

import Html exposing (div)
import Html.Attributes exposing (property)
import Json.Encode exposing (string)

main = 
  div [ property  "innerHTML" <| string "<div>hello</div>"  ] []

Thanks

It might be worth calling out that this is included in the elm-community version of Html.Extra now:

• https://github.com/elm-community/html-extra/blob/db74695c8a3cecdcf649c6b302724dda34b05953/src/Html/Attributes/Extra.elm#L109-L116

This no longer works in Elm 19 as VirtualDom.property does not accept "innerHTML" anymore. I haven't found a way around it yet. The Markdown.toHtml still works, but it will try and interpret anything that looks like markdown in the given string.

Has anyone found a work around for Elm 19?

+1
Have you found how to do it with Elm 19 ?

With elm 19, the fix at elm/html#172 (comment) worked for me.

As a summary for Elm 0.19:

Installation:

elm install hecrj/html-parser

Utility function:

import Html.Parser
import Html.Parser.Util

textHtml : String -> List (Html.Html msg)
textHtml t =
    case Html.Parser.run t of
        Ok nodes ->
            Html.Parser.Util.toVirtualDom nodes

        Err _ ->
            []

Usage:

span [] (textHtml "<i>Hello world</i>")

@phylor what is Message?

@Piping That is my message type (which is handed to the update function for example). It's usually called msg in most examples, I'll change it in the code.

As a summary for Elm 0.19:

Installation:

elm install hecrj/html-parser

Utility function:

import Html.Parser
import Html.Parser.Util

textHtml : String -> List (Html.Html msg)
textHtml t =
    case Html.Parser.run t of
        Ok nodes ->
            Html.Parser.Util.toVirtualDom nodes

        Err _ ->
            []

Usage:

span [] (textHtml "<i>Hello world</i>")

This worked for me. Thank you <3

@phylor Installation for elm install hecrj/html-parser doesnt work, getting no package with that name

@sourabh2106 Works fine for me. The package is still in the repository. Are you using elm 0.19?

$ elm --version
0.19.1

$ elm install hecrj/html-parser
Here is my plan:

  Add:
    elm/parser           1.1.0
    hecrj/html-parser    2.3.4
    rtfeldman/elm-hex    1.0.0

Would you like me to update your elm.json accordingly? [Y/n]:
Success!

thanks!!! @phylor that worked for me in v0.19.1 !!! ❤️