Generate HTML, CSS, and JavaScript starter files instantly in any VS Code folder. Choose from multiple templates — no setup, no configuration.
Features
- 4 built-in templates — Basic, Responsive, Bootstrap 5, Tailwind CSS
- Template picker — Choose your template from a quick-pick menu
- Custom project folder — Optionally create files inside a named subfolder
- Status bar button — One-click access from the bottom bar
- Safe — Never overwrites existing files
- Multiple triggers — Keyboard shortcut, command palette, right-click menu, or status bar
Templates
| Template | What You Get |
|---|---|
| Basic | Minimal dark-themed HTML + CSS + JS |
| Responsive | Mobile-first layout with navbar, hero, cards, footer |
| Bootstrap 5 | Bootstrap 5 via CDN with navbar, grid, cards |
| Tailwind CSS | Tailwind via Play CDN with utility-first layout |
Quick Start
- Open any folder in VS Code
- Press
Ctrl+Alt+T(Windows/Linux) orCtrl+Cmd+T(macOS) - Or click the Web Template button in the status bar
- Pick a template → optionally name a project folder → done
Keyboard Shortcuts
| OS | Shortcut |
|---|---|
| Windows / Linux | Ctrl+Alt+T |
| macOS | Ctrl+Cmd+T |
All Ways to Use
| Method | How |
|---|---|
| Status Bar | Click Web Template in the bottom bar |
| Keyboard Shortcut | Ctrl+Alt+T / Ctrl+Cmd+T |
| Command Palette | Ctrl+Shift+P → Pick Template or Create Web Template Files |
| Right-Click Menu | Right-click a folder → Web Template Generator |
What Gets Created
| File | Description |
|---|---|
index.html |
HTML5 boilerplate with linked CSS & JS |
style.css |
Template-specific styles |
script.js |
Console-ready starter script |
Installation
- Open Extensions in VS Code (
Ctrl+Shift+X) - Search "Web Template Generator"
- Click Install
Requirements
- VS Code 1.75.0 or later