Blogdown htmlwidget encoding error?


I seem to be getting a strange error when trying to render html widgets in a blogdown post. After the page has been knitted to html, the widget div appears in the html file as

<p>&lt;!iv id="htmlwidget-1" style="width:100%;height:301px;" class="widgetframe html-widget"></div>

If I fix the div tag directly in the html script to:

<div id="htmlwidget-1" style="width:100%;height:301px;" class="widgetframe html-widget"></div>

and then refresh the page, everything works fine.

I've tried rendering the widgets with and without the widgetframe package but the same thing is happening for both. It's also happening across a variety of widgets (dygraphs, leaflet etc) so I don't think it's specific to a particular package or a JS library conflict.

I found out that the &lt; that's appearing is an html entity for the less than sign (<) so I'm guessing there's some sort of encoding error going on? I tried saving the .Rmd file with utf-8 encoding but no luck.

Any ideas?


Hi @paul,

I haven't run into this yet, but I know html widgets can be finicky- see:

You can see an example of using them in a blog post on our blogdown demo site:


1 Like

Hi Alison,

Thanks for the resources. I tried serving the site on a mac rather than windows laptop and everything worked fine so I'm guessing it's some sort of windows encoding issue!