Can we render html through a plugin (For speed reading Obsidian notes)

Hello:
I have been checking out the documentation and I find no straight way to render a static HTML site into the main pane.

This is most likely because I am not searching in the right places (I checked the kanban plugin and he uses the api in a way that is not compatible with this idea, I think).

Motivation: I want to integrate a speed-reading app into Obsidian so it tracks your read progress and you can pause / keep going on a per-note basis.

Something similar to this:

https://raw.githubusercontent.com/vicrazumov/React.Spritz/master/media/sample.gif

Using the source here: GitHub - Miserlou/Glance-Bookmarklet: A Speed Reading Bookmarklet

I already have this working locally as a static html+css+js file, but I think it would be wonderful if I could make it into a plugin that could keep track of your read progress in notes and would help you speed read the text in a note just with a click.

I can make a hacky way to do this just for myself locally but if there is a way to render html in an obsidian pane I will make it into a plugin for everyone to enjoy.

Thanks for the help!

The idea would be to adapt the static HTML to be generated similarly to this, right?

Already managed to do something on the lines. For future reference:

Steps:

  • Download the buttons plugin
  • Replace the button “createEl” with createDiv
  • Put html inside, it will be rendered instead of a button.
  • Put your css in the style.css file in the project
1 Like

And the speed reading widget being injected through the templater plugin: Speed reading widget for obsidian