Microsoft Edge Demos

This repository contains demo webpages, apps, and sample code to demonstrate various features of Microsoft Edge. This Readme lists all top-level source code directories. Below, demos are grouped by major technology area, and then sorted by directory name within each section's table.

Contents:

• Microsoft Edge DevTools
• Microsoft Edge extensions
• Progressive Web Apps (PWAs)
• WebView2
• Cross-browser API samples
• Adding a new demo
• Contributing
• Trademarks
• See also

Microsoft Edge DevTools

Demo name	Description and docs	Source code & Readme	Live demo page
CSS mirroring sourcemaps	Used for Update .css files from within the Styles tab (CSS mirror editing) for the DevTools extension for Visual Studio Code.	/css-mirroring-sourcemaps-demo/	n/a
To Do app	Simple To Do app with vanilla JavaScript. Used for various articles in the Microsoft Edge DevTools documentation.	/demo-to-do/	My tasks demo
Detached DOM elements	Chat-like demo. Used for Debug DOM memory leaks ("Detached elements" profiling type).	/detached-elements/	Detached DOM elements demo
3D View tool	Used for Navigate webpage layers, z-index, and DOM using the 3D View tool.	/devtools-3d/	3D View tool demo
Accessibility testing	Used for Accessibility-testing features.	/devtools-a11y-testing/	Animal Shelter demo
Warning when animating a CSS property that requires layout	Illustrates the Issues and Elements tools warning when CSS properties that require layout are animated. Used for Edit animation and transition timings with the Easing Editor in CSS features reference.	/devtools-animated-property-issue/	Animated CSS property demo
Console panel demo pages	Used for Console overview, Log messages in the Console tool, and Fix JavaScript errors reported in the Console.	/devtools-console/	DevTools Console panel demo pages
Interact with the DOM using the Console	Used for Interact with the DOM using the Console.	/devtools-console-dom-interactions/	Interact with the DOM using the Console demo
Contrast bug fix	Used for Improving contrast in Microsoft Edge DevTools: A bugfix case study.	/devtools-contrast-bugfix/	Testing all badges in DevTools for contrast issues demo
Crash Analyzer tool demo	Used for Enter a stack trace in the Crash analyzer tool in Crash analyzer tool.	/devtools-crash-analyzer/	Readme
CSS Examples	Used for Get started viewing and changing CSS.	/devtools-css-get-started/	CSS Examples demo
DOM Examples	Used for Get started viewing and changing the DOM.	/devtools-dom-get-started/	DOM Examples demo
Explain Console errors and warnings in Copilot in Edge	Generates errors in the Console that can then be explained by using Copilot in Edge.	/devtools-explain-error/	Explain Console errors and warnings in Copilot in Edge demo
Inspect tool	Used for Analyze pages using the Inspect tool.	/devtools-inspect/	Inspect tool demo
Inspect CSS Grid	Used for Inspect CSS Grid.	/devtools-grid/	Inspect CSS Grid demo
Debugging JavaScript that adds two numbers	Used for Get started debugging JavaScript.	/devtools-js-get-started/	Debugging JavaScript with Microsoft Edge DevTools demo
Memory heap snapshot	Used for Record heap snapshots using the Memory tool ("Heap snapshot" profiling type).	/devtools-memory-heap-snapshot/	n/a
Performance tool Activity Tabs	Used for View activities in a table in Performance features reference, about the Performance tool's Bottom-up, Call tree, and Event log tabs.	/devtools-performance-activitytabs/	Activity Tabs demo
Sluggish Animation	Used for Analyze runtime performance (tutorial).	/devtools-performance-get-started/	Sluggish Animation demo
postMessage Trace Events	Tests postMessage trace events in the Performance tool. Used for View messages between windows, iframes, and dedicated workers in Performance features reference.	/devtools-postmessage-perf-timeline/	postMessage Trace Events demo
CSS :target pseudo-class	Used for Support forcing the :target CSS state in What's New in DevTools (Microsoft Edge 89).	/devtools-target-pseudo/	CSS :target pseudo-class demo
Exploring the universe	Used for Monitor Core Web Vitals metrics in Performance tool: Analyze your website's performance.	/exploring-the-universe/	Exploring the universe demo
Heap Snapshot Visualizer	Used for Heap Snapshot visualizer extension for DevTools in What's New in DevTools (Microsoft Edge 109).	/heap-snapshot-visualizer/	n/a
JSON dummy data	Simple JSON files. Used for View a JSON file or server response with formatting.	/json-dummy-data/	JSON dummy data (Readme)
Inspect Network Activity	Used for Inspect network activity.	/network-tutorial/	Inspect Network Activity demo
Network tool reference	Used for Network features reference.	/devtools-network-reference/	Network tool reference demo
Photo gallery	Used for View your custom data in the performance profile in Customize performance profile with extensibility APIs, and The truth about CSS selector performance.	/photo-gallery/	Photo Gallery demo
Slow Calendar	Simple calendar demo app to test DevTools features such as the Performance tool and source map support. Used for Added source map support in the Coverage tool in What's New in DevTools (Microsoft Edge 121).	/slow-calendar/	Slow Calendar demo
Margie's Travel	Demonstrates how to optimize a webpage's resources to make it load, appear, and be interactive faster. Used for Optimize website speed using Lighthouse.	/travel-site/	Margie's Travel demo
Workspaces	Used for Edit and save files in a workspace (Sources tool Workspace tab).	/workspaces/	DevTools Workspaces demo
Idle detection	Used for Emulate idle detector state in Emulate device sensors.	/idle-detection/	Idle detection demo

See also:

• DevTools extension, in Microsoft Edge extensions, below.
• Sample code for DevTools
• Clone the Edge Demos repo to your drive in Sample code for DevTools.

Microsoft Edge extensions

Demo name	Description and docs	Source code & Readme	Live demo page
DevTools extension	Used for Create a DevTools extension, adding a custom tool tab and panel.	/devtools-extension/	n/a
Basic	A basic DevTools extension.	/devtools-extension/sample 1/	n/a
Panel	A basic DevTools extension with a panel.	/devtools-extension/sample 2/	n/a
CDP	A basic DevTools extension invoking Chrome Developer Protocol (CDP) APIs.	/devtools-extension/sample 3/	n/a
Inspect	A basic DevTools extension that interacts with the Inspected page.	/devtools-extension/sample 4/	n/a

See also:

• Samples for Microsoft Edge extensions. Includes samples that are in the microsoft / MicrosoftEdge-Extensions repo:
  • Picture viewer pop-up webpage
  • Picture inserter using content script

Progressive Web Apps (PWAs)

Demo name	Description	Source code & Readme	Live demo page
1DIV	A CSS sandbox app that demonstrates the Window Controls Overlay feature.	/1DIV/	1DIV demo
Email client	A simulated email client PWA that demonstrates how to use PWA protocol handlers.	/email-client/	Email inbox demo
Application Title Meta Tag	Showcases the application-title meta tag.	/pwa-application-title/	application-title demo
PWA Background Sync	Enables using the PWA when offline; synchronizes data with the server when the network connection is restored.	/pwa-background-sync/	PWA Background Sync API demo
PWA file handlers	The file_handlers web app manifest member enables a PWA to handle files like a native application.	/pwa-file-handlers/	PWA file handlers demo
PWA installer	A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry.	/pwa-installer/	pwa-installer demo
Edge demos (pwastore)	A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. An earlier copy of /pwa-installer/ directory, pointed to by Dev Trial docs.	/pwa-pwastore/	Edge demos
Timer PWA	Has a Set timer button, and you can set the duration of the timer.	/pwa-timer/	Timer PWA demo
PWA To Do	Create lists of tasks locally in your browser, or by installing the app. Click About link in rendered demo.	/pwa-to-do/	PWA To Do demo
PWAmp	A music player that plays local audio files.	/pwamp/	pwamp demo
Temperature converter	Converts temperatures. To learn how to use and develop PWAs, start with this sample.	/temperature-converter/	Temperature converter demo
wami	An image manipulation app to crop, resize, or add effects to images.	/wami/	wami demo

To learn how to use and develop PWAs, start with the Temperature convertor sample.

See also:

• Progressive Web App samples - also lists the demos:
  • BPM Techno
  • Webboard

WebView2

The WebView2 samples are in the MicrosoftEdge / WebView2Samples repo, rather than in the present, MicrosoftEdge / Demos repo.

See:

• MicrosoftEdge / WebView2Samples repo
• WebView2 sample apps article

Cross-browser API samples

Demo name	Description and docs	Source code & Readme	Live demo page
Built-in AI playgrounds	Demo pages showing how to use the built-in Prompt and Writing Assistance AI APIs in Microsoft Edge.	/built-in-ai/	Built-in AI playgrounds demo
CSS Gap Decorations demos	Draws line decorations within gaps in CSS Grid, Flexbox, and Multi-column layouts.	/css-gap-decorations/	CSS Gap Decorations demos (Readme)
CSS Masonry demos	Showcase the implementation of CSS Masonry layout.	/css-masonry/	CSS Masonry demos (Readme)
CSS Custom Highlight API	How to programmatically create and remove custom highlights on a web page.	/custom-highlight-api/	CSS Custom Highlight API demo
EditContext API demo	Demo page showing how the EditContext API can be used to build an advanced text editor.	/edit-context/	HTML editor demo
EyeDropper API	How to use the EyeDropper API to create a color sampling tool from JavaScript.	/eyedropper/	EyeDropper API demos
IndexedDB: getAllRecords()	Shows the benefits of the proposed getAllRecords() IndexedDB method to more conveniently and quickly read IDB records.	/idb-getallrecords/	IndexedDB: getAllRecords() demo
Notifications demo	Using incoming call notifications.	/incoming-call-notifications/	Notifications demo
JSON dummy data	Simple JSON files. Used for View a JSON file or server response with formatting.	/json-dummy-data/	JSON dummy data (Readme)
Page Colors Custom Scrollbars demo	Shows a custom, green scrollbar in a page that has custom colors.	/page-colors-custom-scrollbars/	Page Colors Custom Scrollbars demo
Reader app	An article reader app used to demonstrate how to use various web APIs such as CSS Custom Highlight, <selectmenu>, EyeDropper, CSS and JSON modules, Scroll animation timeline, and Async Clipboard.	/reader/	Reader demo
Open UI's <selectlist> demos	Demo webpage showing how the Open UI's <selectlist> element can be used.	/selectlist/	Open UI's <selectlist> demos
<selectmenu> demos	OpenUI's <selectmenu> component was renamed to <selectlist>.	/selectmenu/	<selectmenu> demos, redirects to /selectlist/ demos
SVG support in the Async Clipboard API	Demo page showing how the Async Clipboard API supports SVG format.	/svg-clipboard/	SVG clipbard support demo
WebNN API	Uses the WebNN API to build a machine learning graph and run it on the device's hardware.	/webnn/	WebNN API demo

See also:

• Cross-browser API samples

Adding a new demo

To add a new demo:

1. Make a copy of the /template/ directory at the root of this repository and give it a name, such as /my-demo/.

2. Edit the README.md file in the new directory to clearly explain what your new demo is about.

3. In the README file, include a GitHub.io link that points to the live demo.

   This repository is set up to be deployed live using GitHub Pages (GitHub.io), so a rendered index.html file in the /my-demo/ directory (for example) will end up being accessible on the web at https://microsoftedge.github.io/demos/my-demo/.

4. Edit the code (such as index.html or style.css) in the new directory. Add any files you need.

5. Add a link to your demo in this README.md file, in a new row in one of the tables above, similar to the following row:

Demo name	Description and docs	Source code & Readme	Live demo page
Template	Template directory to copy/paste to add a new demo. Can be used for Microsoft Edge Developer documentation.	/template/	My new demo

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

See also

• Clone the Edge Demos repo to your drive in Sample code for DevTools.