https://github.com/nstechbytes/html-view
View and preview HTML files inside VS Code.
https://github.com/nstechbytes/html-view
Last synced: 2 months ago
JSON representation
View and preview HTML files inside VS Code.
- Host: GitHub
- URL: https://github.com/nstechbytes/html-view
- Owner: NSTechBytes
- License: apache-2.0
- Created: 2025-02-11T15:47:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-12T10:23:30.000Z (over 1 year ago)
- Last Synced: 2025-12-26T02:32:20.724Z (6 months ago)
- Language: JavaScript
- Size: 79.1 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## 🖥️ **HTML View - VS Code Extension**
📄 **Preview and View HTML files inside VS Code with ease!**
### 🔥 **Features**
✅ **Live HTML Preview** in a WebView panel
✅ **Supports Linked CSS & JS Files**
✅ **Handles Internal Links (`#about`) Correctly**
✅ **Opens External Links in Browser**
✅ **Supports `CTRL + ALT + V` Shortcut for Quick Preview**
---
### 🚀 **Installation**
#### **From VS Code Marketplace**
1. Open **VS Code**
2. Go to **Extensions** (`Ctrl + Shift + X`)
3. Search for `"HTML View"`
4. Click **Install**
#### **Manual Installation**
1. Download the `.vsix` file from [Releases](https://github.com/NSTechBytes/html-view/releases)
2. Open VS Code and go to `Extensions` → Click `...` → `Install from VSIX`
3. Select the downloaded `.vsix` file
---
### 🎯 **Usage**
#### **Method 1: Command Palette**
1. Open an HTML file in VS Code
2. Press `Ctrl + Shift + P`
3. Type `"Preview HTML"` and press **Enter**
#### **Method 2: Keyboard Shortcut**
- Press `Ctrl + Alt + V` to instantly preview the current HTML file
---
### ⚙️ **How It Works**
- The extension **creates a WebView panel** to render HTML files
- It **ensures that internal fragment links (`#about`) stay inside the WebView**
- **External links (`https://example.com`) open in your default browser**
- It **resolves relative paths for CSS/JS files** automatically
---
### 📌 **Keybindings**
| Command | Description | Shortcut |
|-------------------|-------------------|--------------|
| `htmlView.preview` | Open HTML Preview | `Ctrl + Alt + V` |
---
### 🛠️ **Development**
#### **Clone & Run Locally**
```sh
git clone https://github.com/NSTechBytes/html-view.git
cd html-view
npm install
```
#### **Run in VS Code**
1. Open the project in VS Code
2. Press `F5` to start a new VS Code instance with the extension loaded
---
### 🐛 **Bug Reports & Suggestions**
Found a bug? Have an idea?
👉 **[Create an Issue](https://github.com/NSTechBytes/html-view/issues)**
---
### ❤️ **Support**
If you like this extension, consider ⭐ starring the repo!
---
### 🏆 **Author**
**Nasir Shahbaz**
🔗 [GitHub](https://github.com/NSTechBytes) | [Website](https://nstechbytes.pages.dev/)
---
### 📜 **License**
Apache 2.0 License. See [LICENSE](LICENSE) for details.