https://github.com/simplearyan/mark-it
Professional, Pixel-Perfect & SPA-Resilient Annotation Suite
https://github.com/simplearyan/mark-it
annotation-tool chrome-extension excildraw extension roughjs whiteboard
Last synced: 5 days ago
JSON representation
Professional, Pixel-Perfect & SPA-Resilient Annotation Suite
- Host: GitHub
- URL: https://github.com/simplearyan/mark-it
- Owner: simplearyan
- License: mit
- Created: 2026-04-02T09:13:44.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-02T10:30:53.000Z (3 months ago)
- Last Synced: 2026-04-03T00:24:13.734Z (3 months ago)
- Topics: annotation-tool, chrome-extension, excildraw, extension, roughjs, whiteboard
- Language: JavaScript
- Homepage: https://simplearyan.github.io/mark-it/
- Size: 907 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🖌️ IITM Annotator
**Professional, Pixel-Perfect & SPA-Resilient Annotation Suite**
[](https://opensource.org/licenses/MIT)
[]()
[]()
**IITM Annotator** is a high-performance browser extension designed specifically for students and professionals. Unlike basic annotation tools, it is built to handle modern Single Page Applications (SPAs) like the IITM LMS with zero-jitter, sticky scrolling, and mobile responsiveness.
---
## 🌟 Key Features
### 💎 Pixel-Perfect Precision
- **Zero-Jitter Engine**: Advanced coordinate resolution ensures your marks stay exactly where you put them, even on extremely long pages.
- **Rough.js Integration**: Beautiful, hand-drawn aesthetic for pens, lines, rectangles, and circles.
- **Advanced Highlighter**: Features real-time multiply blend-mode and stroke stacking (identical to a physical marker).
### 🎨 Next-Gen UI/UX
- **Dockable Toolbar**: Pin the toolbar to the Bottom, Top, Left, or Right of the screen.
- **Custom Color Picker**: A built-in rainbow gradient icon that hooks into your system's native color picker.
- **Keyboard Shortcuts**: Full hotkey support for fast tool switching (hover over any tool to see its shortcut).
- **Glassmorphic Aesthetics**: Modern "tinted glass" active states, ultra-thin custom scrollbars, and sleek SVG iconography.
### 🔄 SPA Resilience (Heartbeat System)
- Automatically detects DOM changes in React/Angular/Vue environments.
- Re-injects drawing layers instantly if the framework clears the page content.
### 📱 Mobile & Tablet Ready
- **Universal Touch Support**: Smooth drawing with finger or stylus.
- **Swipeable Toolbar**: Horizontal tool scrolling for narrow devices.
- **Palm Rejection**: Intelligent pointer tracking to ignore accidental touches.
### 💾 Persistent Workspace
- Drawings are automatically saved to `chrome.storage.local` based on the specific URL.
- Your notes remain ready exactly where you left them, even after browser restarts.
---
## 🚀 Installation (Developer Mode)
1. **Clone the Repository**:
```bash
git clone https://github.com/simplearyan/IITM-Annotation-Extension.git
```
2. **Open Extensions Page**:
- Go to `chrome://extensions/` in Chrome/Edge, or `about:debugging` in Firefox.
3. **Enable Developer Mode**:
- Toggle the switch in the top-right corner.
4. **Load Unpacked**:
- Click **Load Unpacked** and select the project folder.
---
## 🛠️ How to Use
1. **Activation**: Click the **Pen Icon (FAB)** in the bottom-right corner to toggle the whiteboard.
2. **Safety Mode**: The tool starts in **Cursor/Pointer Mode**. This allows you to interact with links and buttons without accidentally drawing.
3. **Drawing**: Choose a tool (Pen, Line, Rectangle, etc.) and start annotating.
4. **Settings**: Switch colors and stroke weights instantly via the glassmorphic toolbar.
5. **Clean Up**: Use the **Clear All** button for a fresh start with a non-blocking confirmation popover.
---
## 👨💻 About the Author
Built with ❤️ by **Aryan**.
- **GitHub**: [@simplearyan](https://github.com/simplearyan)
- **Portfolio**: [simplearyan.github.io](https://simplearyan.github.io)
- **YouTube**: [@SimpleAryan](https://youtube.com/@SimpleAryan)
---
## 📜 License
This project is licensed under the [MIT License](LICENSE).