Temp Notes - A Fully Offline Private Draft App 📝

这是一个 100% 完全离线 运行的临时笔记应用，支持快速草稿、条目存档、导入导出。所有数据仅保存在本地浏览器，零网络请求、零隐私泄露。随手的草稿、临时信息都可以在这里安全地记录和管理，无需打开臃肿的笔记应用。无论是捕捉灵感、记录待办事项，还是临时粘贴文本，临时笔记都是一个轻量级的工具，帮助你高效管理临时信息。

A 100% fully offline temporary note app supporting quick drafts, entry archiving, and data import/export. All data stays in your local browser with zero network requests and zero privacy leakage.

When you need to quickly capture ideas, inspiration, or to-dos, Temp Notes provides a fast and secure environment to record and manage your notes without opening a bloated note app. For temporary text pasting or storing ephemeral information, it's a lightweight tool that opens instantly, helping you efficiently manage temporary information.

Your notes, your data, always in your control: JSON import/export makes it easy to backup, migrate, or recover your data anytime, anywhere.

• Repository: https://github.com/Muyu-Chen/Temp-Notes
• 中文 README: Read the Chinese version

Your notes, your data, always under your control. JSON import/export makes backup, migration, and recovery simple anytime.

🌐 Online Demo

Two independent deployments with the same core app (isolated by browser same-origin policy, data does not interoperate):

URL	Description
muyyy.link/draft	Deployment 1, currently close to the GitHub version
imagingmodel.com/draft	Deployment 2, slightly behind GitHub but more stable

Why is data not shared? Due to the same-origin policy, pages from different domains cannot access each other's local storage. Notes are strictly isolated per domain.

How to Deploy

Clone the repository and open ./index.html directly. No server configuration is required.

git clone https://github.com/Muyu-Chen/Temp-Notes.git

You can run it locally after cloning, clone directly on a server, or upload the entire folder to any static hosting platform (such as GitHub Pages or Netlify). This project is fully static and needs no backend.

Privacy Guarantee

• Fully offline: 100% local browser execution, zero network connection
• Open source: all JavaScript files are open, with no hidden network requests
• Local storage only: notes are stored in LocalStorage/IndexedDB
• Never uploaded: your data is never sent anywhere
• No tracking: no analytics, no cookies, no hidden connections
• Tips: there is an llm api configuration option in settings, but this feature is currently in design only and makes no network requests. Future plans may support third-party LLM APIs (such as OpenAI), while base_url/api_key are user-provided and user-stored only. LLM features are disabled by default.

Privacy Details

In the JavaScript codebase:

• No fetch() requests
• No XMLHttpRequest
• No WebSocket connections
• No external resource dependencies required for offline usage
• Only local LocalStorage/IndexedDB operations

All code is open and auditable.

Project Structure

Temp-Notes/
├── css/                    # Style directory
│   ├── theme.css           # Theme system (color variables)
│   ├── base.css            # Base styles (resets, utilities)
│   ├── layout.css          # Layout structure
│   └── components.css      # UI component styles
├── js/                     # JavaScript modules
│   ├── main.js             # App entry + event binding
│   ├── constants.js        # Constant definitions
│   ├── utils.js            # Utility functions
│   ├── storage.js          # Storage management
│   ├── dom-manager.js      # DOM access wrapper
│   ├── ui-controller.js    # UI rendering + feedback
│   ├── app-controller.js   # Core business logic
│   ├── modal.js            # Common modal component
│   └── initialize.js       # App state initialization
├── index.html              # App entry page
├── README.md               # English documentation
└── readme-chinese.md       # Chinese documentation

Architecture

Layered Design

1. Presentation layer

   • ui-controller.js: UI rendering and state display
   • css/*: all style files

2. Business logic layer

   • app-controller.js: core business flows
   • constants.js: business constants

3. Data access layer

   • storage.js: LocalStorage/IndexedDB operations
   • dom-manager.js: DOM operations

4. Utilities layer

   • utils.js: common helper functions

Module Responsibilities

Module	Responsibility	Exports
constants.js	Constant definitions	STORAGE_KEYS, THEMES, DEFAULT_THEME
utils.js	Helper functions	Time format, word count, byte conversion, etc.
storage.js	Storage management	Load/save, import/export handling
dom-manager.js	DOM management	DOMManager class
ui-controller.js	UI control	UIController class
app-controller.js	Business logic	AppController class
main.js	App bootstrap	Initialization + event binding
modal.js	Modal UI	Modal class
initialize.js	Initialization logic	initializeAppState function

CSS Structure

theme.css

• CSS variable definitions (--bg, --text, --accent, etc.)
• Dark/light theme switching

base.css

• Global reset (box-sizing, margin, font, etc.)
• Utility classes (.muted, .small, .mono)

layout.css

• Main containers (.app, header, .main, .panel)
• Responsive design (media queries)

components.css

• UI components (button, textarea, input, card, etc.)
• Interaction states (hover, active)

Quick Start

Keyboard Shortcuts

• Ctrl+S: Save current draft
• Ctrl+K: Search archived entries
• Ctrl+L: Clear draft

Data Flow

User input
   ↓
Captured by DOMManager
   ↓
Processed by AppController
   ↓
Persisted by Storage + rendered by UIController
   ↓
User receives feedback

📝 Main Features

• 🖊️ First-run usage guide popup
• ✍️ Auto-save drafts
• 📦 Entry archive management
• 🔍 Full-text search
• 📊 Real-time word/storage stats
• 🌓 Dark/light theme switching
• 💾 Export to JSON
• 📥 Import from JSON (merge + dedup supported)
• ⌨️ Rich keyboard shortcuts

🔧 Extension Guide

TODO - Completed

• Switched to IndexedDB for larger storage capacity and broader client compatibility.
• Added symmetric encryption to protect data with a password.
• Merged draft-to-entry save logic to update matched entries instead of duplicating.
• Optimized Chinese font stack for better readability.
• Beautified scrollbar style.
• Added font size settings.
• Replaced clear entry with a More panel containing recycle bin + import/export.
• Built recycle bin UI with single delete, bulk clear, and confirmation dialogs.
• Changed delete flow to move entries into recycle bin first.
• Implemented recycle bin management with double confirmation for destructive actions.
• Added JSON import/export with deduplication and format compatibility.
• Implemented a hard break logic: if draft becomes empty, next save must create a new entry ID.
• Set default encryption password to password when input is empty; default-password notes can auto-decrypt.
• Retained password hint after decryption for quick re-encryption.
• Added a small GitHub link next to the main title.
• Enabled click-to-edit entry titles outside encryption flow.
• Auto-filled encryption modal title from current entry title.
• Fallback to first line of body when title is empty.
• Introduced initialize.js to improve first-open bootstrap behavior.

TODO - Planned

• Improve loading performance and add animation.
• Add TXT format download in notes menu for easy sharing on Mac.
• Modify the "Clear Draft Area" prompt: if the user has already saved a draft, clear it directly without showing the prompt; if the user has never saved a draft, show the prompt to prevent accidental actions.
• Repeatedly saving a draft no longer updates the timestamp; the save time is only updated when the draft content changes.
• Add configurable default password in Settings. New notes encrypted with an empty password should use this updated default, while previously encrypted notes keep their original default password.
• Add one-click migration from old default password to new default password, so previously default-password-encrypted notes can be batch-updated safely (backup recommended before migration).
• Add remember-password-after-decrypt as a user option, so users can choose whether to auto-fill next time.
• Auto-clean expired archive entries (e.g., older than 30 days).
• Add recycle bin auto-expiry (similar to recently deleted in photo apps).
• Support image attachment and storage.
• Add optional sync feature with user-configured server POST/GET endpoints (default off).
• Add a lightweight Python server component with basic data receive/read APIs + CORS support.

Adding New Features

1. Add a new UI component

   • Write styles in css/components.css
   • Add rendering logic in ui-controller.js

2. Add a new business feature

   • Implement methods in app-controller.js
   • Bind events in main.js

3. Add new storage data

   • Add load/save methods in storage.js
   • Define new storage keys in constants.js

4. Add new utility helpers

   • Implement and export in utils.js

Adding a New CSS Theme

/* Add a new theme in css/theme.css */
[data-theme="custom"] {
  --bg: #your-color;
  --text: #your-color;
  /* ... other variables ... */
}

💡 Best Practices

1. Module independence: each JS module handles a single responsibility.
2. Input validation: validate all public API inputs.
3. Error handling: use try-catch around critical operations.
4. Performance: debounced draft save (250ms).
5. Accessibility: keep semantic HTML structure.

🐛 Known Limitations

• Browser storage size limits (typically 5-10MB)
• No offline sync
• Single-tab usage recommended (multi-tab may conflict)

📦 Browser Compatibility

• Chrome/Edge 85+
• Firefox 78+
• Safari 14+
• ES6 module support required

📄 License

AGPL-3.0 (GNU Affero General Public License v3.0)

• All modifications must be open sourced.
• Commercial usage must open source the full code.
• Network service usage is also covered.

See the LICENSE file for details.

🤝 Commercial Licensing

If you need commercial licensing or a different license agreement, please visit:

https://imagingmodel.com/

Contact us to discuss commercial license options or cooperation.

---

Developer: MuYYY @ Chengdu Insaite Technology Co., Ltd.
Latest version: 1.1.0
License: AGPL-3.0
AI usage: This project was built with AI assistance. Some code was AI-generated, then reviewed and edited manually. The documents in ./doc were generated to help AI understand the project and should be treated as reference material, which have not been manually edited.

Welcome to open issues, feature requests, and PRs on GitHub!