Live HTML & JS Previewer v2

(Version: 0.1.9)

This extension allows you to:

• Preview your html files in VS Code itself. Use it to quickly set the html and css right for your webpages.
• Preview a Flowchart for your JavaScript code

IMPORTANT: This extension is based on the Live HTML Previewer VSCode extension by Harshdeep Gupta and js2flowchart by Bohdan Liashenko

Important: If you like this plugin don't forget to Star the authors' repositories.

Features

Side preview with live editing

Full page preview

Open html file in browser

Show JavaScript FlowChart

YouTube Demo

Usage

• For side preview, use the keybinding 'ctrl+q s' or press 'F1' and type "Show side HTML preview"
• For full preview, use the keybinding 'ctrl+q f' or press 'F1' and type "Show full HTML preview"
• To open file in browser:
  • use the keybinding 'ctrl+q w' or
  • press 'F1' and type "Open in browser" or
  • right click in the editor/side bar, select "Open in browser"

If a HTML file is open, a message is displayed on the Status Bar in bottom left. Click on it for side preview.

• For side preview of JavaScript Flowchart, use the keybinding 'ctrl+q c' or press 'F1' and type "Show JS FlowChart"

Configuration

By default, the HTML Preview window, has some default CSS styling applied to it according to the currently selected VSCode theme. For example, if a dark theme has been selected, the HTML preview window will have a default dark background and light text applied to it. If you want to override this behavior, you can check the (experimental) Disable Web View Styling setting.

Development

Clone repo

`$ npm install`
`$ npm run compile`

TODO / WORK IN PROGRESS

• Add support for local resources loaded via link tags (CSS files), img tags, etc. Right now only remote resources (CSS, images, js) are supported on an HTML page.