Skip to content

README.md

Latest commit

 

History

History
88 lines (68 loc) · 3.73 KB

README.md

File metadata and controls

88 lines (68 loc) · 3.73 KB
Raw

📝 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/

Sticky Notes demo

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