Instant live preview for HTML and React (JSX/TSX) files, right next to your editor — like a chat panel that shows your UI instead of a conversation.
Screenshots
Live preview in action — edit a React component and watch it update instantly beside your editor:
Features
Opens a Live Preview panel beside your editor automatically when you open an .html, .jsx, or .tsx file.
Updates as you type — no save required.
HTML files render exactly as written, with relative <script>/<link>/<img> paths resolved against the file's folder.
React components (.jsx/.tsx) are transpiled on the fly and rendered live, including useState and other hooks — no build step, no bundler, no dev server.
Relative .css imports in a component (import './App.css') are inlined automatically.
Transpile/render errors show inline in the preview instead of a blank panel.
How to use
Open any .html, .jsx, or .tsx file — the preview panel opens automatically beside it.
Keep typing — the preview refreshes live.
To reopen the panel manually, run "Live Preview: Open Preview" from the Command Palette, or click the preview icon in the editor toolbar.
Try it with the files bundled in the examples/ folder: sample.html and Sample.tsx.
Requirements
None — HtmlViewer only uses VS Code's built-in APIs, plus a bundled transpiler and vendored React/ReactDOM (no network access required).
Known limitations
React preview only renders the currently active file — imports of other local component files aren't bundled (a friendly error is shown instead of a crash).
Only relative .css side-effect imports (import './App.css') are inlined; CSS Modules (import styles from './App.module.css') aren't supported yet.
Release Notes
0.0.1
Publisher: Raviteja Mulukuntla
Initial release: live HTML preview and live React (JSX/TSX) component preview.
