Don't pollute your code. Annotate it.

NotesGutter is the ultimate "out-of-band" annotation tool for VS Code. Attach rich Markdown notes and infinite-canvas drawings to any line of code—without turning your source files into a comment graveyard.

Platform	Link
VS Code Marketplace
Open VSX (For Cursor, Antigravity etc)

You've been there. You need to explain a complex regex or a weird hack, so you write a comment:

// TODO: Refactor this mess.
// We are manually filtering this array because the legacy API
// returns duplicates on Tuesdays. Also, see issue #420.
// Do not touch this unless you have coffee.
// ... (20 more lines of context) ...
const users = rawData.filter(u => u.isActive && !u.isDeleted);

Now your file is cluttered with comments instead of code. 😫

With NotesGutter, your code stays clean:

// @ng note api-hack-explanation
const users = rawData.filter(u => u.isActive);

// @ng draw architecture-diagram
class UserManager { ... }

Click the button which will appear above the comment, and a beautiful Markdown Editor slides open. Or click a button and draw a full architecture diagram right there. All your notes live safely in a separate folder, synced with your repo.

Write full documentation, TODOs, or rants using a Notion-style editor. Headers, lists, code blocks—it's all there.

Need to draw a flowchart? A database schema? A stick figure of your boss? Do it with specific lines of code using embedded Excalidraw.

Link notes across your entire project. It's like a wiki for your code.

// See the user model in another file:
// @ng note ../models/User.ts:schema-diagram
// Or use slash syntax:
// @ng note ../models/User.ts/schema-diagram

Jump straight to a specific header inside any note (local or remote) using #.

// Link to the "Performance" section of any note:
// @ng note architecture-doc#Performance

Want to attach a note AND a drawing to the same line? No problem.

// @ng note logic-details @ng draw flow-diagram
function criticalProcess() { ... }

Attach any external URL or local file path to a line of code. Clicking it opens the target instantly, keeping your editor clean.

// Link to online docs:
// @ng attach https://github.com/ParasKoundal/NotesGutter

// Link to a local file:
// @ng attach ../assets/architecture.pdf

Get an instant progress summary for any note containing a checklist (- [ ], * [x]) directly in the CodeLens.

// Something Like: [📝 refactoring-plan] (2/5)
// @ng note refactoring-plan

It just works. Install, click, type.

1. Add a Note:

   • Place your cursor on a tricky line.
   • Run NotesGutter: Insert Note Anchor (or Cmd+Shift+M) or manually type the command.
   • Start typing! ✍️

2. Add a Drawing:

   • Run NotesGutter: Insert Draw Anchor or manually type.
   • Unleash your inner artist! 🎨

We believe your data is yours.

• Notes are stored in a .notesgutter folder in your project.
• It works 100% offline.
• Commits to Git just like any other file.

Found a bug? Have a wild idea? Open an issue!

Made with ☕ by Paras Koundal