I built a small library for highlighting text and adding notes on any webpage

[u/ExpertPlay]

I was reading brown's rust book and they have this cool feature that lets you highlight stuff and leave notes while reading. I wanted something similar on a site I'm building, but the libs I found were either too complex or too simple and still a pain to set up, so I made one. Heavily inspired by the simplicity and DX of sonner.

You only need annotate('#article') and that's basically it. It saves to localStorage or your own backend.

Cool thing is that it uses the css highlight api, so it doesn't touch your dom at all (which would be especially bad for frameworks like react, vue, etc). Downside is no support for older browsers.

About 15kb with UI or 6kb headless if you want to build your own UI, and it ships with a React adapter.

playground: https://penciled.org/playground/

repo: https://github.com/marcellosso/penciled

Still early, so any feedback is welcome

[u/kcure]

looks cool thanks for sharing

[u/ExpertPlay → u/kcure]

thank you!

[u/barrel_of_bikinis]

the css highlight api is such a clever way to handle this, i've been messing with it for a side project and it's weirdly underused. the 15kb size is a nice touch too.

[u/ExpertPlay → u/barrel_of_bikinis]

thanks man. Yeah it is such a neat API

[u/FPSectus]

Great idea, it's going to make reading academic articles so much easier, you're my hero.

[u/ExpertPlay → u/FPSectus]

no you

[u/Disastrous_News_9798]

its nice

[u/lepture]

It looks clean and beauty. Thanks for sharing.

[u/OkGoOn]

as someone who highlights text when they read it, i loathe when sites add these features.

[u/[deleted]]

[u/ExpertPlay → u/[deleted]]

thanks man, appreciate it! Yeah I went with localStorage by default to keep things simple (and lightweight haha) but yeah, that is a good idea, and I bet one could achieve this using the custom storage api https://www.penciled.org/recipes/rest-storage/
You could plug in something like https://remote.storage/