Skip to content

NSTechBytes/html-view

Repository files navigation

🖥️ 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
  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

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


❤️ Support

If you like this extension, consider ⭐ starring the repo!


🏆 Author

Nasir Shahbaz
🔗 GitHub | Website


📜 License

Apache 2.0 License. See LICENSE for details.

About

View and preview HTML files inside VS Code.

Resources

License

Stars

Watchers

Forks

Packages

No packages published