📝 Code Snippet Manager

A lightweight, portable code snippet manager built as a single HTML file. Store, organize, search, and manage your code snippets with a clean, modern interface that works across all your devices.

✨ Features

Core Functionality

📁 Snippet Management: Create, edit, delete, and organize code snippets
🔍 Advanced Search: Search across titles, code content, documentation, and languages
🏷️ Language Support: 20+ programming languages with syntax highlighting
📖 Documentation: Optional detailed documentation field for each snippet
🎯 Smart Filtering: Filter by language and sort by various criteria

Import/Export

💾 Native File Dialogs: Choose custom filenames and paths for exports
🔄 Smart Import: Merge, replace, or append options to handle duplicates
📤 Auto-Export: Optional auto-save functionality
🚀 Portable: Single HTML file + JSON backup = complete solution

User Experience

⌨️ Keyboard Navigation: Full keyboard control with intuitive shortcuts
📱 Mobile Responsive: Works seamlessly on desktop, tablet, and mobile
🎨 Font Scaling: Adjustable font size for better readability
🎯 Visual Selection: Clear highlighting for selected snippets
🌐 Cross-Platform: Runs in any modern web browser

🚀 Quick Start

Installation

Download or save the HTML file to your computer
Double-click to open in your default browser
Your snippets automatically save to browser storage as you work

First Use

Auto-loading: Previously saved snippets load automatically when you open the app
Import existing collection: Click "Import" to load a snippets-backup.json file
Create new snippet: Click "New" or press Insert key
Search and filter: Use the search bar and language filter
Export for backup: Click "Export" to save your collection to a file

📋 Keyboard Shortcuts

Browse View

Key	Action
`Insert`	Create new snippet
`↑/↓`	Navigate through snippets
`Enter`	Edit selected snippet
`Delete`	Delete selected snippet
`Ctrl+F`	Focus search bar

File Operations

Key	Action
`Ctrl+E`	Export snippets
`Ctrl+I`	Import snippets
`Ctrl+V`	Read from clipboard

Add/Edit Modal

Key	Action
`Ctrl+S`	Save snippet
`Escape`	Close modal without saving

Display Controls

Key	Action
`+` or `🔤+` button	Increase font size
`-` or `🔤-` button	Decrease font size
`0`	Reset font size to default

Mouse Actions

Single-click: Select snippet
Double-click: Edit snippet
Action buttons: Copy, edit, or delete individual snippets

🏷️ Supported Languages

Web: JavaScript, TypeScript, HTML, CSS
Backend: Python, Java, C++, C#, Go, Rust, PHP, Ruby, R, Scala
Data: SQL, JSON, XML, YAML, Excel
Analytics: PowerBI M-Code, PowerBI DAX, Kusto (KQL), PySpark
Scripts: Bash, PowerShell, Windows Batch
Documentation: Markdown
Other: Custom language support

💾 File Format

Snippets are stored in JSON format with the following structure:

[
  {
    "id": "unique-identifier",
    "language": "javascript",
    "description": "Snippet title/description",
    "documentation": "Optional detailed explanation",
    "code": "function example() {\n  return 'Hello World';\n}",
    "created": "2024-01-01T12:00:00.000Z",
    "modified": "2024-01-01T12:30:00.000Z"
  }
]

Required Fields

id: Unique identifier
language: Programming language
description: Brief title/description
code: The actual code content
created: Creation timestamp

Optional Fields

documentation: Detailed explanation or usage notes
modified: Last modification timestamp

🔄 Workflow Examples

Daily Development

Morning: Open snippet manager (auto-loads your previous work)
During work: Add snippets (auto-saves as you type)
End of day: Export backup to cloud storage for cross-device sync

Cross-Device Sync

Device A: Create/modify snippets → Export to cloud storage
Device B: Import from cloud storage → Continue working (auto-saves locally)
Repeat: Keep collections synchronized by periodically exporting/importing

Team Sharing

Individual: Curate personal collection (auto-saves locally)
Export: Generate team-specific snippet collections
Share: Distribute JSON files via email, Git, or shared drives
Import: Team members import and merge with their collections

📱 Platform Compatibility

Desktop Browsers

✅ Chrome/Chromium (recommended)
✅ Firefox
✅ Safari
✅ Microsoft Edge

Mobile Browsers

✅ Chrome Mobile
✅ Safari iOS
✅ Firefox Mobile
✅ Samsung Internet

Operating Systems

✅ Windows (all versions)
✅ macOS
✅ Linux (all distributions)
✅ Steam Deck (Desktop mode)
✅ iOS/iPadOS
✅ Android

🛠️ Advanced Features

Auto-Save

Your snippets automatically save to browser storage as you work:

✅ Continuous saving: Every create, edit, or delete action auto-saves
✅ Auto-loading: Snippets reload automatically when you reopen the app
✅ Browser persistence: Data persists across browser sessions
⚠️ Single browser: Storage is specific to each browser/device

Auto-Export

Enable auto-export to automatically save your collection after each change:

Click "Auto" button
Confirm the prompt
Choose save location for each auto-save

Import Options

When importing, choose how to handle existing snippets:

Merge: Add new snippets, skip duplicates (recommended)
Replace: Replace entire collection with imported snippets
Append: Add all snippets (may create duplicates)

Font Scaling

Adjust font size for better readability:

Press + to increase font size (70% - 200% range)
Press - to decrease font size
Press 0 to reset to default size
Use 🔤+ and 🔤- buttons in the header

Search Tips

Search works across all text fields (title, code, documentation)
Use language filter to narrow results
Combine search terms with filters for precise results
Sort results by date, name, or language

🔧 Troubleshooting

Common Issues

Snippets not loading

Solution: Check if you have existing data in browser storage
Alternative: Import a snippets-backup.json file to get started
Note: Each browser stores data separately

Lost snippets after browser update

Solution: Regular exports provide backup protection
Prevention: Export your collection periodically to files
Browser storage can be cleared by browser updates or cleanup tools

Snippets not syncing between devices

Expected: Browser storage is device/browser-specific
Solution: Use Export → Import workflow for cross-device sync
Alternative: Enable Auto-Export for regular file backups

Export not working

Modern browsers: Native save dialog should appear
Older browsers: File downloads to default Downloads folder
Check browser permissions for file access

Keyboard shortcuts not working

Ensure no input fields are focused
Some shortcuts only work in specific contexts (browse vs. modal)
Check if browser extensions are intercepting key combinations

Mobile layout issues

Try refreshing the page
Clear browser cache if layout appears broken
Ensure browser zoom is at 100%

Import/Export errors

Verify JSON file format is correct
Check file permissions
Try smaller file sizes if importing large collections

Browser Permissions

For optimal functionality, allow these permissions:

File System Access: For native save dialogs (Chrome/Edge)
Clipboard Access: For paste functionality
Local Storage: Required for automatic snippet saving and persistence

📄 License

This project is released under the MIT License. Feel free to modify and distribute as needed.

🤝 Contributing

This is a single-file application designed for simplicity and portability. To contribute:

Test changes thoroughly across different browsers
Maintain compatibility with mobile devices
Keep the single-file architecture
Document any new features or changes

📞 Support

For issues or questions:

Check the troubleshooting section above
Verify browser compatibility
Test with a fresh browser session
Check browser console for error messages

Version: 1.0.1
Last Updated: June 2025
Compatibility: Modern browsers supporting ES6+

Name		Name	Last commit message	Last commit date
.gitignore		.gitignore
changelog.md		changelog.md
readme.md		readme.md
snippetManager.html		snippetManager.html

Latest commit

History

Folders and files

Repository files navigation