WrapMate is a powerful VS Code extension that lets you quickly wrap selected HTML text with custom tags. It features a live preview that shows exactly where your tags will be placed as you type!
Features
✨ Live Preview: See tags appear in real-time as you type
🎯 Multi-Selection Support: Wrap multiple text blocks simultaneously
⚡ Fast & Intuitive: Simple keyboard shortcut for quick access
🎨 Visual Feedback: Highlighted preview shows exactly what will be wrapped
🔄 Smart Cancellation: Press ESC to cancel without any changes
Usage
Select the text you want to wrap in an HTML file
Press Ctrl+Shift+W (Windows/Linux) or Cmd+Shift+W (Mac)
Type the tag name (e.g., div, span, section)
Watch the live preview update as you type
Press Enter to apply or ESC to cancel
Example
Before:
Hello World
After wrapping with div:
<div>Hello World</div>
Multiple Selections
WrapMate supports wrapping multiple selections at once:
Hold Alt (Windows/Linux) or Option (Mac) and click to create multiple cursors
Select different text blocks
Use WrapMate to wrap all selections with the same tag
Requirements
VS Code version 1.93.0 or higher
Works with HTML files
Keyboard Shortcuts
Command
Windows/Linux
Mac
Wrap with Element
Ctrl+Shift+W
Cmd+Shift+W
Installation
Open VS Code
Press Ctrl+P / Cmd+P to open the Quick Open dialog