A beautifully designed, installable Progressive Web App for students to take notes, paste screenshots, and stay organized during online lectures and meetings.
 |
 |
 |
 |
NoteBloom is a lightweight, offline-capable note-taking app built specifically for students. Whether you're in a Zoom lecture, watching a recorded session, or sitting in a live class — NoteBloom keeps your notes organized in one cute, distraction-free space.
You can:
- Create multiple notebooks for different subjects or courses
- Write notes with rich text formatting (bold, italic, underline)
- Paste screenshots directly from your clipboard into your notes
- Choose between page styles (Blank, Ruled, Grid, Dot Grid) to match how you think
- Switch between multiple themes to personalize your workspace
- Work completely offline — no internet needed after install
- Install it like a native app on Windows, Mac, Android, or iOS via Chrome
- Visit https://sammmiksha.github.io/notebloom/
- Start using it immediately — no sign-up required.
Installing NoteBloom as a PWA gives you a native-feeling app with offline access.
On Desktop (Chrome or Edge):
- Open https://sammmiksha.github.io/notebloom/ in Chrome or Edge.
- Look for the install icon (➕) in the address bar, or open the browser menu (⋮) and click "Install NoteBloom".
- Click Install in the prompt.
- NoteBloom will appear in your Start Menu, Taskbar, or Desktop like any native app.
On Android (Chrome):
- Open the site in Chrome.
- Tap the menu (⋮) → "Add to Home Screen".
- Tap Add. The app icon will appear on your home screen.
On iOS (Safari):
- Open the site in Safari.
- Tap the Share button (box with arrow) → "Add to Home Screen".
- Tap Add.
ℹ️ Once installed, NoteBloom works fully offline. Your notes are saved locally on your device.
- From the dashboard, click "+ New Notebook".
- Enter a name for your notebook (e.g., "Physics Lectures", "CS101").
- Your new notebook will appear as a card on the dashboard.
- Click on any notebook card to open it.
- Start typing your notes in the editor.
- Use the toolbar to apply Bold (B), Italic (I), or Underline (U) formatting.
- Notes are auto-saved — you'll see "All changes saved" in the bottom-right corner.
Use the dropdown in the toolbar to switch between:
- Blank — clean white canvas
- Ruled — horizontal lines, classic notebook style
- Grid — square grid, great for diagrams and math
- Dot Grid — subtle dots, popular for bullet journaling
Use the theme dropdown (e.g., Purple) to change the color scheme of your editor. Pick the vibe that matches your mood or subject.
- Take a screenshot on your device (
Win+Shift+Son Windows,Cmd+Shift+4on Mac). - Click inside your note area.
- Press Ctrl+V (or Cmd+V on Mac) — the screenshot pastes directly into your note.
- On the dashboard, each notebook card shows Rename and Delete options beneath it.
- Click Rename to give it a new title, or Delete to remove it permanently.
- Use the Search bar at the top of the dashboard to quickly find notebooks by name.
| Feature | Details |
|---|---|
| 📒 Notebook Management | Create, rename, and delete multiple notebooks |
| 🎨 Themes | Multiple color themes to personalize your workspace |
| 📄 Page Styles | Blank, Ruled, Grid, Dot Grid |
| 🖼️ Screenshot Pasting | Paste images from clipboard directly into notes |
| 💾 Auto-Save | Notes saved automatically using IndexedDB (browser storage) |
| 🔍 Search | Search across notebooks instantly |
| 📱 PWA / Installable | Install on desktop or mobile like a native app |
| 🌐 Offline Support | Works without internet after first load |
| 🔠 Rich Text | Bold, Italic, Underline formatting |
| 📏 Font & Size Controls | Adjust font family and size from the toolbar |
| Technology | Purpose |
|---|---|
| HTML5 | App structure and markup |
| CSS3 | Styling, themes, animations |
| Vanilla JavaScript | All app logic and interactions |
| IndexedDB | Local persistent storage for notes and notebooks |
| Service Workers | Offline support and caching |
| Web App Manifest | PWA installability (icons, name, theme color) |
| GitHub Pages | Free static hosting for the live demo |
No frameworks, no backend, no server — NoteBloom runs entirely in your browser with zero dependencies.
notebloom/
├── assets/
│ ├── icon-192.png # PWA icon (small)
│ ├── icon-512.png # PWA icon (large)
│ ├── screenshot-wide.png # Wide editor screenshot
│ └── screenshot-narrow.png # Narrow editor screenshot
├── app.js # Core app logic & notebook management
├── database.js # IndexedDB storage layer
├── editor.js # Note editor logic (formatting, page styles)
├── index.css # Global styles and themes
├── index.html # Main app entry point
├── manifest.json # PWA manifest (icons, name, theme color)
└── service-worker.js # Offline support and caching
- Snap it beside your lecture! Resize NoteBloom to a narrow window and snap it next to your video — it's designed to look great at any width.
- Use Grid pages for diagrams and equations — the grid lines make freehand sketching in notes much cleaner.
- Organize by subject — create one notebook per course so your notes never get mixed up.
- Screenshot workflow — during a Zoom or Teams call, use your OS snipping tool and paste straight into your note without breaking flow.
- Always-on-top window mode (keep NoteBloom above your lecture window)
- Electron desktop version (deeper OS integration)
- Export notes as PDF or Markdown
- More notebook cover themes and colors
- Tagging and folder organization
- Dark mode support
- Handwriting / stylus input support
Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request.
- Fork the repository
- Create your feature branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature/your-feature-name - Open a Pull Request
This project is open source and available under the MIT License.
Made with 🌸 for students, by a student
Try NoteBloom Live →
Try NoteBloom Live →