#OpenSourceDiscovery 90: Rough Notation

JS library to annotate web page content

Jun 23, 2024

Rough Notation

Rough Notation is a JavaScript library to create animated annotations with hand-drawn look and feel. Built on top of RoughJS, support multiple styles such as underline, highlight, circle, etc.

💖 What I like about Rough Notation:

Simple API - This library has a specific clear purpose and delivers that via super simple APIs, no learning curve and easy to install
Elegant UI - Love the visuals it provides, and a contextual minimal use can improve UX
Lightweight and no side-effects - I didn’t see any side effects of using this library. I am usually concerned about adding js libraries just for cosmetic features as that adds another layer of unknown complexity and debugging experience. I prefer to write the code myself in vanilla js unless it is absolutely complex thing. But seeing such careful and lightweight implementation, it is hard to resist not using it even when you could write it yourself.

👎 What I dislike about Rough Notation:

As much as I am impressed with the UI and the implementation, I still might not use it most instances. The primary reason is its dependency on rough.js. In most use cases, I’d be using one or two styles here and that too sparingly on one or two pages among 100s of pages. And that should be doable with even a shorter code, I wouldn’t want to import the complete rough.js for that. Overall, the decision is to choose the rough.js ecosystem or not, which limits its use cases.

⭐ Ratings and metrics

Based on my experience, I would rate this project as following

Production readiness: 10/10
Docs rating: 10/10
Time to POC(proof of concept): less than 10 mins

Author: Preet @preetster

Demo | Source

Tech Stack: Typescript, Javascript

If you discovered an interesting Open-Source project and want me to feature it in the newsletter, get in touch via the form above. To support this newsletter and Open-Source authors, follow #OpenSourceDiscovery on LinkedIn and Twitter