Skip to content

README.md

Latest commit

 

History

History
87 lines (63 loc) · 2.37 KB

README.md

File metadata and controls

87 lines (63 loc) · 2.37 KB

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