HTML Preview - All Frameworks

A Visual Studio Code extension that provides a live preview for HTML files and websites with full support for all frameworks including React, Vue, Angular, Svelte, and CSS frameworks like Bootstrap, Tailwind, Bulma, and more.

Features

• Live preview of HTML files
• Live preview of text files (.txt)
• Website preview from folder selection
• Full support for all JavaScript frameworks
• Automatic detection and support for popular CSS frameworks:
  • Bootstrap
  • Tailwind CSS
  • Bulma
  • Foundation
  • Materialize
  • Semantic UI
• Real-time updates as you type
• Works with CSS preprocessors (Sass, Less, Stylus)
• Responsive preview with device simulation
• Console error reporting
• Support for external resources and CDNs
• Right-click context menu integration

Usage

Method 1: HTML File Preview (Right-click Context Menu)

1. Open any HTML file in VS Code
2. Right-click in the editor
3. Select "HTML Preview: Start All Frameworks Preview" from the context menu
4. The preview will open in a new panel and update as you edit your HTML

Method 2: Text File Preview (Right-click Context Menu)

1. Open any text file (.txt) in VS Code
2. Right-click in the editor
3. Select "HTML Preview: Start All Frameworks Preview" from the context menu
4. The preview will open in a new panel with formatted text display

Method 3: Command Palette

1. Open any HTML or text file in VS Code
2. Press Ctrl+Shift+P to open the command palette
3. Type "HTML Preview" and select "HTML Preview: Start All Frameworks Preview"
4. The preview will open in a new panel and update as you edit your file

Method 4: Website Preview (Folder Context Menu)

1. In the Explorer panel, right-click on any folder containing a website
2. Select "HTML Preview: Website Preview" from the context menu
3. The extension will automatically look for common entry points (index.html, home.html, etc.)
4. The website preview will open in a new panel with proper HTML rendering

Supported Frameworks

JavaScript Frameworks

• Vanilla JavaScript
• React
• Vue.js
• Angular
• Svelte
• Ember.js
• Backbone.js
• And more...

CSS Frameworks

• Bootstrap (Automatically adds CDN if detected)
• Tailwind CSS (Automatically adds CDN if detected)
• Bulma (Automatically adds CDN if detected)
• Foundation (Automatically adds CDN if detected)
• Materialize (Automatically adds CDN if detected)
• Semantic UI (Automatically adds CDN if detected)

Requirements

• Visual Studio Code 1.60.0 or higher

Installation

From VSIX Package (Offline Installation)

1. Download the VSIX file from the releases page
2. In VS Code, go to Extensions (Ctrl+Shift+X)
3. Click on the "..." menu and select "Install from VSIX..."
4. Select the downloaded VSIX file
5. Reload VS Code

From Source

1. Clone this repository
2. Run npm install to install dependencies
3. Run npm run compile to compile the extension
4. Press F5 to launch a new VS Code window with the extension loaded

Packaging as VSIX

To create a VSIX package for distribution:

1. Install dependencies: npm install
2. Compile the extension: npm run compile
3. Package the extension: npm run package
4. The VSIX file will be created in the project root directory

Extension Settings

This extension contributes the following commands:

• htmlPreviewAllFrameworks.start: Starts the HTML preview for the current file
• htmlPreviewAllFrameworks.websitePreview: Starts the website preview from a selected folder

How CSS Framework Detection Works

The extension automatically detects when you're using popular CSS frameworks by scanning your HTML for framework-specific classes or includes. When detected, it automatically adds the necessary CDN links if they're not already present.

To test this feature:

1. Open the demo.html file included with the extension
2. Uncomment the CSS framework links to see automatic support
3. Save the file to see the preview update

Website Preview Features

The website preview functionality supports:

• Automatic detection of common entry points (index.html, home.html, default.html, etc.)
• Proper resource loading for CSS, JavaScript, and images
• Support for all major CSS frameworks
• Real-time updates when files change
• Error handling for missing entry points
• Proper HTML rendering instead of code display

Text File Preview Features

The text file preview functionality supports:

• Formatted display of text content with syntax highlighting-like appearance
• File information display (name, size, type)
• Support for large text files (up to 10MB)
• Real-time updates when files change
• Proper handling of special characters and line breaks

Known Issues

• Some complex frameworks may require additional configuration
• External resources may need to be whitelisted in Content Security Policy

Release Notes

1.0.7

Added text file preview support:

• Support for text file preview (.txt files)
• Formatted display of text content with syntax highlighting-like appearance
• File information display (name, size, type) for text previews
• Context menu support for .txt files

1.0.6

Memory optimization improvements:

• Implemented RAM usage optimization to reduce memory consumption
• Added file size limits to prevent memory issues (10MB for HTML files, 50MB for websites)
• Disabled context retention when hidden to reduce memory usage
• Added website size checking to prevent loading excessively large websites
• Improved resource cleanup and memory management
• Added file count limits when checking website sizes

1.0.5

Complete rewrite with improved reliability:

• Completely rewritten preview engine for better reliability
• Fixed resource path resolution for both HTML files and websites
• Improved error handling and user feedback
• Enhanced framework detection and support
• Fixed issues with relative path processing
• Better handling of CSS, JavaScript, and image resources
• Improved website preview functionality with proper HTML rendering

1.0.4

Fixed website preview rendering:

• Fixed website preview to properly render HTML instead of showing code
• Improved resource handling for website previews
• Enhanced path resolution for website resources
• Better error handling for website preview functionality
• Fixed issue with HTML content being displayed as text instead of rendered

1.0.3

Added website preview functionality:

• Website preview functionality - preview entire websites from folder selection
• New command "HTML Preview: Website Preview" accessible from folder context menu
• Support for common website entry points (index.html, home.html, etc.)
• Enhanced resource handling for website previews
• Improved error handling for missing website entry points
• Better resource path resolution for website previews
• Enhanced cross-platform compatibility

1.0.2

Fixed blank preview screen issue:

• Fixed blank preview screen issue by improving HTML content rendering
• Enhanced iframe content loading with fallback mechanisms
• Improved HTML escaping for better security and compatibility
• Fixed resource path processing for better cross-platform support
• Added better error handling and user feedback

1.0.1

Bug fixes and improvements:

• Improved error handling throughout the extension
• Fixed potential issues with async operations
• Enhanced resource path processing
• Better handling of file opening from context menu
• Improved stability of preview panel creation
• Added proper disposal of event listeners

1.0.0

Initial release of HTML Preview - All Frameworks

• Basic HTML preview functionality
• Support for all JavaScript frameworks
• Automatic CSS framework detection and support
• Real-time updates
• Context menu integration
• VSIX packaging support
• Fixed right-click context menu functionality