👋 Hey there !

Welcome to Code Canvas 🎨, your digital sticky note system for code! Whether you're debugging, brainstorming, or just leaving reminders for your future self, Code Canvas helps you annotate your code with ease. Think of it as your personal whiteboard for coding.

🚀 Why Code Canvas?

Code Canvas is more than just sticky notes for your code. It's a easy and colorful way to organize your thoughts, ideas, and insights right where you need them—in your codebase.

🌟 Here's what makes Code Canvas your new best friend:

• Add Notes: Add a note to any line of the code with default categories like Bug, Warning, Note, or Idea. Or create your own custom categories!

• Filter Notes: Quickly filter notes by category to focus on what matters most. Bugs? Warnings? Ideas? We've got you covered.

• Edit & Delete: Made a typo? Changed your mind? No problem! Edit or delete your notes anytime.

• Manage Categories: Create, rename, or delete categories to suit your workflow. (Don't worry, we won't let you delete the last one—safety first!)

• Colorful & Fun: Customize your note categories with colors to make your codebase as vibrant as your ideas.

• Share your notes: Commit your notes and share them with your team through version control!

NEW FEATURE : 🔄 Share Notes via Git

Code Canvas automatically saves everything in your .vscode/ folder:

• Notes are stored in .vscode/.code-notes.json
• Categories are stored in .vscode/.code-categories.json

Just commit these files to share them with your team! When others clone your repo and open it in VS Code with Code Canvas installed and activated (Ctrl+Shift+P), they'll see:

• All your notes in the gutter
• Your custom categories
• The complete note history

❗Make sure the .vscode folder is not mentioned in .gitignore file if you want to share the notes❗

# Add this to .gitignore if you DON'T want to share notes
.vscode/.code-notes.json
.vscode/.code-categories.json

⚠️ Remember: Don't commit sensitive information in your notes!

🛠 Getting Started

1. Install VS Code: If you haven't already, download it here.

2. Add Code Canvas:

   • Open VS Code
   • Click the puzzle piece icon on the left sidebar
   • Search for 'Code Canvas'
   • Click "Install"

3. Start Annotating:

   • Open a project or create a new file
   • "Ctrl+Shift+P" (Windows) or "Cmd+Shift+P" (Mac) in your workspace
   • Select 'Code Canvas : Add a note' to add your first note on any line of code
   • Select 'Code Canvas : Filter Notes' to filter notes by category
   • Select 'Code Canvas : Manage Categories' to Add,Edit or Delete category
   • Hover over the line to View, Edit or Delete the note
   • Watch your code come to life with colorful, organized insights!

🖼️ Screenshots

Note icons in the code editor

Hover over the line to view

🎥 Video Demo

Adding a note

Editing a note

Filtering notes by category

Managing the categories

💡 Why I Built This

When I started learning new programming languages through projects, I found myself drowning in comments. For every keyword, function, or line of code, I had to explain why I used const instead of var, or why I chose a specific approach. While these comments were helpful for learning, they quickly cluttered my code, making it hard to read and navigate. I’d spend more time searching for the actual code than learning from it!

That’s when the idea for Code Canvas was born. I wanted a way to keep my code clean while still having all the explanations and reminders I needed

Enjoy!🌈