🚀 Gist Editor for VS Code

The most intuitive and lightweight GitHub Gist manager for VS Code
Organize, edit, and manage your code snippets with a revolutionary folder hierarchy system

Install Now • Report Bug • Request Feature

---

✨ Why Gist Editor?

Finally, a Gist manager that thinks like a developer. No more flat lists of hundreds of gists. No more lost snippets. Just pure, organized productivity.

🎯 Key Highlights

• 📁 Revolutionary Folder Organization - First VS Code extension to offer true hierarchical folder structure for gists
• 🎯 Intuitive Drag & Drop - Effortlessly reorganize gists and move files between gists
• ⚡ Lightning Fast - Intelligent caching system ensures instant access to your code snippets
• 🎨 Beautiful & Intuitive UI - Clean, native VS Code interface that feels right at home
• 🔐 Seamless GitHub OAuth - One-click authentication, no token hassles
• 💾 Auto-Save Magic - Edit and save gists as naturally as local files

🎬 See It

---

🌟 Revolutionary Features

📂 Hierarchical Folder Organization

The game-changer you've been waiting for

Transform your chaotic gist collection into a beautifully organized knowledge base:

📁 React
  ├── 📁 Components
  │   ├── 📄 Button Component
  │   └── 📄 Modal Hook
  ├── 📁 Utils
  │   └── 📄 Custom Hooks
  └── 📄 Context Patterns

📁 Python
  ├── 📁 Scripts
  │   └── 📄 Data Processing
  └── 📁 ML
      └── 📄 TensorFlow Models

Simply name your gists with paths like React/Components - Button Component and watch the magic happen!

⚡ Lightning-Fast Performance

• Smart Caching: In-memory cache minimizes API calls
• Lazy Loading: Gists load on-demand for instant startup
• Optimized Rendering: Smooth scrolling even with hundreds of gists
• Background Sync: Updates happen seamlessly without blocking your workflow

🎨 Beautiful, Native UI

• Seamless Integration: Looks and feels like native VS Code
• Theme Support: Automatically adapts to your VS Code theme
• Intuitive Icons: Visual cues for public/private, file types, and actions
• Clean Sidebar: Organized views for personal, starred gists, and comments

🔒 Modern Authentication

• GitHub OAuth: One-click sign-in through your browser
• Secure Token Storage: VS Code handles your credentials safely
• Session Persistence: Stay logged in across sessions
• Fallback Support: Manual token option for advanced users

---

🚀 Quick Start

1️⃣ Install in 10 Seconds

ext install lywedo.gist-editor

Or search "Gist Editor" in VS Code Extensions (Ctrl+Shift+X)

2️⃣ Sign In with One Click

1. Click the GitHub icon in the Activity Bar
2. Click "Sign in with GitHub"
3. Authorize in your browser
4. Done! Start managing your gists instantly

3️⃣ Create Your First Organized Gist

From Selection (Ctrl+Alt+Shift+S):

• Select code → Right-click → "Create Gist from Selection"

From File (Ctrl+Alt+Shift+G):

• Open file → Create gist with automatic syntax highlighting

With Folder Organization:

• Name it React/Hooks - useCustomHook to auto-organize!

---

🛠️ Powerful Features

🔍 Intelligent Fuzzy Search

Find your gists instantly with powerful search capabilities:

Search Everywhere:

• 📄 Gist Names - Search by gist titles
• 📝 Descriptions - Find gists by their descriptions
• 📋 File Names - Locate specific files within gists
• 🔎 Content - Search through actual file contents

Smart Fuzzy Matching:

• Exact Match - Perfect word matches ranked highest
• Substring Match - Find text anywhere in your gists
• Fuzzy Match - Characters don't need to be consecutive (e.g., "rct" finds "React")
• Position Bonus - Matches near the beginning score higher

Intelligent Filtering:

• 🌐 Filter by public/private visibility
• 📁 Filter by folder path
• 🎨 Filter by programming language
• 🎯 Combine multiple filters for precision search

Ranking & Results:

• Results ranked by relevance and match type
• Line numbers for content matches
• Context preview for better visibility
• Top 50 results for quick browsing

Lightning-Fast Performance:

• ⚡ Instant Second Opens - Search results cached after first use for zero-delay access
• 🔄 Parallel Tag Fetching - Tags loaded simultaneously (10x faster for large collections)
• ⏱️ Smart Debouncing - 300ms debounce prevents laggy typing experience
• 🧠 Intelligent Cache - Automatically refreshes when gists or tags change
• 📊 Visual Feedback - Busy indicator shows when search is building/updating

📁 Smart Folder Management

Organize your gists with powerful folder operations:

Create Gists Directly in Folders:

• Right-click on any folder → "Create Gist in Folder"
• Automatically places the new gist inside the selected folder
• Maintains your folder hierarchy without manual renaming

Rename Folders:

• Right-click on any folder → "Rename Folder"
• Bulk rename all gists within the folder
• Reorganize your gist structure instantly
• Update folder paths in batch operations

📝 Multi-Method Gist Creation

Method	Shortcut	Description
From Selection	Ctrl+Alt+Shift+S	Create gist from selected code
From Current File	Ctrl+Alt+Shift+G	Turn entire file into a gist
Empty Gist	Ctrl+Alt+G	Start with a blank gist
Multi-file	Via UI	Create gists with multiple files

🗂️ Smart Organization

Automatic Grouping:

• 🌐 Public Gists - Shareable with the world
• 🔒 Private Gists - Your secret code vault
• ⭐ Starred Gists - Quick access to favorites

Folder Magic:

Naming Convention: "Folder/Subfolder - Gist Name"
Examples:
  "React/Hooks - Custom Authentication Hook"
  "Python/Utils - Data Processing Scripts"
  "DevOps/Docker - Nginx Configuration"

📊 GitHub API Usage Tracking

Monitor your GitHub API consumption with built-in statistics:

Track API Activity:

• 📈 Real-time API call monitoring
• 📝 Breakdown by operation type (gists, comments, history, stars, user info)
• ⚡ Session duration and total calls made
• 🔄 Rate limit status and reset time

Access Statistics:

• Click the Graph Icon (📊) in the "My Gists" view header
• Command: View API Usage Statistics
• Shows detailed report in output channel

Stay Within Limits:

• ✓ Green status if plenty of calls remaining
• ⚠️ Warning indicator when approaching rate limit
• ❌ Critical alert if rate-limited
• View exactly how many calls remain (e.g., "450 / 5000")

💬 Comment System

• View all comments on your gists
• Add comments directly from VS Code
• Delete your own comments
• Real-time comment count updates

🏷️ Tags & Labels

Organize gists with powerful tagging system synced to GitHub:

Tag Management:

• ➕ Add Tags - Right-click any gist → "Add Tag"
• ➖ Remove Tags - Right-click any gist → "Remove Tag"
• 🗑️ Clear All - Remove all tags at once
• 📊 View Tags - See tag count badges next to gist names with full list on hover

Storage & Sync:

• 💾 GitHub-Synced - Tags stored in gist comments, synced across all your devices
• 🔒 Automatic Sync - Changes instantly appear on GitHub (visible in web interface)
• 🧹 Clean Display - System tags comment hidden from user comments view
• ✨ Human-Readable - Tags stored as [tag:name] format for clarity

Tag Search:

• 🔍 Tag-Based Search - Search gists by tag names
• 💡 Smart Discovery - Tags weighted high in search rankings
• 🔄 Parallel Fetching - All tags loaded simultaneously for speed

🔄 Version Control

• View complete revision history
• Compare different versions
• See who made changes and when
• Restore previous versions if needed

⌨️ Productivity Shortcuts

Action	Windows/Linux	macOS	Description
Save Gist	Ctrl+Alt+S	Cmd+Alt+S	Save current gist instantly
Create Gist	Ctrl+Alt+G	Cmd+Alt+G	Create new empty gist
From File	Ctrl+Alt+Shift+G	Cmd+Alt+Shift+G	Create from current file
From Selection	Ctrl+Alt+Shift+S	Cmd+Alt+Shift+S	Create from selected text

📊 File & Folder Management

Right-click any gist for powerful actions:

• ➕ Add File - Expand gists with multiple files
• 🖼️ Add Image - Upload images directly to your gists (PNG, JPG, GIF, SVG, WebP, BMP)
• ✏️ Rename - Update descriptions and filenames
• 🌐 Open in GitHub - Jump to web interface
• 📜 View History - See all revisions
• ⭐ Star/Unstar - Mark favorites
• 🗑️ Delete - Remove with confirmation

Right-click any folder for organization:

• ➕ Create Gist in Folder - Add new gists directly to the folder
• ✏️ Rename Folder - Reorganize your folder structure
• 🗑️ Delete Folder - Remove the entire folder hierarchy

🖼️ Image Upload Support

Upload images directly to your gists using Git operations:

Supported Formats:

• PNG, JPEG, GIF, WebP, BMP, SVG, ICO
• Configurable max file size (default: 10MB)
• GitHub limit: 100MB per file

Two Ways to Upload:

Method 1: Drag & Drop ⭐ Recommended

1. Drag an image file from your file explorer
2. Drop it onto a gist in the sidebar (not the editor!)
   • Look for the Gist Editor icon in the Activity Bar (left sidebar)
   • Drag and drop onto a gist item in the "My Gists" tree view
3. Image is automatically uploaded
4. Handles filename conflicts with auto-rename options

Important: Drop the image onto a gist in the sidebar, not into the editor window. Dropping in the editor will just open the image for viewing.

Method 2: Right-Click Menu

1. Right-click on any gist → "Add Image to Gist"
2. Select an image from your file system
3. Customize filename (optional)
4. Image is automatically uploaded via Git

Features:

• 📎 Multi-file upload: Drop multiple images at once
• 🔄 Duplicate handling: Auto-rename or overwrite existing files
• 📊 Progress feedback: Real-time upload notifications
• ⚡ Fast & secure: Uses Git operations for reliable uploads
• 🖼️ Image preview: Hover over image files to see thumbnail previews in tooltips
• 📋 Easy referencing: Copy image URLs, Markdown, or HTML tags with one click

Why Git-Based?:

• GitHub's REST API doesn't support binary files
• Uses secure Git clone/commit/push workflow
• Supports all image formats without size restrictions (up to 100MB)
• Images become part of gist history

Copying Image References 📋:

Need to reference an image in a markdown file or HTML document? Right-click any image file and choose:

1. Copy Image URL - Raw GitHub URL

   https://gist.githubusercontent.com/username/gist-id/raw/hash/image.png
   

2. Copy as Markdown Image - Perfect for README.md files

   ![Description](https://gist.githubusercontent.com/.../image.png)

   • Prompts for alt text (image description)
   • Generates proper markdown syntax
   • Ready to paste into any markdown file

3. Copy as HTML Image - For web pages and HTML docs

   <img src="https://gist.githubusercontent.com/.../image.png" alt="Description" width="300" />

   • Prompts for alt text and optional width
   • Generates semantic HTML
   • Supports pixel (300) or percentage (50%) widths

Example Workflow:

1. Upload screenshot.png to a gist
2. Right-click → "Copy as Markdown Image"
3. Enter alt text: "App dashboard screenshot"
4. Paste into README.md: ![App dashboard screenshot](https://...)

Configuration:

{
  "gistEditor.maxImageSizeMB": 10,
  "gistEditor.supportedImageFormats": [".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp"]
}

🎯 Drag & Drop Organization

Effortlessly reorganize your gists with intuitive drag-and-drop:

Upload Images from File Explorer ⭐ New:

• Drag image files from your file explorer
• Drop them onto any gist in the tree view
• Multiple images can be dropped at once
• Automatic duplicate detection with rename options

Move Gists Between Folders:

• Drag a gist and drop it on any folder to move it
• Automatically updates gist organization structure
• Works with subfolders and hierarchies

Move Files Between Gists:

• Drag files from one gist and drop them on another
• Files are automatically copied to target gist
• Source file is removed after successful transfer
• Preserves file content and language detection

Example Workflows:

Image Upload (via Drag & Drop):
1. Open file explorer → Find an image (e.g., screenshot.png)
2. Drag the image file from explorer
3. Drop it onto a gist in the SIDEBAR tree view (not the editor!)
   └─ Look for "My Gists" panel on the left
4. Image uploads automatically via Git
5. Image appears in the gist files list

File Organization:
1. Expand "React/Hooks" gist → See its files
2. Drag "useAuth.js" file
3. Drop on "React/Utilities" gist
4. File instantly moved with all content preserved

---

🎨 Language & File Type Support

100+ Languages with Automatic Detection:

Web Development JavaScript/TypeScript HTML/CSS/SCSS React/Vue/Svelte JSON/XML/YAML

Programming Python/Java/Go Rust/C++/C# Ruby/PHP/Swift Kotlin/Scala

DevOps & Data Dockerfile Terraform/HCL SQL/GraphQL Markdown/LaTeX

Binary Files PNG/JPEG/GIF WebP/BMP/SVG ICO/TIFF Image support via Git

---

🔧 Advanced Configuration

For Power Users

Manual Token Setup (Optional):

{
  "gistEditor.githubToken": "ghp_your_token_here"
}

Image Upload Configuration:

{
  "gistEditor.maxImageSizeMB": 10,
  "gistEditor.supportedImageFormats": [".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp"]
}

Token Scopes Required:

• ✅ gist - Full gist access (includes image upload via Git)

---

📈 Why Developers Love Gist Editor

"Finally, a gist manager that understands organization! The folder hierarchy is a game-changer. I can now find my snippets in seconds instead of minutes."
— Senior Full Stack Developer

"Lightweight yet powerful. Doesn't slow down VS Code startup like other extensions. The caching is brilliant!"
— DevOps Engineer

"The OAuth integration is seamless. No more managing tokens manually. It just works!"
— Frontend Developer

---

🚦 System Requirements

• VS Code: Version 1.104.0 or higher
• GitHub Account: Free account works perfectly
• Internet: Required for syncing with GitHub
• WSL Support: ✅ Fully compatible with WSL (Windows Subsystem for Linux)
  • Automatically converts Windows paths to WSL paths for drag-and-drop
  • Drag images from Windows Explorer when running VS Code in WSL

---

🐛 Troubleshooting

Can't see my private gists?

Make sure your token has the gist scope:

1. Click the gear icon (⚙️) in the sidebar
2. Select "Sign in with GitHub" again
3. Ensure you authorize the gist scope

Gists not loading?

1. Check your internet connection
2. Click the refresh button in the sidebar
3. Try signing out and back in

Changes not saving?

• Ensure you're using Ctrl+Alt+S (or Cmd+Alt+S on Mac)
• Check that you're still authenticated
• Verify your internet connection

---

🤝 Contributing

We welcome contributions! See our Contributing Guide for details.

# Clone the repo
git clone https://github.com/lywedo/gist-editor

# Install dependencies
npm install

# Start development
npm run watch

---

📜 License

MIT License - see LICENSE file for details

---

🙏 Acknowledgments

• Built with ❤️ for the VS Code community
• Powered by GitHub's Gist API
• Icons from VS Code's Codicon library

---

📞 Support

• 🐛 Report Issues
• 💡 Request Features
• 📖 Documentation
• ⭐ Star on GitHub

---

Made with ❤️ by developers, for developers

⬆ Back to Top