Web Live Preview (Preview)

Web Live Preview enables a real-time mapping between your source code and the rendered HTML for your ASP.NET Framework web apps. When viewing your web app, you can select elements in the browser and the IDE will show you the code that was executed to generate the element. You can edit the source in the IDE, and the web app will automatically be updated. For more info see https://aka.ms/weblivepreview

Note: Beginning with the 0.6.1 release (Version 0.6.18.59996) you'll need to enable Web Live Preview to use the feature - even if you have used it in previous versions of the extension.

To enable or re-enable Web Live Preview, go to Tools -> Options -> Web Live Preview (Preview) and under the Web Live Preview category, set Enable to true. Then hit OK and restart Visual Studio.

Release Notes

0.8 - July 10, 2021

We made a change so that Web Live Preview will no longer load tools in an iframe. This prevents a "nesting" effect where the tools would load multiple times on a page with iframes containing content from the same site. If you want to design the content of the iframe, load it directly in the browser.
Added more support for screen readers and keyboard shortcuts for navigation around tools.
Numerous bug fixes around auto sync, action panels, accessibility, initial selection and more.

0.6.1 - April 20, 2021

We fixed a bug where Web Live Preview was becoming enabled in scenarios where the user had not specifically enabled it.

0.6 - April 9, 2021

The Action Panel work started in 0.5 now includes the ability to edit properties. Properties displayed as checkboxes, textboxes or comboboxes in the web forms designer should work as expected in Web Live Preview. Properties that use custom editors will fall back to a textbox. Editing in textboxes can be confirmed by pressing the Enter key or canceled by pressing the escape key.
We fixed a bug where the tab key would be suppressed on the page if Web Live Preview was running.
We fixed a bug where some mouse input wouldn't pass through to the underlying page when Inspect Mode was disabled
We fixed a bug where the Web Live Preview interface could appear behind some user content
We fixed several accessibility bugs

0.5 - March 18, 2021

When selecting a ASP.NET web forms control in the browser, you'll be able to pop out the Action Panel - equivalent to the one available in the VS web forms designer. Currently only methods are supported (e.g. "Edit Columns..." on a GridView), but property editing is coming.
We've done some work to simplify the color/themes in the browser, providing a more consistent experience as we add more custom UI to the in-browser design experience.
Starting with this build, Visual Studio 16.9 is the minimum supported version

0.4 - February 9, 2021

As part of our accessibility efforts, we've made several changes for better screen reader support and keyboard shortcuts.
New keyboard shortcuts include: Ctrl+Alt+M to toggle the menu; arrow keys and enter/escape for navigating the menu; enter/escape for closing dialogs; Ctrl+Alt+E to enter simple text editing mode and escape to exit; Ctrl+Alt+Left/Right arrow to move within Tag Navigator hierarchy; Up/Down/Left/Right arrow keys to move between selected elements in the design surface

0.3 - December 1, 2020

You can now edit literal text directly from within the browser. Just double-click on the text while in Inspect Mode and edit the text. When you're done, the changes will be synced back to your editor.
Web Live Preview will now be available when performing View in Browser or when debugging your website in addition to when performing the Edit in Browser command. It will start in a minified state with a small button at the bottom left. Clicking the button shows a menu with options to enable the full feature.
"Inspect Mode" can be toggled from the menu at any time to allow you to interact with the page underneath the design surface to get it to your desired state before inspecting and modifying. There is also a hotkey - Ctrl+Alt+I - for toggling inspect mode.
The menu also allows you to close Web Live Preview - removing it from the page completely - and choose when you'd like it to load again.
The menu, toolbar and icons are themed to match your Visual Studio theme preferences.
A new Tools->Options panel to turn Web Live Preview, CSS Auto Sync and Browser Link on/off.
Several bug fixes involving Razor code blocks.

0.2 - August 3, 2020

The Edit in Browser command will now show up in the solution explorer context menu for .vbhtml files.
Elements removed from the editor will now also be removed from the Tag Navigator if they were previously visible there.
The status displayed in the toolbar should now be more stable, without jumping between statuses frequently.
The selection decorator that displays information about the selected element in the design surface has received an update, ensuring it is always visible regardless of scrolling and with some new visual polish. Elements that are larger than the viewport are now handled more consistently as well.
HTML Entities (e.g. ") are now handled more consistently in text nodes.
Adding content inside of razor conditional and loop blocks is now handled more consistently.
We now make use of Shadow DOM to ensure the page's styling does not impact the Web Live Preview tooling styles.

Microsoft