Preview HTML files with Dirvish and Xwidgets in Emacs

Progressing my new Emacs configuration, I was looking for a nice way to have interactive plotly plots in Emacs. The plotly plots are previewed very nicely in the Jupyter Lab or Notebook but don't work as nicely in Emacs EIN. So I decided to set iframe for plotly's default renderer and use Dirvish preview for viewing and interacting with plotly plots.

Iframe for plotly plots

We need to set plotly renderer to "iframe":

import plotly.io as pio
pio.renderers.default = "iframe" # or "iframe-connected" for smaller files

Preview HTML with Xwidgets

Here is the code I use in my Emacs config for previewing with Xwidgets when Emacs is built with --with-xwidgets:

(when (featurep 'xwidget-internal)
  (dirvish-define-preview html (file ext)
    "Use xwidgets for HTML file previews"
    (setq url (concat "file://" file))
    (when (equal ext "html")
      (progn
        (xwidget-webkit-browse-url url)
        (evil-window-mru))))

  (add-to-list 'dirvish-preview-dispatchers 'html))

Result

Here is how Dirvish shows HTML previews now. You just need to navigate to your plot HTML files created in iframe_figures and have it displayed by Dirvish.