HTML 11 extension provides tool windows in Visual Studio 2017/2019 showing preview of static and dynamic web pages you are currently editing, on desktop and mobile devices.

The preview is updated as you type. When you change a .css or a .js file referenced in the HTML document, the preview is updated after you save the referenced file.

While the web application server is running in IIS Express, the preview is updated when you save a document. When the server is stopped, the preview is no longer updated and a red border is displayed around the preview area.

Getting started
To initially open HTML 11 tool windows, select Desktop preview or Mobile preview in the main HTML11 menu:

You can position opened tool windows alongside the HTML editor or outside the main Visual Studio window, e.g. on a second monitor.

HTML is rendered using Chromium Embedded Framework v75.

The Reload command resets and reloads all opened previews.

How it works
Static .html pages and associated resources (images, styles, scripts) are loaded by the embedded Chromium browser directly from the disk. For the live preview, page content is provided from a memory buffer.

To show preview for dynamic pages, you need to start the web application (usually pressing Ctrl + F5). HTML 11 finds App/Project URL in web server settings (usually http://localhost:[random-port]), adds the file path to it and opens the preview. When you change and save a page, Visual Studio recompiles it on save, updates the application on the fly, HTML 11 updates the preview and you see the updated page.

Redirection
If you use custom routing in your web application, you may need to additionally configure HTML 11 to support a different URL scheme.

For example, if you add a culture prefix to your pages in the controller like http://localhost:59999/en/Home/Tourists and open Tourists.cshtml for editing in Visual Studio, HTML 11 will try to connect to http://localhost:59999/Home/Tourists page and fail.

To support this configuration, open Project options from the main HTML 11 menu and add a redirection rule with Pattern=.+ and Target=en/$_:

Pattern and Target use .NET regular expressions syntax and operate on the path part of the URL, in the example above it is Home/Tourists.

Project options are separate for each Visual Studio project and the dialog opens relative to the current active Visual Studio document. It is best to first open the page you want to adjust and then select the Project options menu command.

The Stop processing option in a redirection rule means that if the rule matches, no further rules will be processed.

You can disable a dynamic page preview setting Target to :: and you can override the project url settting Target to an absolute url.

Only for V.I.P