Notes that stay on your device.
A minimalist, browser-based note-taking app with a rich-text editor, tags, favorites, colour themes, and instant search - all stored locally, with zero servers.
Qwicknotes is a free, open-source note-taking application that lives entirely in your browser. Every note, tag, and preference is saved to your device's localStorage - no servers, no sign-up, no cloud.
Write with a rich-text editor, organise with tags and favourites, search instantly, and export your notes in multiple formats. Whether you're jotting down quick ideas, maintaining a personal knowledge base, or planning your next project, Qwicknotes gives you a clean, fast, and private workspace.
Most note-taking apps store your data in the cloud - which raises privacy concerns, requires an account, and often costs money. Qwicknotes is different:
- 100% local - Your notes never leave your device.
- Instant - No loading states, no waiting, no sync delays.
- Simple - Clean interface, no clutter, no onboarding friction.
- Offline-ready - Works without an internet connection once loaded.
- Private by design - No analytics, no tracking, no accounts.
- Open source - Transparent, free, and community-driven.
Whether you're a writer, student, developer, or anyone who takes notes, Qwicknotes adapts to your flow - not the other way around.
Powered by TipTap (ProseMirror) - bold, italic, underline, headings (H1–H3), bullet lists, blockquotes, and full undo/redo history. All formatting is preserved in your notes and sanitised safely on render.
Choose a background colour and a text colour per note from a curated palette, or leave both unset to let the note automatically match your current light/dark theme.
- Create, rename-free, and delete tags globally from one place.
- Click a tag to filter the notes list by it.
- Star important notes and toggle the Favorites filter to see only them.
- Deleting a tag removes it from every note that used it - including the note currently open in the editor.
Search across note titles and content in real time - results filter as you type, with no debounce delay.
Sort your notes by:
- Newest / Oldest first
- Recently updated
- Largest / Smallest size (character count)
- Title (A–Z or Z–A)
- Single note - download as
.txt,.md, or.pdffrom the note's detail view. - All notes (bulk) - export everything currently displayed as one combined
.txt,.md, or.pdf, or as a.ziparchive containing individual.txtfiles per note. - Individual selection - open the Individual Export modal to browse and export specific notes, filterable by tag, favourites, or edit status.
Toggle between light and dark themes from the header. Your preference is saved automatically and respected across the entire UI - including modals, cards, and the editor.
Notes, tags, the current editor draft, search query, sort preference, active filters, and the note currently being edited are all saved to localStorage. Close the tab, come back later - everything is exactly where you left it.
First-time users get a short, spotlighted walkthrough that highlights the key parts of the interface: search, the editor, formatting tools, the notes list, and export/management controls.
Non-blocking toast messages confirm actions like saving, updating, deleting, favouriting, and exporting - without interrupting your workflow.
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Tailwind CSS v4 | Styling, with class-based dark mode via @variant dark |
| Vite 6 | Dev server & build tool |
| TipTap | Rich-text editor (built on ProseMirror) |
| DOMPurify | Sanitising note HTML before rendering |
| Lucide React | Icon set used throughout the UI |
| React Icons | Additional icons (GitHub, etc.) |
| jsPDF | Client-side PDF generation for exports |
| JSZip | Bulk .zip export of all notes |
| ESLint | Linting, with React Hooks and React Refresh plugins |
qwicknotes/
├── public/
│ └── preview.png
├── src/
│ ├── assets/
│ │ └── favicon.svg
│ ├── components/
│ │ ├── common/ # Shared UI: modals, toasts, guided tour
│ │ ├── layout/ # App shell: Header, Dashboard
│ │ └── features/
│ │ ├── NewNote/ # Editor, toolbar, tag manager, colour picker
│ │ ├── NotesList/ # Note cards, list controls, empty state
│ │ └── IndividualExport/
│ ├── context/
│ │ └── ToastContext.jsx # Global toast provider/consumer
│ ├── hooks/
│ │ ├── useNotes.js # Core notes state & business logic
│ │ └── useLocalStorage.js
│ ├── utils/
│ │ └── exportHelpers.js # txt/md/pdf/zip export logic
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── index.html
├── vite.config.js
├── eslint.config.js
├── package.json
└── README.md
- Node.js v18 or later
- npm (or yarn/pnpm, adjusted accordingly)
# Clone the repository
git clone https://github.com/byllzz/qwicknotes.git
cd qwicknotes
# Install dependencies
npm install
# Start the dev server
npm run devThe app will be available at http://localhost:5173 by default.
| Script | Description |
|---|---|
npm run dev |
Starts the Vite development server with hot module reloading |
npm run build |
Builds an optimised production bundle to dist/ |
npm run preview |
Serves the production build locally for a final check |
npm run lint |
Runs ESLint across the project |
Qwicknotes persists everything through a small useLocalStorage hook that wraps window.localStorage with JSON serialisation and error handling. The following keys are used:
| Key | Purpose |
|---|---|
qwicknotes_notes |
The full array of saved notes |
qwicknotes_search |
Current search query |
qwicknotes_sort |
Active sort option |
qwicknotes_show_favs |
Whether the "favourites only" filter is active |
qwicknotes_filter_tag |
Currently active tag filter |
qwicknotes_all_tags |
The global list of created tags |
qwicknotes_editor_draft |
The in-progress note draft (title, content, colours, tags, favourite state) |
qwicknotes_editing_id |
The ID of the note currently being edited, if any |
qwicknotes_dark |
Dark mode preference |
qwicknotes_tour_seen |
Whether the first-time guided tour has been completed |
Each note object has the shape:
{
id: Number, // Date.now()-based unique id
title: String,
content: String, // sanitised HTML from the rich-text editor
bgColor: String, // hex value, or "" for theme-default
textColor: String, // hex value, or "" for theme-default (auto light/dark)
isFavorite: Boolean,
tags: String[],
createdAt: String, // ISO timestamp
updatedAt: String, // ISO timestamp
}Note: Because storage is local to the browser, notes do not sync across devices or browsers. Clearing your browser's site data for Qwicknotes will permanently delete your notes - export important notes first if you plan to clear storage.
| Action | How to do it |
|---|---|
| Create a note | Type a title and content in the left panel, then click Save Note |
| Edit a note | Click the Edit button on any note card |
| Delete a note | Click Delete on a note card and confirm in the dialog |
| Star a note | Click the star icon on the note card or in the editor |
| Apply a colour | Open Card Style in the editor and pick a background/text colour, or leave on "Auto" to follow the app theme |
| Add a tag | Click Add below the title field, type a name, and press Enter |
| Filter by tag | Use the tag dropdown in the notes list controls |
| Search notes | Type into the search bar at the top of the left panel |
| Sort notes | Use the sort dropdown in the notes list controls |
| Export a single note | Open a note → click Export → choose a format |
| Export all notes | Click Export in the notes list controls → choose a bulk option |
| Export selected notes | Choose Individual download... from the export menu |
| Delete all notes | Click Delete All in the notes list controls and confirm |
| Toggle dark mode | Click the sun/moon switch in the header |
| Shortcut | Action |
|---|---|
Enter |
Advance to the next step of the guided tour (when open) |
Ctrl/Cmd + B |
Bold |
Ctrl/Cmd + I |
Italic |
Ctrl/Cmd + U |
Underline |
Ctrl/Cmd + Z |
Undo |
Ctrl/Cmd + Shift + Z |
Redo |
Standard TipTap/ProseMirror editing shortcuts are supported throughout the note editor.
Qwicknotes uses Tailwind CSS v4's class-based dark mode (@variant dark (&:where(.dark, .dark *))), toggled by adding/removing a .dark class on <html>.
- If a note has no custom background or text colour set, it automatically follows the active app theme (light or dark).
- If a user explicitly picks a background or text colour for a note, that colour is respected consistently across the note card, the detail modal, and the delete-confirmation preview - regardless of the app's light/dark mode.
- Dark mode preference is stored under
qwicknotes_darkand also respects the system'sprefers-color-schemeon first load.
All exports run entirely client-side - no data is uploaded anywhere.
| Format | Scope | Notes |
|---|---|---|
.txt |
Single or bulk | Plain text, HTML stripped |
.md |
Single or bulk | Markdown-flavoured plain text |
.pdf |
Single or bulk | Generated with jsPDF, text-based and reliable |
.zip |
Bulk only | One .txt file per note, generated with JSZip |
Use the Individual Export modal to export a curated subset of notes filtered by favourites, tags, or edit history, rather than exporting everything at once.
Qwicknotes targets modern evergreen browsers with support for localStorage, CSS custom properties, and ES modules - the latest versions of Chrome, Firefox, Safari, and Edge are fully supported. Since all data is stored locally, using the app in a private/incognito window means your notes will be cleared once the session ends.
- Optional import/export of full note backups as JSON
- Note pinning
- Full-text search highlighting within note previews
- Customisable keyboard shortcuts
- PWA support for offline installability
Have an idea? Open an issue or start a discussion on GitHub.
Contributions are welcome! To contribute:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature-name - Make your changes and run
npm run lintto check for issues - Commit your changes with a clear message
- Push to your fork and open a Pull Request
Please keep PRs focused - one feature or fix per PR makes review much easier.
Will my notes sync across devices? No. Qwicknotes stores everything in your browser's local storage, which is scoped to a single browser on a single device. Use the export features to move notes elsewhere.
Is my data sent anywhere? No. There are no network requests involving your note content - everything happens in your browser.
What happens if I clear my browser data? Your notes will be permanently deleted. Export anything important beforehand.
Can I use this offline? Yes, once the app has loaded in your browser it will continue to work without an internet connection.
If Qwicknotes helps you, consider supporting the project:
- Star this repository on GitHub
- Share it with your friends and community
- Leave feedback in GitHub Discussions
- Buy me a coffee
If you enjoyed this project, consider giving it a ⭐ on GitHub. It helps others discover the project and motivates future improvements.
This project is licensed under the MIT License.
MIT License
Copyright (c) 2026 Bilal Malik
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
© 2026 QwickNotes. Licensed under the MIT License.