<!-- Sidebar -->
<div class="qn-sidebar">
  <div class="qn-search-wrap">
    <input class="qn-search" id="qn-search" type="search" placeholder="Search notes..." oninput="QN.onSearch(this.value)" />
  </div>
  <div class="qn-note-list" id="qn-note-list"></div>
  <div class="qn-sidebar-footer">
    <button class="qn-new-btn" onclick="QN.newNote()">+ New Note</button>
  </div>
</div>

<!-- Editor -->
<div class="qn-editor-pane" id="qn-editor-pane">
  <!-- empty state shown when no note selected -->
  <div class="qn-empty" id="qn-empty">
    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
    <p>No note selected.<br>Create one with <strong>+ New</strong>.</p>
  </div>
  <!-- title bar -->
  <div id="qn-title-bar" class="qn-title-bar" style="display:none">
    <input class="qn-note-name-input" id="qn-note-name" type="text" placeholder="Note title..." oninput="QN.onTitleChange(this.value)" />
  </div>
  <!-- textarea -->
  <textarea class="qn-textarea" id="qn-textarea" placeholder="Start writing your note here..." style="display:none" oninput="QN.onTextChange(this.value)"></textarea>
  <!-- status bar -->
  <div class="qn-status" id="qn-status" style="display:none">
    <span id="qn-words">0 words</span>
    <span id="qn-chars">0 chars</span>
    <span class="qn-saved hidden" id="qn-saved-indicator">Saved &#10003;</span>
  </div>
</div>

How to Use Quick Notes

Type in the large text area on the right. Your note is saved automatically to your browser every 2 seconds β€” no account, no server, no internet connection needed after the page loads. The last-saved indicator in the status bar confirms each save. Press Ctrl+S (or Cmd+S on Mac) at any time to force an immediate save.

Multiple notes: Click + New in the toolbar or sidebar to create a new note. Each note gets its own entry in the left sidebar, sorted by most recently edited. Click any note in the list to switch to it instantly.

Renaming: Click the title bar at the top of the editor to rename the current note. The title updates in the sidebar as you type.

Search: Type in the search box above the note list to filter notes by title or content. Matching text is highlighted in yellow.

Download: The Download button exports the current note as a plain .txt file to your device. The filename is based on the note title.

Delete: Hover over any note in the sidebar to reveal the Γ— button, then click to delete. A confirmation prompt prevents accidental deletion.

Theme: Toggle between light and dark mode with the button in the top-right corner of the toolbar. Your preference is remembered across visits.

Print: Click the Print button to open a clean print-preview window formatted for paper.

Why Keep Notes in Your Browser?

Browser-based notepads have one major advantage over native apps: they are available on any device with a browser, with zero installation. When you are on a work computer, a public library terminal, or a friend’s laptop, Quick Notes is just a bookmark away. All data lives in your browser’s localStorage, which means it stays private β€” nothing is ever uploaded.

For sensitive information, however, keep in mind that localStorage is accessible to JavaScript running on the same origin, so treat it like any local file on your computer: fine for working notes, but use proper encryption tools for truly sensitive material.

Unlike cloud note-taking services, Quick Notes works entirely offline after the first page load. If your internet drops mid-session, you will not lose anything β€” the auto-save timer keeps running and your data stays local.

Format and preview Markdown β†’ Markdown Editor

Count words and characters in your writing β†’ Word Counter

Change text case instantly β†’ Text Case Converter