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

Developers: Plugin & API
1

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!

2

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

3

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
4

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

5

Speed reading inside Obsidian ? wow, … speechless. That’s ridiculously awesome!!
Maybe you consider developing this project further into a plugin?

6

Glad you like it!!
Yeah, this was my original aim, but found it much easier to do this way.
The gist linked is mostly final, I didn’t need to modify it in a long time now, so feel free (you or anyone) to actually make this into a plugin, giving credits if possible :slight_smile: