Visual Studio Html
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.
Static .html pages
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.
Razor .cshtml pages in ASP.NET Core 2.1/3.0 web application
Visual Studio builds your app, start the web server, launch Microsoft Edge, and navigate to or whatever port is specified in launchSettings.json. Microsoft Edge launches from Visual Studio. Debug JavaScript running in Microsoft Edge. Switch back to Visual Studio. As of Visual Studio 2013 Update 4 regions are now supported in the HTML editor. You may use the built in code snippet: type '
MVC view .cshtml pages in ASP.NET Core 2.1/3.0 web application
.razor pages in Blazor app
Visual Studio Html Download
Web Forms .aspx pages in ASP.NET web application
MVC view .cshtml/.vbhtml pages in ASP.NET web application
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.
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.
Troubleshooting
If a page preview is not displayed, you can enable diagnostics in Options:
And then in the Output window General page you can look for additional information:
Chrome dev tools
Developer tools menu command opens the standard Chromium developer tools window:
Mobile preview
In HTML 11 options you can select a mobile device for preview:
A mobile device is simulated with Chromium DevTools Device Mode.
Open on Android emulator
Open on Android emulator menu command opens the current page on a running Android emulator:
Visual Studio Html
The preview is updated when you Save All documents.
Visual Studio Html Comment Shortcut
Visit the HTML 11 home page for more information.