HBS / Handlebars Live Viewer
Real-time live preview for Handlebars templates with dynamic variables injection & responsive viewports.
✨ Key Features
- 📂 Seamless File Selection:
- Open preview instantly via the editor title bar eye icon (
$(eye)) when viewing any .hbs / .handlebars file.
- Right-click any template in the Explorer ➔ Open Handlebars Preview.
- Switch templates on-the-fly inside the preview webview or via Command Palette (
HBS Viewer: Select Template & Open Preview).
- ⚡ Live File Watching & Instant Re-rendering:
- Re-renders as you type in the editor in real-time with zero save latency.
- Automatically detects file modifications from disk, git operations, or branch switching.
- 🎛️ Floating & Draggable Variables Dialog:
- Independent floating popup modal that never squishes or disrupts the preview canvas.
- Drag anywhere across the screen and resize freely.
- ⚡ Auto-Detect Variables: Introspects template AST to discover variable keys and pre-populate sample JSON mock data with one click.
- Format / Beautify: Clean up and indent JSON automatically.
- 📂 Load / 💾 Save JSON: Import mock data from workspace
.json files or export context data.
- Per-Template Persistence: Automatically saves your custom variables per template file across VS Code sessions.
- 📱 Multi-Device Responsive Viewports:
- Test responsive templates across standard device viewports:
- 🖥️ Responsive (Full)
- 📱 Mobile (390 × 844)
- 📱 Mobile SM (375 × 667)
- 📱 Tablet (768 × 1024)
- 💻 Laptop (1280 × 800)
- 🖥️ Desktop (1440 × 900)
- 🔄 Orientation Rotation: Easily flip between portrait and landscape modes.
- Auto-Fit & Zoom: Automatically scales larger devices to fit your active editor split, or zoom at
100%, 75%, 50%.
- 👁️ Dual Preview Modes:
- Visual View: Sandboxed
iframe rendering with isolated CSS styling.
- HTML Source View: Inspect formatted raw markup with a one-click
📋 Copy HTML action.
- 🛠️ Standard Built-in Helpers:
- Pre-registered helper functions:
eq, ne, lt, gt, lte, gte, and, or, not, json, upper, lower, and default.
🚀 Getting Started
- Open any
.hbs or .handlebars file in VS Code.
- Click the
👁 (eye) icon in the top right editor tab toolbar, or run:
Cmd+Shift+P / Ctrl+Shift+P ➔ HBS Viewer: Open Handlebars Preview
- The preview will open beside your code editor.
- Click
{ } Variables in the top bar to open the floating JSON variables editor.
- Click
⚡ Detect to automatically populate your template variables with mock data, and watch the preview update live!
🧪 Sample Template & Mock Data
Try out the bundled examples located in the examples/ folder:
examples/sample.hbs: Complete HTML template demonstrating conditionals, lists, and helpers.examples/sample-data.json: Sample mock data context.
👨💻 Author & Publisher
📄 License
This extension is licensed under the MIT License.
| |
