HTML Preview – All Frameworks

Live-preview HTML files and entire websites directly inside VS Code, with automatic support for Bootstrap, Tailwind, Bulma, Vue, React, Angular, and more.

✨ Features

Feature	Details
HTML file preview	Live preview that updates as you type
Text file preview	Formatted display of `.txt` files
Folder / website preview	Preview an entire multi-file website from a folder
Auto-refresh	Configurable debounce delay; can be toggled off
Manual refresh	One-click button in the preview panel
External change detection	Reloads when files are changed outside VS Code
CSS framework auto-detect	Automatically injects CDN links when a framework is detected
Status bar shortcut	Quick-access button appears when an HTML file is active
Memory-safe	100 MB file limit, resource limit on website previews

🚀 Getting Started

Install from VSIX (offline)

Download the .vsix from the releases page.
In VS Code open the Extensions view (Ctrl+Shift+X).
Click ⋯ → Install from VSIX… and select the file.
Reload VS Code.

Install from source

git clone https://github.com/your-username/html-preview-all-frameworks.git
cd html-preview-all-frameworks
npm install
npm run compile
# Press F5 in VS Code to launch a development host

📖 Usage

Preview an HTML or text file

Right-click method (fastest)

Open any .html, .htm, or .txt file in the editor.
Right-click inside the editor → HTML Preview: Start All Frameworks Preview.

Command palette

Press Ctrl+Shift+P.
Type HTML Preview and select HTML Preview: Start All Frameworks Preview.

Status bar

When an HTML file is active a 👁 Preview HTML button appears in the status bar – click it to open the preview.

Preview an entire website (folder)

In the Explorer panel, right-click any folder that contains a website.
Select HTML Preview: Website Preview.

The extension searches for an entry point in this order:
index.html → index.htm → home.html → home.htm → default.html → default.htm

If none is found, a clear error message is shown.

⚙️ Settings

Setting	Type	Default	Description
`htmlPreview.autoRefresh`	boolean	`true`	Automatically refresh preview when the file changes
`htmlPreview.refreshDelay`	number (0–5000)	`300`	Debounce delay (ms) before refreshing after a change
`htmlPreview.showRefreshButton`	boolean	`true`	Show the manual refresh button in the preview panel

🛠 Commands

Command	Description
`HTML Preview: Start All Frameworks Preview`	Open preview for the current HTML/text file
`HTML Preview: Website Preview`	Open a folder as a full website preview
`HTML Preview: Refresh Preview`	Manually refresh all active previews
`HTML Preview: Toggle Auto-Refresh`	Enable or disable auto-refresh
`HTML Preview: Close All Websites`	Close every open website preview
`HTML Preview: List Open Websites`	Show a list of all open website previews
`HTML Preview: Create Demo Files`	Generate demo HTML files in the selected folder

🖼 Supported Frameworks

CSS Frameworks (auto-detected & CDN-injected)

Framework	Detection method
Bootstrap	`<link>` or `<script>` referencing `bootstrap`
Tailwind CSS	`<link>`, `<script>`, or `cdn.tailwindcss.com`
Bulma	`<link>` referencing `bulma`
Foundation	`<link>` or `<script>` referencing `foundation`
Materialize	`<link>` or `<script>` referencing `materialize`
Semantic UI	`<link>` or `<script>` referencing `semantic`

JavaScript Frameworks

The extension does not transpile JS frameworks, but it correctly resolves local resource paths so that framework-built assets served from the file system load properly in the webview. Works with:

Vanilla JS
React (compiled output)
Vue.js (compiled output)
Angular (compiled output)
Svelte (compiled output)
Ember.js, Backbone.js, and others

⚡ Performance

The extension categorises websites into three types and tunes rendering accordingly:

Type	Trigger	Frame rate	Cache retention
Heavy	Total folder size > 50 MB	25 fps	70 %
Normal	Everything else	40 fps	90 %
Blog	WordPress/Jekyll/Hugo/Ghost/Drupal marker or blog CSS classes	50 fps	95 %

Tips for slower machines

Disable auto-refresh: set htmlPreview.autoRefresh to false.
Increase the debounce: raise htmlPreview.refreshDelay to 1000 or higher.
Use the manual Refresh button when needed.

🏗 Packaging as VSIX

npm install        # install dependencies
npm run compile    # compile TypeScript
npm run package    # create .vsix file

The .vsix file will be created in the project root.

🐛 Known Limitations

Some frameworks that rely on a full Node.js/bundler runtime (e.g. Vite dev server, react-scripts start) cannot be previewed this way — only compiled/static output works.
External resources blocked by Content Security Policy may not load.
Very large websites (> 100 MB) are not supported to protect memory.

📝 Release Notes

See CHANGELOG.md for the full version history.

Latest – v1.6.0

Fixed FileSystemWatcher memory leak in HTML preview.
Fixed stale preview bug — HTML and text previews now always show the latest content.
Fixed async race condition in website entry-point detection.
Fixed TypeScript cast syntax in browser script templates.
Tightened blog website classification to avoid false positives.

HTML Preview - All Frameworks

kartik1233