Light Weight Simple Memo

A lightweight memo pad for Markdown and HTML. Works offline as an installable app (PWA).

Basics

• Type in the editor. Every change is saved automatically in your browser (local storage on this device). Nothing is sent to a server.
• The eye / pencil button in the header switches between Preview and Edit (F2). The icon shows what the button will switch to. The app opens the last memo you used, in preview.
• The browser tab title starts with 👁️ (preview) or ✏️ (editing), and the memo title in the header is shown in italics while you are editing.
• Memos can be written in Markdown or HTML. A memo that starts with an HTML tag is treated as HTML. In preview, scripts, styles, and event attributes are removed for safety. iframe tags are removed too, except YouTube embeds (see below).
• Links in the preview open in a new tab.
• YouTube videos: paste the embed code from YouTube (Share → Embed, an <iframe ... src="https://www.youtube.com/embed/..."> tag) into a memo. The video player is shown in preview, resized to the screen width (16:9) and loaded from youtube-nocookie.com. Only YouTube /embed/ iframes are allowed; iframes from any other site are removed. A video needs an internet connection to play, and YouTube can see that you opened it. A code sample inside a Markdown code block (```) is shown as plain text.
• On a touch screen, in preview mode, swipe left or right to go to the next or previous memo (it wraps around). Swipes that start at the very edge of the screen, or on content that scrolls sideways, are ignored. Swiping is off while editing.
• Drag and drop Markdown, HTML, or text files onto the window to open them as new memos.
• On narrow screens the header buttons do not wrap; swipe the header sideways to reach all of them (on a PC: two-finger swipe, or Shift + mouse wheel). The scroll bar is hidden; a soft fade at the edge shows that more buttons are out of view.
• On a phone in portrait orientation the header (title and buttons) floats at the bottom of the screen. It hides while you scroll down, comes back when you scroll up or switch memos, and hides while the keyboard is open. Tap the ⌄ button at the top right to close the keyboard.
• Title: the first line that has visible text (Markdown or HTML marks are stripped). An imported memo uses its file name instead. The title is also shown in the browser tab. A memo with no visible text is not saved.
• Rename: double-click (or double-tap) the title at the top of the header, or press Alt+R, type a new title, and press Enter. Your text is not changed. Leave the box empty to go back to the first-line title. A memo needs some text before it can be renamed.
• The gear button opens Settings, where you can change the memo text size. (On iPhone the editor never goes below 16px, to stop Safari from zooming in when you type.)
• The color button changes the memo's background color; the circular arrow resets it.
• Each memo has an internal ID, used for editing and deleting.
• The header hides while you scroll down and returns when you scroll up.

Header buttons

Keyboard shortcuts

On macOS, Ctrl can be replaced by Cmd. On a Mac or laptop the F-keys may need Fn to be held. In a normal browser tab, F11 may toggle full screen and some other shortcuts may be reserved by the browser; they work most reliably when the app is installed as a PWA.

Find and replace

• Type a keyword and press Find (or Enter) to find the next match. It wraps around at the end of the memo. Click Find again for the next one.
• The match is shown with a yellow box in the editor (the text itself is not selected; on a PC the cursor is placed just before the keyword), and the app switches to edit mode if needed. The dialog shows its position, such as 3 / 12. The dialog stays open at the top, the editor stays usable, and the keyboard focus stays in the Keyword box, so you can keep pressing Enter. Press F9 to jump back to the Keyword box. The box stays until you type, click in the editor, or change the memo or text size. When you close the dialog, the focus returns to the memo so you can scroll with the keyboard.
• Regex: tick it to treat the keyword as a regular expression (for example foo\d+ or ^TODO). ^ and $ match at the start and the end of each line. A pattern that can match empty text is refused. In Replace, $1, $2, … can be used in the replacement text. A very complicated pattern can make the app slow.
• Keyword history: the last 5 keywords (newest first) are remembered. Press the ▾ button next to the keyword box (or Alt+↓) and pick one; its Case sensitive and Regex settings come back with it. The history is shared with Search all memos. Clear history empties it.
• The Find dialog is compact. The replacement fields are hidden at first; press Replace ▾ in the dialog to show them.
• Replace replaces the match marked with the yellow box by the Replacement text and jumps to the next one. If no match is marked, it just finds the next match.
• All: Replace changes every match at once.
• Case sensitive: when ticked, upper and lower case letters are treated as different. This applies to finding and replacing.
• Esc or the ✕ button closes the dialog.

Memo list

• Tag chips above the list filter the memos (all selected tags must match). See Tags below.
• Memos are sorted by most recently used. The Filter box narrows the list by title as you type (the memo text is not searched).
• Ctrl+N (or ↓) next item, Ctrl+P (or ↑) previous item.
• Space or Enter opens the selected memo and closes the list. While the Filter box has text, Space types a space; use Enter.
• Delete deletes the selected memo after confirmation. The × button on a row does the same; Delete all removes every memo. When a tag or keyword filter is active, it becomes Delete N shown and removes only the memos shown in the list (after a confirmation); the filter is then cleared.
• Esc or the ✕ button closes the list. The same applies to Find.

Outline (headings list)

• In preview, when a memo has at least one heading and is long enough to scroll, a round outline button floats at the bottom right. It is hidden in edit mode. On a phone in portrait orientation it sits above the header and moves down when the header hides.
• Press the button (or Alt+H) to open a floating list of the headings, indented by level. The heading you are reading is shown in bold. Pick a heading to jump to it; the list closes. Esc, a tap on the text, or the button closes it too. The list scrolls inside itself and always stays on the screen.
• You can turn the outline off and on in Settings (gear): Show floating outline in preview. It is on by default.

Search all memos

• Press the search button (Alt+G) to look for a word in the text of your memos. (The Filter in the memo list only looks at titles.)
• Regex and the keyword history work as in Find. Tick Current memo to search only the memo that is open (the tag chips are ignored then).
• The search covers all memos, or only the memos that have all the selected tags (use the tag chips in the dialog; it is the same tag selection as in the memo list). Upper and lower case are treated as the same unless Case sensitive is ticked.
• While searching, only the number of hits and a Cancel button are shown, and you can cancel at any time. When the search finishes (or is cancelled), the hits are listed with the line number, the memo title, and the matching line. At most 1000 hits are listed.
• Click a hit (or pick it with ↑ / ↓ or Ctrl+N / Ctrl+P (the selection wraps around, as in the memo list) and press Enter) to open that memo in edit mode at that line; the keyword is marked with a yellow box and, on a PC, the cursor is placed just before it. The list is kept when you reopen the dialog, until you search again. If the memo has changed since the search, the nearest match is used.
• After the jump, Find (F9) already has the keyword filled in, so you can continue with the next match.

Tags

• Press the tag button (Alt+T) to add tags to the current memo. Type a tag and press Enter (separate several with commas), or click a suggestion made from tags you already use. Click a tag chip to remove it. A memo can have up to 20 tags; a tag can have up to 30 characters. Tags are not case sensitive. A memo needs some text before it can be tagged.
• The tags of the current memo are shown under the title in the header. Click them to edit the tags.
• In the memo list, the tag chips are shown above the list. Click chips to filter: only memos that have all the selected tags are shown (AND). The Filter box still works together with the tags. Press Alt+1 to Alt+9 to toggle the numbered chips, and Alt+0 to clear the tag selection.
• The tag selection also controls switching memos: the < / > buttons, Alt+[ / Alt+], and the preview swipe move only through memos that have all the selected tags (still wrapping around). While a filter is active, Filter: #tag is shown under the title; press its ✕ to clear it. The filter is reset when you reload or reopen the app. If the current memo does not match, it stays on screen until you switch; the next switch goes to the first (or last) matching memo.
• Manage tags (Alt+M, or Settings → Manage tags) lists every tag with its memo count. Rename changes a tag in all memos (renaming to an existing tag merges them). Delete removes the tag from all memos; the memos themselves are kept.

Backup and restore

• Backup (Alt+B, or the floppy disk button → Backup) downloads one .json file with all memos (or only the memos matching the tag filter when one is active; see below) (text, title, background color, tags, ID) and the text size setting.
• Restore (Alt+O, or the floppy disk button → Restore) reads a backup file. You can also drag and drop the .json file onto the window, or open it with Import. Then choose:
  • Merge: keep your current memos and add the ones from the backup. If a memo exists in both (same ID), the newer one is kept.
  • Replace all: discard the current memos and use the backup. If you have any memos, a backup of them is downloaded first (so you can undo), and you are asked to confirm.
• Partial backup: while a tag filter is active (Filter: #tag under the title), Backup saves only the memos that match it. The Backup screen shows how many memos will be saved, the file name contains the tags, and the file is marked as a partial backup. Clear the filter to back up everything. When you Restore a partial backup, the Restore screen says so, and Replace all asks for a stronger confirmation, because every memo that is not in the file would be removed. The automatic safety backup made before Replace all always contains all memos.
• Backups are made by hand and are a good way to move memos to another device or browser. Memos are stored in each browser separately, so back up now and then.

Open-source licenses

This app uses marked to render Markdown. It is loaded from the jsDelivr CDN and cached for offline use.

The MIT License (MIT)

Copyright (c) 2018+, MarkedJS (https://github.com/markedjs/marked)
Copyright (c) 2011-2018, Christopher Jeffrey (https://github.com/chjj/)

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.

Credits

Created by kwrsin + Claude (Anthropic).