📝 Sticky Notes

A beautiful, minimal sticky notes app that runs entirely in the browser — no accounts, no server, no build step. Create, drag, resize, format, organize, and search your ideas. Everything is saved automatically to localStorage, and the app works offline as an installable PWA.

Live demo: https://note.ryn.bd/

Features

Writing

• Rich Text Formatting — bold, italic, underline, strikethrough, highlight, headings, bullet & numbered lists, code blocks, quotes
• Checklists — click-to-toggle checkboxes with live progress (2/3 ✓) in the note footer
• Markdown-style shortcuts — type - , 1. , [] , # , > , or ``` at the start of a line and it converts instantly
• Word counter — live word count per note
• Safe — pasted content is inserted as plain text and note HTML is sanitized against XSS

Organizing

• Views — switch between Notes, Favorites, Pinned, Archive, and Trash
• Pin — pinned notes always stay on top of the stack
• Favorite — star important notes and filter to just those
• Archive — tidy the board without deleting anything
• Trash Bin — deleted notes are kept for 30 days; restore or delete forever
• Search — filter notes live as you type (press / or Ctrl+F)
• Duplicate — copy any note with one click or Ctrl+D

Experience

• Drag & Drop — works with mouse and touch (Pointer Events); notes can't be lost off-screen
• Resize — grab the bottom-right corner of any note
• Colors — 6 quick presets + a full color picker per note
• Themes — dark and light, following your system preference by default
• Auto-Save — everything persists in localStorage, with a live save indicator
• Undo — deleting, archiving, and clearing all show an Undo toast
• Export / Import — back up all notes to a JSON file and restore them anywhere
• Multi-tab safe — changes in one tab sync to others
• Offline / PWA — installable, with a service worker that caches the app shell
• Accessible — keyboard shortcuts, ARIA labels, visible focus states, reduced-motion support

Keyboard shortcuts

Press Ctrl+/ in the app for the full list.

Shortcut	Action
Alt+N	New note
/ or Ctrl+F	Focus search
Ctrl+/	Shortcut help
Double-click canvas	New note at that spot
Ctrl+B / Ctrl+I / Ctrl+U	Bold / Italic / Underline
Ctrl+Shift+X	Strikethrough
Ctrl+Shift+L or Ctrl+Shift+8	Bullet list
Ctrl+Shift+7	Numbered list
Ctrl+D	Duplicate note
Ctrl+P	Pin / unpin note

Tech Stack

• HTML5 + CSS3 (custom properties for theming, gradients, animations, native resize)
• Vanilla JavaScript — no frameworks, no dependencies, no build step
• localStorage for persistence, Pointer Events for input, Service Worker + Web App Manifest for PWA

Project Structure

├── index.html            # App markup
├── css/styles.css        # All styles (dark/light themes via CSS variables)
├── javascript/script.js  # App logic (state, rendering, editor, views, persistence)
├── sw.js                 # Service worker (offline cache)
├── manifest.webmanifest  # PWA manifest
└── assets/               # Icon and screenshots

Getting Started

1. Clone the repo

   git clone https://github.com/WPCodeLab/StickyNotes.git

2. Open index.html in your browser — no build step needed. (For the service worker/PWA features, serve it over HTTP, e.g. npx serve or GitHub Pages.)

Privacy

All data stays in your browser's localStorage. Nothing is ever sent to a server.

Credits

Made with ❤️ by ryn.bd