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:

HtmlViewer live preview

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.

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.

None — HtmlViewer only uses VS Code's built-in APIs, plus a bundled transpiler and vendored React/ReactDOM (no network access required).

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.