August 27, 2015 11:00 am

Creating your own browser with HTML and JavaScript

Over the past several months, we have made numerous improvements to the Microsoft Edge rendering engine (Microsoft EdgeHTML), focusing on interoperability with modern browsers and compliance with new and emerging standards. In addition to powering Microsoft Edge, EdgeHTML is also available for all Universal Windows Platform (UWP) apps via the WebView control. Today we would like to demonstrate how the WebView control can be used to create your own browser in Windows 10.

Using standard web technology including JavaScript, HTML, and CSS we created a sample UWP application which hosts the WebView and provides basic functionality such as navigation and favorites. These same techniques can be used in any UWP application to seamlessly integrate web content.

Animation showing favorites menu in custom browser application

The crux of the functionality stems around the powerful WebView control. Offering a comprehensive set of APIs, it overcomes several of the limitations which encumber iframes, such as framebusting sites and document loading events. Additionally, the x-ms-webview, how one declares a WebView in HTML, provides new functionality that is not possible with an iframe, such as better access to local content and the ability to take screenshots. When you use the WebView control, you get the same web platform that powers Microsoft Edge.

Get the Sample Code

You can view the full set of sample code in our repo on GitHub. You can also demo the browser live by installing the app from the Windows Store, or by deploying the Visual Studio solution.

Animation showing fullscreen mode in custom browser app

Build Your Windows 10 App Today

With the WebView control, we were able to create a simple web browser using standard web technology in just an afternoon. We look forward to seeing what you build with Windows 10!

– Josh Rennert, Program Manager, Microsoft Edge

8/28 3:17p – Updating for clarity purposes.

Updated August 28, 2015 3:16 pm

Join the conversation

  1. That is good to hear but i have a question regarding WebView for Windows 10 SDK and i dont know where to ask. I used WebControl on WP8.0 and now WebView and the results for my app say that WebControl renders the HTML string beter then the current WebView. On WebView with WP8.1 or Windows 10 SDK pictures get rendered wrong if used on a Windows 10 Mobile device. This is something that the team must have a look into. my app has already a lot of Windows 10 Mobile users that see this bug and the app itself can not change this. The bug is that pictures are not downloaded properly if used via NavigateToString. The string is properly written and the same string gives good results on WP8.1 with WebControl. I hope you look also in this because this is frustrating.

  2. How about WPF support? WebBrowser component with Internet Explorer is really not enough in these days… It has so many limitations and drawbacks… I hope you don’t “forget” on WPF support. Thank you.

  3. We are an ISV that develops accounting software for several thousand customers. We have a large enterprise application with a WPF client that uses IE in the WPF WebBrowser control. What are your plans for enabeling WPF apps to host Edge?

    Rewriting our WPF app as a UWP app is not an option. Because of the size of our application, that would be too expensive (probably more than a year of work) and not add any value for our customers. We currently also need to support Windows 7 and 8.1. Without the ability to host Edge, we are stuck with the web standards supported by IE11. If you don’t plan to let WPF apps host Edge, then we will probably have replace IE 11 with another browser engine like Chrome. This would still be an expensive change but probably much cheaper than moving to UWP.

    • So…I’m not sure what you’re expecting here, given that Edge was written as a UWP, and you’re asking them to backport Edge to work in Win7/8.1. UWP isn’t going to come to Windows 7; besides the huge amount of work, that would be a nightmare of an update for any sysadmin.
      I would say that overall, moving your web-based functionality to work in “a browser”, regardless of its maker, is the best way forward. At the moment, for Win7/8.1 compatibility, I would say that a WebKit engine like Chrome or something similar would be your best bet. If you avoid tying your code specifically to WebKit, then you’d be flexible about switching to any other rendering engine (Gecko? Edge?) later down the line.

  4. Please improve integration with UWP and expose Edge Browser DOM/API via WebView:

    Also, please enable .NET Extensions in Edge:

    Finally, please mend the cataclysmic divide between Windows (UWP/Native) developers and Web (HTML/JS) developers and enable UWP to transpile artifacts into JavaScript/HTML5:

    Thank you for any consideration!

    • I think they did mention they’re working on the extension model. I haven’t seen anything yet about what that will allow.
      I’d be dubious about a transpiling system, though. I remember the lofty claims made of compiling Java to JavaScript early in the web, and it was like the kind of mess that Dreamweaver makes of a website. Part of the reason it’s a good idea to develop your apps in JS instead is that it’s higher-level and thus easier to cleanly port. C#/XAML code can get a little lower-level, better-tailored, and more platform-specific, so it seems like the wrong way to try compiling things.

  5. Hi,
    I want to get content of html in WebView.
    WebView redirect to external url.
    Please help me resolve it.
    Thank you.

  6. This example is REALLY useful as a great tool for better understanding of Javascript components, etc.

    The only thing I don’t like is that initial zoom level of the http (internet) content loaded into the webview element. If you load something like “” (or into this Javascript Browser when the window is NOT maximized the conent is not “scaled/zoomed/sized” as it is when the same page is loaded into the standard Microsoft Edge browser (also with window not maximized – say at 50% of screen resolution). So in the JS Browser the fonts are ALWAYS too big and the content is not properly scaled (when compared to resizing window in Edge or Chrome browsers). I am using Windows 10.

    I have tried to change all related css settings (like zoom, etc) for webview (x-ms-webview) but nothing seems to be able to control this “initial view” size.

    Does anyone know how to “fix” this?



  7. Please can any one help me with how to install and run this application…!
    Thank you in advance…

  8. How difficult should it be to add tab support ?

    Can you please describe briefly the code changes ?

  9. When clicking on a link to a file for downloading the file,

    the browser is trying to navigate to the file url and the file is NOT downloaded,

    How can I add minimal support for downloading file using this browser ?