From d4b3cf2eac373aa237659bc6a6c845e3b7d00da3 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Thu, 21 May 2026 10:48:05 -0700 Subject: [PATCH 01/22] replace tables by links --- README.md | 213 +++++++----------------------------------------------- 1 file changed, 26 insertions(+), 187 deletions(-) diff --git a/README.md b/README.md index 4952bdd6..5e303a2a 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,6 @@ # 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. +This repository contains demo webpages, apps, and sample code to demonstrate various features of Microsoft Edge. **Contents:** * [Microsoft Edge DevTools](#microsoft-edge-devtools) @@ -18,185 +8,54 @@ This repository contains demo webpages, apps, and sample code to demonstrate var * [Progressive Web Apps (PWAs)](#progressive-web-apps-pwas) * [WebView2](#webview2) * [Cross-browser API samples](#cross-browser-api-samples) +* [Clone the "MicrosoftEdge / Demos" repo to your drive](#clone-the-microsoftedge--demos-repo-to-your-drive) * [Adding a new demo](#adding-a-new-demo) * [Contributing](#contributing) * [Trademarks](#trademarks) -* [See also](#see-also) - - ## Microsoft Edge DevTools - - -| Demo name | Description and docs | Source code & Readme | Live demo page | -|---|---|---|---| -| View `@font-palette-values` CSS at-rules | Used for [View `@font-palette-values` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-font-palette-values-at-rules) in _CSS features reference_. | [/at-rules-font-palette-values/](https://github.com/MicrosoftEdge/Demos/tree/main/at-rules-font-palette-values/) | [View `@font-palette-values` CSS at-rules](https://microsoftedge.github.io/Demos/at-rules-font-palette-values/) demo | -| View `@position-try` CSS at-rules | Used for [View `@position-try` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-position-try-at-rules) in _CSS features reference_. | [/at-rules-position-try/](https://github.com/MicrosoftEdge/Demos/tree/main/at-rules-position-try/) | [View `@position-try` CSS at-rules](https://microsoftedge.github.io/Demos/at-rules-position-try/) demo | -| View `@property` CSS at-rules | Used for [View `@property` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-property-at-rules) in _CSS features reference_. | [/at-rules-property/](https://github.com/MicrosoftEdge/Demos/tree/main/at-rules-property/) | [View `@property` CSS at-rules](https://microsoftedge.github.io/Demos/at-rules-property/) demo | -| View `@scope` CSS at-rules | [View `@scope` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-scope-at-rules) in _CSS features reference_. | [/at-rules-scope/](https://github.com/MicrosoftEdge/Demos/tree/main/at-rules-scope/) | [View `@scope` CSS at-rules](https://microsoftedge.github.io/Demos/at-rules-scope/) demo | -| View `@supports` CSS at-rules | Used for [View `@supports` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-supports-at-rules) in _CSS features reference_. | [/at-rules-supports/](https://github.com/MicrosoftEdge/Demos/tree/main/at-rules-supports/) | [View `@supports` CSS at-rules](https://microsoftedge.github.io/Demos/at-rules-supports/) demo | -| Cascade layers | Used for [View cascade layers](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-cascade-layers) in _CSS features reference_. | [/cascade-layers/](https://github.com/MicrosoftEdge/Demos/tree/main/cascade-layers/) | [Cascade layers](https://microsoftedge.github.io/Demos/cascade-layers/) demo | -| CSS mirroring sourcemaps | Used for [Update .css files from within the Styles tab (CSS mirror editing)](https://learn.microsoft.com/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab) for the DevTools extension for Visual Studio Code. | [/css-mirroring-sourcemaps-demo/](https://github.com/MicrosoftEdge/Demos/tree/main/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](https://learn.microsoft.com/microsoft-edge/devtools/landing). | [/demo-to-do/](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do) | [My tasks](https://microsoftedge.github.io/Demos/demo-to-do/) demo | -| Detached DOM elements | Chat-like demo. Used for [Debug DOM memory leaks ("Detached elements" profiling type)](https://learn.microsoft.com/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements). | [/detached-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) | [Detached DOM elements](https://microsoftedge.github.io/Demos/detached-elements/) demo | -| 3D View tool | Used for [Navigate webpage layers, z-index, and DOM using the 3D View tool](https://learn.microsoft.com/microsoft-edge/devtools/3d-view/). | [/devtools-3d/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-3d) | [3D View tool demo](https://microsoftedge.github.io/Demos/devtools-3d/) | -| Accessibility testing | Used for [Accessibility-testing features](https://learn.microsoft.com/microsoft-edge/devtools/accessibility/reference). | [/devtools-a11y-testing/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-a11y-testing) | [Animal Shelter](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) 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](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#edit-animation-and-transition-timings-with-the-easing-editor) in _CSS features reference_. | [/devtools-animated-property-issue/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-animated-property-issue) | [Animated CSS property demo](https://microsoftedge.github.io/Demos/devtools-animated-property-issue/) | -| Console panel demo pages | Used for [Console overview](https://learn.microsoft.com/microsoft-edge/devtools/console/), [Log messages in the Console tool](https://learn.microsoft.com/microsoft-edge/devtools/console/console-log), and [Fix JavaScript errors reported in the Console](https://learn.microsoft.com/microsoft-edge/devtools/console/console-debug-javascript). | [/devtools-console/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-console) | [DevTools Console panel demo pages](https://microsoftedge.github.io/Demos/devtools-console/) | -| Interact with the DOM using the Console | Used for [Interact with the DOM using the Console](https://learn.microsoft.com/microsoft-edge/devtools/console/console-dom-interaction). | [/devtools-console-dom-interactions/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-console-dom-interactions) | [Interact with the DOM using the Console](https://microsoftedge.github.io/Demos/devtools-console-dom-interactions/) demo | -| Contrast bug fix | Used for [Improving contrast in Microsoft Edge DevTools: A bugfix case study](https://blogs.windows.com/msedgedev/2021/06/15/improving-contrast-in-microsoft-edge-devtools-a-bugfix-case-study/). | [/devtools-contrast-bugfix/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-contrast-bugfix) | [Testing all badges in DevTools for contrast issues](https://microsoftedge.github.io/Demos/devtools-contrast-bugfix/) demo | -| Crash Analyzer tool demo | Used for [Enter a stack trace in the Crash analyzer tool](https://learn.microsoft.com/microsoft-edge/devtools/crash-analyzer/#enter-a-stack-trace-in-the-crash-analyzer-tool) in _Crash analyzer tool_. | [/devtools-crash-analyzer/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-crash-analyzer) | [Readme](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-crash-analyzer/README.md) | -| CSS Examples | Used for [Get started viewing and changing CSS](https://learn.microsoft.com/microsoft-edge/devtools/css/). | [/devtools-css-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) | [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo | -| DOM Examples | Used for [Get started viewing and changing the DOM](https://learn.microsoft.com/microsoft-edge/devtools/dom/). | [/devtools-dom-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) | [DOM Examples](https://microsoftedge.github.io/Demos/devtools-dom-get-started/) 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/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-explain-error) | [Explain Console errors and warnings in Copilot in Edge](https://microsoftedge.github.io/Demos/devtools-explain-error/) demo | -| Inspect CSS Grid | Used for [Inspect CSS Grid](https://learn.microsoft.com/microsoft-edge/devtools/css/grid). | [/devtools-grid/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-grid) | [Inspect CSS Grid](https://microsoftedge.github.io/Demos/devtools-grid/) demo | -| Inspect tool | Used for [Analyze pages using the Inspect tool](https://learn.microsoft.com/microsoft-edge/devtools/css/inspect). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect tool demo](https://microsoftedge.github.io/Demos/devtools-inspect/) | -| Debugging JavaScript that adds two numbers | Used for [Get started debugging JavaScript](https://learn.microsoft.com/microsoft-edge/devtools/javascript/). | [/devtools-js-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) | [Debugging JavaScript with Microsoft Edge DevTools](https://microsoftedge.github.io/Demos/devtools-js-get-started/) demo | -| Memory heap snapshot | Used for [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](https://learn.microsoft.com/microsoft-edge/devtools/memory-problems/heap-snapshots). | [/devtools-memory-heap-snapshot/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | n/a | -| Network tool reference | Used for [Network features reference](https://learn.microsoft.com/microsoft-edge/devtools/network/reference). | [/devtools-network-reference/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-network-reference) | [Network tool reference demo](https://microsoftedge.github.io/Demos/devtools-network-reference/) | -| **Performance** tool Activity Tabs | Used for [View activities in a table](https://learn.microsoft.com/microsoft-edge/devtools/performance/reference#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/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-activitytabs) | [Activity Tabs demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) | -| Sluggish Animation | Used for [Analyze runtime performance (tutorial)](https://learn.microsoft.com/microsoft-edge/devtools/performance/). | [/devtools-performance-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-get-started) | [Sluggish Animation](https://microsoftedge.github.io/Demos/devtools-performance-get-started/) demo | -| postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](https://learn.microsoft.com/microsoft-edge/devtools/performance/reference#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. | [/devtools-postmessage-perf-timeline/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) | [postMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) | -| CSS :target pseudo-class | Used for [Support forcing the :target CSS state](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2021/01/devtools#support-forcing-the-target-css-state) in _What's New in DevTools (Microsoft Edge 89)_. | [/devtools-target-pseudo/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-target-pseudo) | [CSS :target pseudo-class demo](https://microsoftedge.github.io/Demos/devtools-target-pseudo/) | -| Emulate a focused page | Used for [Emulate a focused page](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#emulate-a-focused-page) in _CSS features reference_. | [/emulate-focused-page/](https://github.com/MicrosoftEdge/Demos/tree/main/emulate-focused-page/) | [Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/) demo | -| Exploring the universe | Used for [Monitor Core Web Vitals metrics](../performance/overview.md#monitor-core-web-vitals-metrics) in _Performance tool: Analyze your website's performance_. | [/exploring-the-universe/](https://github.com/MicrosoftEdge/Demos/tree/main/exploring-the-universe) | [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo | -| Heap Snapshot Visualizer | Used for [Heap Snapshot visualizer extension for DevTools](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2023/01/devtools-109#heap-snapshot-visualizer-extension-for-devtools) in _What's New in DevTools (Microsoft Edge 109)_. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | -| Highlight pseudo-elements | Used for [View inherited highlight pseudo-elements](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-inherited-highlight-pseudo-elements) in _CSS features reference_. | [/highlight-pseudo-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/highlight-pseudo-elements/) | [Highlight pseudo-elements](https://microsoftedge.github.io/Demos/highlight-pseudo-elements/) demo | -| Idle detection | Used for [Emulate idle detector state](https://learn.microsoft.com/microsoft-edge/devtools/sensors/#emulate-idle-detector-state) in _Emulate device sensors_. | [/idle-detection/](https://github.com/MicrosoftEdge/Demos/tree/main/idle-detection) | [Idle detection demo](https://microsoftedge.github.io/Demos/idle-detection/) | -| JSON dummy data | Simple JSON files. Used for [View a JSON file or server response with formatting](https://learn.microsoft.com/microsoft-edge/web-platform/json-viewer). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) (Readme) | -| Inspect Network Activity | Used for [Inspect network activity](https://learn.microsoft.com/microsoft-edge/devtools/network/). | [/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Inspect Network Activity demo](https://microsoftedge.github.io/Demos/network-tutorial/) | -| Photo gallery | Used for [View your custom data in the performance profile](https://learn.microsoft.com/microsoft-edge/devtools/performance/extension#view-your-custom-data-in-the-performance-profile) in _Customize performance profile with extensibility APIs_, and [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/). | [/photo-gallery/](https://github.com/MicrosoftEdge/Demos/tree/main/photo-gallery) | [Photo Gallery](https://microsoftedge.github.io/Demos/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](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2024/01/devtools-121#added-source-map-support-in-the-coverage-tool) in _What's New in DevTools (Microsoft Edge 121)_. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar](https://microsoftedge.github.io/Demos/slow-calendar/public/) 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](https://learn.microsoft.com/microsoft-edge/devtools/speed/get-started). | [/travel-site/](https://github.com/MicrosoftEdge/Demos/tree/main/travel-site) | [Margie's Travel](https://microsoftedge.github.io/Demos/travel-site/) demo | -| Workspaces | Used for [Edit and save files in a workspace (Sources tool Workspace tab)](https://learn.microsoft.com/microsoft-edge/devtools/workspaces/). | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces demo](https://microsoftedge.github.io/Demos/workspaces/) | - - -See also: -* DevTools extension, in [Microsoft Edge extensions](#microsoft-edge-extensions), below. + +See: * [Sample code for DevTools](https://learn.microsoft.com/microsoft-edge/devtools/sample-code/sample-code) -* [Clone the Edge Demos repo to your drive](https://learn.microsoft.com/microsoft-edge/devtools/sample-code/sample-code#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](https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension). | [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension) | n/a | -| Basic | A basic DevTools extension. | [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) | n/a | -| Panel | A basic DevTools extension with a panel. | [/devtools-extension/sample 2/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%202) | n/a | -| CDP | A basic DevTools extension invoking Chrome Developer Protocol (CDP) APIs. | [/devtools-extension/sample 3/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%203) | n/a | -| Inspect | A basic DevTools extension that interacts with the Inspected page. | [/devtools-extension/sample 4/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%204) | n/a | - -See also: -* [Samples for Microsoft Edge extensions](https://learn.microsoft.com/microsoft-edge/extensions/samples). Includes samples that are in the **microsoft / MicrosoftEdge-Extensions** repo: - * Picture viewer pop-up webpage - * Picture inserter using content script + +See: +* [Samples for Microsoft Edge extensions](https://learn.microsoft.com/microsoft-edge/extensions/samples) ## 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/](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/) | [1DIV](https://microsoftedge.github.io/Demos/1DIV/dist/) demo | -| Email client | A simulated email client PWA that demonstrates how to use PWA protocol handlers. | [/email-client/](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/) | [Email inbox](https://microsoftedge.github.io/Demos/email-client/) demo | -| Application Title Meta Tag | Showcases the `application-title` meta tag. | [/pwa-application-title/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-application-title/) | [application-title](https://microsoftedge.github.io/Demos/pwa-application-title/) demo | -| PWA Background Sync | Lets you send chat messages even when offline. If you're offline when sending a message, the app uses Background Sync to send the message later, when you're back online. | [/pwa-background-sync/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-background-sync/) | [PWA Background Sync API demo](https://microsoftedge.github.io/Demos/pwa-background-sync/) | -| PWA file handlers | Handles `*.txt` files like a native application does. | [/pwa-file-handlers/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-file-handlers/) | [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-file-handlers/) | -| Install element demos - `` | Demos that showcase the use of the `` HTML element to declaratively install web apps. | [/pwa-install-element/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-install-element/) | [The `` Element Store](https://microsoftedge.github.io/Demos/pwa-install-element/) | -| PWA installer | A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. | [/pwa-installer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/) | [pwa-installer](https://microsoftedge.github.io/Demos/pwa-installer/) demo | -| Manifest Localization | A PWA that demonstrates localized app metadata in the web app manifest, supporting English, German, and Arabic. | [/pwa-manifest-localization/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-manifest-localization/) | [Manifest Localization demo](https://microsoftedge.github.io/Demos/pwa-manifest-localization/) | -| 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/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-pwastore/) | [Edge demos](https://microsoftedge.github.io/Demos/pwa-pwastore/) | -| Timer PWA | Has a **Set timer** button, and you can set the duration of the timer. | [/pwa-timer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer/) | [Timer PWA demo](https://microsoftedge.github.io/Demos/pwa-timer/) | -| 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/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do/) | [PWA To Do](https://microsoftedge.github.io/Demos/pwa-to-do/) demo | -| PWAmp | A music player that plays local audio files. | [/pwamp/](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/) | [pwamp](https://microsoftedge.github.io/Demos/pwamp/) demo | -| Temperature converter | Converts temperatures. To learn how to use and develop PWAs, start with this sample. | [/temperature-converter/](https://github.com/MicrosoftEdge/Demos/tree/main/temperature-converter/) | [Temperature converter](https://microsoftedge.github.io/Demos/temperature-converter/) demo | -| wami | An image manipulation app to crop, resize, or add effects to images. | [/wami/](https://github.com/MicrosoftEdge/Demos/tree/main/wami/) | [wami](https://microsoftedge.github.io/Demos/wami/) demo | - -To learn how to use and develop PWAs, start with the Temperature convertor sample. - -See also: -* [Progressive Web App samples](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/index) - also lists the demos: - * BPM Techno - * Webboard + +See: +* [Progressive Web App samples](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/) ## WebView2 - - -The WebView2 samples are in the **MicrosoftEdge / WebView2Samples** repo, rather than in the present, **MicrosoftEdge / Demos** repo. See: -* [MicrosoftEdge / WebView2Samples](https://github.com/MicrosoftEdge/WebView2Samples) repo -* [WebView2 sample apps](https://learn.microsoft.com/microsoft-edge/webview2/samples/) article +* [WebView2 sample apps](https://learn.microsoft.com/microsoft-edge/webview2/samples/) ## 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/](https://github.com/MicrosoftEdge/Demos/tree/main/built-in-ai) | [Built-in AI playgrounds](https://microsoftedge.github.io/Demos/built-in-ai/) demo | -| CSS Gap Decorations demos | Draws line decorations within gaps in CSS Grid, Flexbox, and Multi-column layouts. | [/css-gap-decorations/](https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations) | [CSS Gap Decorations demos](https://microsoftedge.github.io/Demos/css-gap-decorations/) (Readme) | -| CSS Masonry demos | Showcase the implementation of CSS Masonry layout. | [/css-masonry/](https://github.com/MicrosoftEdge/Demos/tree/main/css-masonry) | [CSS Masonry demos](https://microsoftedge.github.io/Demos/css-masonry/) (Readme) | -| CSS Custom Highlight API | How to programmatically create and remove custom highlights on a web page. | [/custom-highlight-api/](https://github.com/MicrosoftEdge/Demos/tree/main/custom-highlight-api) | [CSS Custom Highlight API demo](https://microsoftedge.github.io/Demos/custom-highlight-api/) | -| EditContext API demo | Demo page showing how the EditContext API can be used to build an advanced text editor. | [/edit-context/](https://github.com/MicrosoftEdge/Demos/tree/main/edit-context) | [HTML editor demo](https://microsoftedge.github.io/Demos/edit-context/) | -| EyeDropper API | How to use the EyeDropper API to create a color sampling tool from JavaScript. | [/eyedropper/](https://github.com/MicrosoftEdge/Demos/tree/main/eyedropper) | [EyeDropper API demos](https://microsoftedge.github.io/Demos/eyedropper/) | -| Focusgroup demos | Interactive demos for the HTML `focusgroup` attribute for declarative arrow-key keyboard navigation in composite widgets. | [/focusgroup/](https://github.com/MicrosoftEdge/Demos/tree/main/focusgroup) | [Focusgroup demos](https://microsoftedge.github.io/Demos/focusgroup/) | -| IndexedDB: `getAllRecords()` | Shows the benefits of the proposed `getAllRecords()` IndexedDB method to more conveniently and quickly read IDB records. | [/idb-getallrecords/](https://github.com/MicrosoftEdge/Demos/tree/main/idb-getallrecords) | [IndexedDB: getAllRecords()](https://microsoftedge.github.io/Demos/idb-getallrecords/) demo | -| Notifications demo | Using incoming call notifications. | [/incoming-call-notifications/](https://github.com/MicrosoftEdge/Demos/tree/main/incoming-call-notifications) | [Notifications demo](https://microsoftedge.github.io/Demos/incoming-call-notifications/) | -| JSON dummy data | Simple JSON files. Used for [View a JSON file or server response with formatting](https://learn.microsoft.com/microsoft-edge/web-platform/json-viewer). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) (Readme) | -| OpaqueRange | Demonstrates the `OpaqueRange` API for creating ranges over `