The HTML Preview Only extension allows developers to preview their HTML files directly within Visual Studio Code. With a live preview that updates in real-time as you edit your file, this extension makes it easier than ever to visualize your changes instantly.
Compatibility
This extension is compatible with Visual Studio Code version 1.75.0 and above. Please ensure your VS Code installation meets this requirement.
Features
Live Preview: Automatically updates the preview pane as you edit your HTML files.
HTML Syntax Error Detection & Logging:
Parses your HTML to detect unclosed tags, mismatched tags, and other syntax errors.
Displays error messages in a dedicated output channel.
Automatic Path Resolution:
Dynamically rewrites local resource paths (CSS, JS, Images) using the vscode-webview-resource:// protocol to ensure that all resources load correctly within the preview.
Device Simulation:
Device Dropdown: Simulate different screen sizes by selecting from Desktop, Tablet, or Mobile.
Orientation Toggle: Switch between Portrait and Landscape modes with a fixed-width button to maintain a consistent layout.
Dark/Light Mode Switch:
Easily toggle between Light and Dark preview modes using a custom-styled switch.
The switch displays “Light” on the left and “Dark” on the right, allowing you to preview your HTML in different themes.
Responsive Preview Container:
The preview content adapts to the WebView size, ensuring seamless integration with VS Code.
Seamless Integration: Works directly in the VS Code editor, providing an intuitive and interactive workflow.
How to Use
Install the Extension:
Download the extension from the Visual Studio Code Marketplace or install it locally using the VSIX package.
Open an HTML File:
Open any HTML file you want to preview.
Launch the Preview:
Run the command HTML Preview: Open Html Preview by:
Pressing Ctrl+Shift+P (or Cmd+Shift+P on Mac) and selecting "Open Html Preview".
Or right-clicking in the editor and selecting Open Html Preview.
Interact with the Toolbar:
Use the Device Dropdown to simulate different devices (Desktop, Tablet, Mobile).
Toggle the Orientation Button between Portrait and Landscape.
Switch between Light and Dark mode using the custom-styled switch.
The Media Query Label displays the current simulated device mode.
