Rendering HTML encoded Strings

[blogscot]

Hi,

As a way to learn Elm I’m building a simple random quote application that I’ve previously built in JS. So far, I can receive a JSON response with the following format, and I’ve decoded the content field.

[
  {
    "ID": 1564,
    "title": "Henry Ford",
    "content":
      "<p>You can&#8217;t build a reputation on what you&#8217;re going to do.</p>\n",
    "link": "https://quotesondesign.com/henry-ford-4/"
  }
]

In JS I would be able to inject the content string into the DOM as HTML, taking care of the escaped codes, p-tags and other special characters. Is there a simple way in Elm to achieve the same effect?

Thanks

[zinggi]

elm-community/html-extra provides innerHtml.
But be aware of the security implications (XSS) of doing this, especially if the content is user provided.
But since this is just a project for learning, this seems to be ok.

[joakin]

Nice! If you don’t want to install the whole library this is the minimal example using Html.Attributes.property:

https://ellie-app.com/mfVsvN2tca1/0

module Main exposing (main)

import Html exposing (Html, p, text)
import Html.Attributes exposing (property)
import Json.Encode as Json

main : Html msg
main =
    p
        [ property "innerHTML"
            (Json.string "Hello <b>unsafe</b> <em>HTML</em>")
        ]
        []

[blogscot]

Thanks @joakin. That’s super helpful.

[blogscot]

Thanks @zinggi, I’ll check that out.