Skip to content

Instantly share code, notes, and snippets.

@joakimk joakimk/MoreInfo.md
Last active Oct 2, 2019

Embed
What would you like to do?
How to embed raw HTML in Elm
div [ (Html.Attributes.property "innerHTML" (Json.Encode.string "Test <em>em</em> here.")) ] []
@roine

This comment has been minimized.

Copy link

commented Dec 15, 2017

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"
        ]
        []
@berenddeboer

This comment has been minimized.

Copy link

commented May 21, 2018

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>"  ] []
@lenards

This comment has been minimized.

Copy link

commented Jun 13, 2018

Thanks

@lenards

This comment has been minimized.

Copy link

commented Jun 13, 2018

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

@dam5s

This comment has been minimized.

Copy link

commented Oct 1, 2018

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.

@SkySor44

This comment has been minimized.

Copy link

commented Nov 15, 2018

Has anyone found a work around for Elm 19?

@yohanakh

This comment has been minimized.

Copy link

commented Jan 10, 2019

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

@mike-subtilis

This comment has been minimized.

Copy link

commented Jan 14, 2019

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

@phylor

This comment has been minimized.

Copy link

commented Mar 14, 2019

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>")
@Piping

This comment has been minimized.

Copy link

commented Apr 24, 2019

@phylor what is Message?

@phylor

This comment has been minimized.

Copy link

commented Apr 29, 2019

@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.

@karantan

This comment has been minimized.

Copy link

commented Sep 26, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.