Notably: Read Smarter on the Web

Notably is a Chrome-based annotation tool that transforms passive web reading into active learning letting users highlight, annotate, and convert insights into mind maps directly from any webpage.

Comment

Inspiration

A large part of learning today happens on the internet through blogs, documentation, research papers, and articles. However, the process is fragmented. Users constantly switch between webpages and note-taking tools to capture insights, breaking their reading flow and making knowledge harder to organise. I wanted to build a tool that allows people to read, think, and organise ideas directly on the web without leaving the page. This led to the creation of Notably, a browser-based learning companion that transforms passive reading into active knowledge building.

What it does

Notably is a Chrome-based annotation tool that turns any webpage into an interactive learning workspace. Users can: Highlight important text directly on webpages Add annotations and contextual notes Automatically generate mind maps from collected highlights Organise ideas in a structured format Export notes for later revision or sharing By integrating these features into the browser, Notably helps users capture insights instantly and build structured knowledge while they read.

How we built it

Notably was built as a Chrome extension that integrates directly with the browsing experience. Content scripts detect and enable text highlighting on webpages JavaScript and DOM manipulation capture selected text and annotations A structured data layer stores highlights and notes A mind map generator converts captured insights into a visual knowledge structure The extension interface provides a simple dashboard to view and export notes The focus was on creating a lightweight system that works seamlessly across different webpages without disrupting the user's reading flow.

Challenges we ran into

One of the biggest challenges was handling text selection and highlighting across dynamic webpages without breaking the page layout. Different websites structure their content differently, which required careful handling of DOM elements. Another challenge was mapping highlights into meaningful mind maps. I had to experiment with ways to structure information so that it remained useful and readable rather than just a collection of disconnected notes. Ensuring that the extension remained fast and non-intrusive while running on multiple websites was also an important technical consideration.

Accomplishments that we're proud of

I successfully built a tool that integrates annotation, note-taking, and mind map generation directly into the browser. Instead of using multiple apps, users can now capture and structure knowledge in one place while reading online. I am particularly proud of creating a smooth reading workflow, where users can highlight ideas and instantly see them organized into structured insights.

What we learned

Through this project, I learned how to design tools that integrate naturally into existing workflows rather than forcing users to change how they work. On the technical side, I gained experience working with browser extensions, DOM manipulation, and structuring unorganised information into meaningful knowledge representations. I also learned the importance of focusing on simplicity and usability, especially for tools meant to enhance everyday tasks like reading and learning.

What's next for Notably: Read Smarter on the Web

My next goal is to evolve Notably into a full knowledge companion for the web. Future improvements include: AI-powered automatic summarization of highlighted content Smart concept extraction to build more meaningful mind maps A personal knowledge graph connecting ideas across different webpages Cloud syncing so users can access their notes across devices Collaboration features for shared annotations and learning Ultimately, I envision Notably as a thinking layer for the internet, helping people turn everyday browsing into organised knowledge.

Built With

Share this project:

Updates