diff --git a/microsoft-edge/devtools/css/index.md b/microsoft-edge/devtools/css/index.md
index b86d4181e6..de9ea8e3f1 100644
--- a/microsoft-edge/devtools/css/index.md
+++ b/microsoft-edge/devtools/css/index.md
@@ -31,7 +31,7 @@ To learn the basics of using DevTools to view and change the CSS for a page, fol
 
 1. Open the [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo page in a new window or tab. (To open a link in a new window or tab, right-click the link. Or, press and hold **Ctrl** (for Windows, Linux) or **Command** (for macOS) and then click the link.)
 
-   <!-- You can view the source files for the CSS Examples demo page at the [MicrosoftEdge/Demos > devtools-css-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) repo folder. -->
+   <!-- You can view the source files for the CSS Examples demo page at the [MicrosoftEdge / Demos > devtools-css-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) repo folder. -->
 
 1. Right-click the `Inspect Me!` text, and then select **Inspect**.
 
diff --git a/microsoft-edge/devtools/css/reference-images/at-font-palette-values-at-rule-rendered.png b/microsoft-edge/devtools/css/reference-images/at-font-palette-values-at-rule-rendered.png
new file mode 100644
index 0000000000..75c927496f
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/at-font-palette-values-at-rule-rendered.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/at-position-try-at-rule-rendered.png b/microsoft-edge/devtools/css/reference-images/at-position-try-at-rule-rendered.png
new file mode 100644
index 0000000000..e6c1911661
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/at-position-try-at-rule-rendered.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/at-position-try-popovertarget.png b/microsoft-edge/devtools/css/reference-images/at-position-try-popovertarget.png
new file mode 100644
index 0000000000..b84f1db4c6
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/at-position-try-popovertarget.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/at-property-itemsize.png b/microsoft-edge/devtools/css/reference-images/at-property-itemsize.png
new file mode 100644
index 0000000000..799fda1ac2
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/at-property-itemsize.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/at-property-tooltip.png b/microsoft-edge/devtools/css/reference-images/at-property-tooltip.png
new file mode 100644
index 0000000000..a0a6965714
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/at-property-tooltip.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/at-scope-at-rule-rendered.png b/microsoft-edge/devtools/css/reference-images/at-scope-at-rule-rendered.png
new file mode 100644
index 0000000000..f0d3d01a4d
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/at-scope-at-rule-rendered.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/cascade-layers.png b/microsoft-edge/devtools/css/reference-images/cascade-layers.png
new file mode 100644
index 0000000000..93960b0599
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/cascade-layers.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/change-length-values.png b/microsoft-edge/devtools/css/reference-images/change-length-values.png
new file mode 100644
index 0000000000..ec67675661
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/change-length-values.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/copy-css-dropdown-menu.png b/microsoft-edge/devtools/css/reference-images/copy-css-dropdown-menu.png
new file mode 100644
index 0000000000..0ffc9c44a9
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/copy-css-dropdown-menu.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/css-elements-computed-h1.png b/microsoft-edge/devtools/css/reference-images/css-elements-computed-h1.png
index 415ed3d6a4..f9de78e97b 100644
Binary files a/microsoft-edge/devtools/css/reference-images/css-elements-computed-h1.png and b/microsoft-edge/devtools/css/reference-images/css-elements-computed-h1.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1-2.png b/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1-2.png
index cfc5d30c84..c37b2e397f 100644
Binary files a/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1-2.png and b/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1-2.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1-highlight.png b/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1-highlight.png
index 291575f51f..cf2d6a5023 100644
Binary files a/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1-highlight.png and b/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1-highlight.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1.png b/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1.png
index 8790e5a302..8e89f4fb5f 100644
Binary files a/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1.png and b/microsoft-edge/devtools/css/reference-images/css-elements-styles-h1.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/css-elements-styles-insert-style-rule-below.png b/microsoft-edge/devtools/css/reference-images/css-elements-styles-insert-style-rule-below.png
index 89a3b28b8b..5c11042a95 100644
Binary files a/microsoft-edge/devtools/css/reference-images/css-elements-styles-insert-style-rule-below.png and b/microsoft-edge/devtools/css/reference-images/css-elements-styles-insert-style-rule-below.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/dragging-control-point.png b/microsoft-edge/devtools/css/reference-images/dragging-control-point.png
new file mode 100644
index 0000000000..549ca6123a
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/dragging-control-point.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/dragging-control-points.png b/microsoft-edge/devtools/css/reference-images/dragging-control-points.png
new file mode 100644
index 0000000000..a6b10f132f
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/dragging-control-points.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/easing-editor.png b/microsoft-edge/devtools/css/reference-images/easing-editor.png
index ccea54253a..29bc3def8b 100644
Binary files a/microsoft-edge/devtools/css/reference-images/easing-editor.png and b/microsoft-edge/devtools/css/reference-images/easing-editor.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/easing-function-ease-in-out.png b/microsoft-edge/devtools/css/reference-images/easing-function-ease-in-out.png
new file mode 100644
index 0000000000..cde0d1285d
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/easing-function-ease-in-out.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/easing-function-ease-in.png b/microsoft-edge/devtools/css/reference-images/easing-function-ease-in.png
new file mode 100644
index 0000000000..408d4e7ceb
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/easing-function-ease-in.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/easing-function-ease-out.png b/microsoft-edge/devtools/css/reference-images/easing-function-ease-out.png
new file mode 100644
index 0000000000..d4591a4a7f
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/easing-function-ease-out.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/easing-function-linear.png b/microsoft-edge/devtools/css/reference-images/easing-function-linear.png
new file mode 100644
index 0000000000..87e1bdaf7d
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/easing-function-linear.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/emulate-focused-page.png b/microsoft-edge/devtools/css/reference-images/emulate-focused-page.png
new file mode 100644
index 0000000000..38cb292dfe
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/emulate-focused-page.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/insert-style-rule-below-icon.png b/microsoft-edge/devtools/css/reference-images/insert-style-rule-below-icon.png
new file mode 100644
index 0000000000..6a7470ead5
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/insert-style-rule-below-icon.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/new-style-rule-icon.png b/microsoft-edge/devtools/css/reference-images/new-style-rule-icon.png
index c6bf915136..e224151821 100644
Binary files a/microsoft-edge/devtools/css/reference-images/new-style-rule-icon.png and b/microsoft-edge/devtools/css/reference-images/new-style-rule-icon.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/position-try-rule-in-styles-tab.png b/microsoft-edge/devtools/css/reference-images/position-try-rule-in-styles-tab.png
new file mode 100644
index 0000000000..39d28fce5a
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/position-try-rule-in-styles-tab.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/scope-rule-in-styles-tab.png b/microsoft-edge/devtools/css/reference-images/scope-rule-in-styles-tab.png
new file mode 100644
index 0000000000..f635b2c2af
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/scope-rule-in-styles-tab.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/the-tooltip-documentation.png b/microsoft-edge/devtools/css/reference-images/the-tooltip-documentation.png
new file mode 100644
index 0000000000..4eb4606116
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/the-tooltip-documentation.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/the-tooltip-specificity.png b/microsoft-edge/devtools/css/reference-images/the-tooltip-specificity.png
new file mode 100644
index 0000000000..07708a980a
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/the-tooltip-specificity.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/the-value-a-custom-property.png b/microsoft-edge/devtools/css/reference-images/the-value-a-custom-property.png
new file mode 100644
index 0000000000..cc610138b5
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/the-value-a-custom-property.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/toggle-common-rendering-emulations-icon.png b/microsoft-edge/devtools/css/reference-images/toggle-common-rendering-emulations-icon.png
new file mode 100644
index 0000000000..f7c5e53696
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/toggle-common-rendering-emulations-icon.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/toggle-common-rendering-emulations.png b/microsoft-edge/devtools/css/reference-images/toggle-common-rendering-emulations.png
new file mode 100644
index 0000000000..99b5a0d6e2
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/toggle-common-rendering-emulations.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/toggle-css-layers-view-icon.png b/microsoft-edge/devtools/css/reference-images/toggle-css-layers-view-icon.png
new file mode 100644
index 0000000000..68d0ddfd41
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/toggle-css-layers-view-icon.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/various-links-highlighted.png b/microsoft-edge/devtools/css/reference-images/various-links-highlighted.png
new file mode 100644
index 0000000000..d2056427a7
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/various-links-highlighted.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/view-inherited-section.png b/microsoft-edge/devtools/css/reference-images/view-inherited-section.png
new file mode 100644
index 0000000000..0e21652779
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/view-inherited-section.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/view-pseudo-section.png b/microsoft-edge/devtools/css/reference-images/view-pseudo-section.png
new file mode 100644
index 0000000000..9710f3bb8c
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/view-pseudo-section.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/view-supports-rules.png b/microsoft-edge/devtools/css/reference-images/view-supports-rules.png
new file mode 100644
index 0000000000..ec791c0de6
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/view-supports-rules.png differ
diff --git a/microsoft-edge/devtools/css/reference.md b/microsoft-edge/devtools/css/reference.md
index fd0747e8cb..947ae5119a 100644
--- a/microsoft-edge/devtools/css/reference.md
+++ b/microsoft-edge/devtools/css/reference.md
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 04/02/2026
+ms.date: 05/21/2026
 ---
 <!-- Copyright Kayce Basques
 
@@ -24,8 +24,6 @@ ms.date: 04/02/2026
 # CSS features reference
 <!-- https://developer.chrome.com/docs/devtools/css/reference/ -->
 
-<!-- todo: sync content in incoming, commented out sections -->
-
 Discover new workflows in the following comprehensive reference of Microsoft Edge DevTools features related to viewing and changing CSS.
 
 To learn the basics, see [Get started viewing and changing CSS](../css/index.md).
@@ -33,33 +31,55 @@ To learn the basics, see [Get started viewing and changing CSS](../css/index.md)
 **Detailed contents:**<!-- https://github.com/captainbrosset/WebToc -->
 * [Select an element](#select-an-element)
 * [View CSS](#view-css)
+   * [Navigate with links](#navigate-with-links)
+   * [View tooltips with CSS documentation, specificity, and custom property values](#view-tooltips-with-css-documentation-specificity-and-custom-property-values)
+      * [View CSS documentation](#view-css-documentation)
+      * [View selector specificity](#view-selector-specificity)
+      * [View the values of custom properties](#view-the-values-of-custom-properties)
    * [View the external stylesheet where a rule is defined](#view-the-external-stylesheet-where-a-rule-is-defined)
+   * [View invalid, overridden, inactive, and other CSS](#view-invalid-overridden-inactive-and-other-css)
    * [View only the CSS that is actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element)
    * [View CSS properties in alphabetical order](#view-css-properties-in-alphabetical-order)
    * [View inherited CSS properties](#view-inherited-css-properties)
+   * [View CSS at-rules](#view-css-at-rules)
+      * [View `@property` at-rules](#view-property-at-rules)
+      * [View `@supports` at-rules](#view-supports-at-rules)
+      * [View `@scope` at-rules](#view-scope-at-rules)
+      * [View `@font-palette-values` at-rules](#view-font-palette-values-at-rules)
+      * [View `@position-try` at-rules](#view-position-try-at-rules)
    * [View an element's box model](#view-an-elements-box-model)
    * [Search and filter the CSS of an element](#search-and-filter-the-css-of-an-element)
+   * [Emulate a focused page](#emulate-a-focused-page)
    * [Toggle a pseudo-class](#toggle-a-pseudo-class)
+   * [View inherited highlight pseudo-elements](#view-inherited-highlight-pseudo-elements)
+   * [View cascade layers](#view-cascade-layers)
    * [View a page in print mode](#view-a-page-in-print-mode)
    * [View used and unused CSS with the Coverage tool](#view-used-and-unused-css-with-the-coverage-tool)
    * [Force print preview mode](#force-print-preview-mode)
+* [Copy CSS](#copy-css)
 * [Change CSS](#change-css)
    * [Two ways to add a CSS declaration to an element](#two-ways-to-add-a-css-declaration-to-an-element)
       * [Adding an inline CSS declaration to an element](#adding-an-inline-css-declaration-to-an-element)
       * [Adding a CSS declaration to an existing style rule](#adding-a-css-declaration-to-an-existing-style-rule)
    * [Change a declaration name or value](#change-a-declaration-name-or-value)
-   * [Increment numerical declaration values](#increment-numerical-declaration-values)
+   * [Change enumerable values with keyboard shortcuts](#change-enumerable-values-with-keyboard-shortcuts)
+   * [Change length values](#change-length-values)
    * [Add a class to an element](#add-a-class-to-an-element)
+   * [Emulate light and dark theme preferences and enable automatic dark mode](#emulate-light-and-dark-theme-preferences-and-enable-automatic-dark-mode)
    * [Toggle a class](#toggle-a-class)
    * [Add a style rule](#add-a-style-rule)
       * [Select a stylesheet to add a rule to](#select-a-stylesheet-to-add-a-rule-to)
-      * [Add a style rule to a specific location](#add-a-style-rule-to-a-specific-location)
+      * [Add a style rule to a specific location in a stylesheet](#add-a-style-rule-to-a-specific-location-in-a-stylesheet)
    * [Toggle a declaration](#toggle-a-declaration)
+   * [Edit the `::view-transition` pseudo-elements during an animation](#edit-the-view-transition-pseudo-elements-during-an-animation)
+   * [Align grid items and their content with the Grid Editor](#align-grid-items-and-their-content-with-the-grid-editor)
    * [Change colors with the Color Picker](#change-colors-with-the-color-picker)
    * [Sample a color off the page with the Eyedropper](#sample-a-color-off-the-page-with-the-eyedropper)
    * [Change angle value with the Angle Clock](#change-angle-value-with-the-angle-clock)
    * [Change box and text shadows with the Shadow Editor](#change-box-and-text-shadows-with-the-shadow-editor)
    * [Edit animation and transition timings with the Easing Editor](#edit-animation-and-transition-timings-with-the-easing-editor)
+      * [Use presets to adjust timings](#use-presets-to-adjust-timings)
+      * [Configure custom timings](#configure-custom-timings)
 * [See also](#see-also)
 
 
@@ -69,11 +89,14 @@ To learn the basics, see [Get started viewing and changing CSS](../css/index.md)
 
 The **Elements** tool in DevTools lets you view or change the CSS of one element at a time.  The selected element is highlighted in the **DOM Tree**.  The styles of the element are shown in the **Styles** pane.  For a tutorial, see [View the CSS for an element](../css/index.md#view-the-css-for-an-element).
 
-In the following figure, the `h1` element that is highlighted in the **DOM Tree** is the selected element.  On the right, the styles of the element are shown in the **Styles** pane.  On the left, the element is highlighted in the viewport, but only because the mouse is currently hovering over it in the **DOM Tree**:
-
 ![An example of a selected element](./reference-images/css-elements-styles-h1.png)
 
-There are many ways to select an element:
+In the above figure:
+* The `h1` element that is highlighted in the **DOM Tree** is the selected element.
+* On the right, the styles of the element are shown in the **Styles** pane.
+* On the left, the element is highlighted in the viewport, but only because the mouse is currently hovering over it in the **DOM Tree**:
+
+There are multiple ways to select an element:
 
 *  In a rendered webpage, right-click a page element, and then click **Inspect**.
 
@@ -92,29 +115,137 @@ Use the **Elements** > **Styles** and **Computed** tabs to view CSS rules and di
 
 
 <!-- ------------------------------ -->
-<!-- #### Navigate with links -->
+#### Navigate with links
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#links -->
 
+The **Styles** tab displays links in various places to various other places, including but not limited to:
+
+* Next to CSS rules, to stylesheets and CSS sources.  Such links open the **Sources** tool.  If the stylesheet is minified, see [Reformat a minified JavaScript file with pretty-print](../javascript/reference.md#reformat-a-minified-javascript-file-with-pretty-print) in _JavaScript debugging features_.
+
+* In the **Inherited from** sections, to parent elements.
+
+* In `var()` calls, to custom property declarations.  See [Using CSS custom properties (variables)](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties) at MDN.
+
+* In `animation` shorthand properties, to `@keyframes`.
+
+* **Learn more** links in documentation tooltips.
+
+Links may be styled differently.  If you're not sure if something is a link, try clicking it to find out.
+
+For example:
+
+1. Go to [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/) in a new window or tab.
+
+1. Right-click white space above the string "Add a task", and then click **Inspect**.
+
+   DevTools opens, with the **Elements** tool selected.
+
+1. Select the **Styles** tab.
+
+   Various types of links are displayed:
+
+   ![Various links highlighted](./reference-images/various-links-highlighted.png)
+
 
 <!-- ------------------------------ -->
-<!-- #### View tooltips with CSS documentation, specificity, and custom property values -->
+#### View tooltips with CSS documentation, specificity, and custom property values
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#tooltips -->
 
+In the **Elements** tool, the **Styles** tab shows tooltips with useful information when you hover over specific elements.
+
 
 <!-- ---------- -->
-<!-- ###### View CSS documentation -->
+###### View CSS documentation
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#view-docs -->
 
+To display the description of a CSS property, in a tooltip:
+
+1. Go to a webpage, such as [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab.
+
+1. Right-click white space above the string "Add a task", and then click **Inspect**.
+
+   DevTools opens, with the **Elements** tool selected.
+
+1. Select the **Styles** tab.
+
+1. Hover over a CSS property name, such as `padding:`.
+
+   A tooltip is displayed:
+
+   ![The tooltip with documentation on a CSS property](./reference-images/the-tooltip-documentation.png)
+
+   DevTools pulls the descriptions for tooltips from the [VS Code Custom Data](https://github.com/microsoft/vscode-custom-data) repo.
+
+1. In the tooltip, click the **Learn more** link.
+
+   The CSS reference page for the property at MDN is displayed, such as [`padding` CSS property](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/padding).
+
+
+To turn the CSS tooltips off:
+
+* In the tooltip, select the **Don't show** checkbox.
+
+
+To turn CSS tooltips on again:
+
+1. In DevTools, select **Customize and control DevTools**, and then select **Settings**.
+
+1. In the outline on the left, select **Preferences**, and then scroll down to the **Elements** section.
+
+1. Select the **Show CSS documentation tooltip** checkbox.
+
 
 <!-- ---------- -->
-<!-- ###### View selector specificity -->
+###### View selector specificity
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#selector-specificity -->
 
+Hover over a CSS selector, to display a tooltip that shows the selector's specificity weight, such as: **Specificity: (0,0,1)**:
+
+For example:
+
+1. Go to a webpage, such as [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab.
+
+1. Right-click the webpage, and then click **Inspect**.
+
+   DevTools opens, with the **Elements** tool selected.
+
+1. In the DOM tree, select the `<body>` element.
+
+1. In the **Styles** tab, hover over the `body` CSS selector.
+
+   A tooltip is displayed, showing **Specificity: (0,0,1)**:
+
+   ![The tooltip with specificity weight of a matched selector](./reference-images/the-tooltip-specificity.png)
+
+See also:
+* [Specificity](https://developer.mozilla.org/docs/Web/CSS/Specificity) - MDN.
+
 
 <!-- ---------- -->
-<!-- ###### View the values of custom properties -->
+###### View the values of custom properties
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#custom-css -->
 
+Hover over a `var(--custom-property)` function to see the value of the custom property in a tooltip.
+
+For example:
+
+1. Go to a webpage, such as [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab.
+
+1. Right-click the webpage, and then click **Inspect**.
+
+   DevTools opens, with the **Elements** tool selected.
+
+1. In the DOM tree, select the `<body>` element.
+
+1. In the **Styles** tab, in the `body` CSS rule, hover over `--spacing`.
+
+   The value `.3rem` is displayed in a tooltip:
+
+   ![The value of a custom property in a tooltip](./reference-images/the-value-a-custom-property.png)
+
+See also:
+* [Custom properties (`--*`): CSS variables](https://developer.mozilla.org/docs/Web/CSS/--*) - MDN.
+
 
 <!-- ------------------------------ -->
 #### View the external stylesheet where a rule is defined
@@ -122,19 +253,25 @@ Use the **Elements** > **Styles** and **Computed** tabs to view CSS rules and di
 
 In the **Styles** pane, click the link next to a CSS rule to open the external stylesheet that defines the rule.  The stylesheet opens in the **Editor** pane of the **Sources** tool.
 
-If the stylesheet is minified, click the **Format** (![Format](./reference-images/format-icon.png)) button, at the bottom of the **Editor** pane.  For more information, see [Reformat a minified JavaScript file with pretty-print](../javascript/reference.md#reformat-a-minified-javascript-file-with-pretty-print).
-
-In the following figure, after you click
-`https://learn.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css:2`<!-- :2 at end causes not to work. --><!--keep /en-us--> you are taken to line 2 of
-`https://learn.microsoft.com/_themes/docs.theme/master/_themes/styles/b66bc881.site-ltr.css`, where the `.content h1:first-of-type` CSS rule is defined.<!-- /master/ works but lines concated.  /main/ doesn't work -->
+If the stylesheet is minified, click the **Format** (![Format](./reference-images/format-icon.png)) button, at the bottom of the **Editor** pane.  For more information, see [Reformat a minified JavaScript file with pretty-print](../javascript/reference.md#reformat-a-minified-javascript-file-with-pretty-print) in _JavaScript debugging features_.
 
 ![Viewing the stylesheet where a rule is defined](./reference-images/css-elements-styles-h1-highlight.png)
 
+In the above figure, after you click `to-do-styles.css:5`, you are taken to line 5 of `to-do-styles.css`, where the `h1` CSS rule is defined.
+
 
 <!-- ------------------------------ -->
-<!-- #### View invalid, overridden, inactive, and other CSS -->
+#### View invalid, overridden, inactive, and other CSS
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#css-issues -->
 
+The **Styles** tab recognizes many kinds of CSS issues and highlights them in different ways.
+
+<!-- todo: after https://github.com/MicrosoftDocs/edge-developer/pull/3814 is merged, un-comment link
+upstream: https://developer.chrome.com/docs/devtools/css/issues#css-in-styles
+See:
+* [Understand CSS in the Styles pane](https://learn.microsoft.com/microsoft-edge/devtools/css/issues#understand-css-in-the-styles-pane) in _Find invalid, overridden, inactive, and other CSS_.
+-->
+
 
 <!-- ------------------------------ -->
 #### View only the CSS that is actually applied to an element
@@ -142,77 +279,251 @@ In the following figure, after you click
 
 The **Styles** pane shows you all of the rules that apply to an element, including declarations that have been overridden.  When you aren't interested in overridden declarations, use the **Computed** pane to view only the CSS that is actually being applied to an element.
 
-1. [Select an element](#select-an-element).
+For example:
 
-1. Go to the **Computed** pane in the **Elements** tool.
+1. Go to a webpage, such as [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab.
 
-   On a wide DevTools window, the **Computed** pane doesn't exist.  The contents of the **Computed** pane are shown on the **Styles** pane.
+1. Right-click the heading **My tasks**, and then click **Inspect**.
 
-   Inherited properties are opaque.
+   DevTools opens, with the **Elements** tool selected, with the `<h1>` element selected in the DOM tree.
 
-1. To display all inherited values, select the **Show All** checkbox.
+1. In the **Elements** tool, select the **Computed** tab.
 
-   In the following figure, the **Computed** pane shows the CSS properties being applied to the currently selected `h1` element:
+   The CSS properties that are applied to the selected element are displayed:
 
    ![The Computed panel](./reference-images/css-elements-computed-h1.png)
 
+   A property name and value in italics indicates a value that's calculated at runtime.
+
+1. To display all properties, select the **Show all** checkbox.
+
+<!-- todo: after https://github.com/MicrosoftDocs/edge-developer/pull/3814 is merged, un-comment link
+upstream: https://developer.chrome.com/docs/devtools/css/issues#css-in-computed
+See:
+* [Understand CSS in the Computed pane](https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/css/issues?branch=pr-en-us-3814#understand-css-in-the-computed-pane) in _Find invalid, overridden, inactive, and other CSS_.
+-->
+
 
 <!-- ------------------------------ -->
 #### View CSS properties in alphabetical order
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#alphabetical -->
 
-Use the **Computed** pane.  See [View only the CSS that is actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element).
+Use the **Computed** pane.  See [View only the CSS that is actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element), above.
 
 
 <!-- ------------------------------ -->
 #### View inherited CSS properties
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#inherited -->
 
-Check the **Show All** checkbox in the **Computed** pane.  See [View only the CSS that is actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element).
+Check the **Show All** checkbox in the **Computed** pane.  See [View only the CSS that is actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element), above.
 
 
 <!-- ------------------------------ -->
-<!-- #### View CSS at-rules -->
+#### View CSS at-rules
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#at-rules -->
 
+At-rules are CSS statements that let you control CSS behavior.
+
+In the **Elements** tool, the **Styles** tab shows the following at-rules in dedicated sections:
+
+* `@property` - see [View `@property` at-rules](#view-property-at-rules), below.
+* `@supports` - see [View `@supports` at-rules](#view-supports-at-rules), below.
+* `@scope` - see [View `@scope` at-rules](#view-scope-at-rules), below.
+* `@font-palette-values` - see [View `@font-palette-values` at-rules](#view-font-palette-values-at-rules), below.
+* `@position-try` - see [View `@position-try` at-rules](#view-position-try-at-rules), below.
+
 
 <!-- ---------- -->
-<!-- ###### View @property at-rules -->
+###### View `@property` at-rules
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#property -->
 
+The `@property` CSS at-rule lets you define CSS custom properties of specific types in a stylesheet.
+
+Hover over the name of such a property in the **Styles** tab, to see a tooltip that contains:
+* The property's value, such as `20%`.
+* The property's descriptors, such as: `initial value: 40%`
+* A **View registered property** link to its registration in the collapsible `@property` section at the bottom of the **Styles** tab.
+
+For example:
+
+1. Go to a page that uses the `@property` at-rule, such as [View `@property` at-rules](https://microsoftedge.github.io/Demos/at-rules-property/), in a new window or tab.
+
+1. Right-click the **Item three** paragraph, and then click **Inspect**.
+
+   DevTools opens, with the **Elements** tool selected.
+
+1. In the **Styles** tab, hover over that `var(--itemSize)` function:
+
+   ![Tooltip for the at-property CSS at-rule](./reference-images/at-property-tooltip.png)
+
+   The tooltip contains:
+   * The property's value, such as `100px`.
+   * The property's descriptors, such as initial value.
+   * A **View registered property** link.
+
+1. Click the **View registered property** link.
+
+   The expanded **@property** section is displayed, further down in the **Styles** tab:
+
+   ![--itemSize in the at-property section](./reference-images/at-property-itemsize.png)
+
+To edit an `@property` rule, double-click its name or value.  See [Change a declaration name or value](#change-a-declaration-name-or-value), below.
+
+See also:
+* [@property: giving superpowers to CSS variables](https://web.dev/articles/at-property) at Web.dev.
+* [Custom properties (`--*`): CSS variables](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/--*) at MDN.
+
 
 <!-- ---------- -->
-<!-- ###### View @supports at-rules -->
+###### View `@supports` at-rules
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#supports -->
 
+The **Styles** tab shows you the `@supports` CSS at-rules, if they are applied to an element.
+
+For example, to view the `@supports` rule:
+
+1. In a new window or tab, go to a page that uses the `@supports` at-rule, such as [View `@supports` at-rules](https://microsoftedge.github.io/Demos/at-rules-supports/).
+
+1. Right-click "I support CIE LAB color space!", and then select **Inspect**.
+
+   DevTools opens.  In the **Elements** tool, in the DOM tree, the `<div class="box">` element is selected.  In the **Styles** tab, `@supports` CSS declarations are listed:
+
+   ![Result of HTML for the at-supports at-rule](./reference-images/view-supports-rules.png)
+
+* If your browser supports the `lab()` function, the element is green.
+
+* If your browser doesn't support the `lab()` function, the element is purple.
+
+To see which browser versions support the CIE LAB color space, [search Caniuse.com for "lab"](https://caniuse.com/?search=lab).
+
 
 <!-- ---------- -->
-<!-- ###### View @scope at-rules -->
+###### View `@scope` at-rules
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#scope -->
 
+The **Styles** tab displays CSS `@scope` at-rules if they are applied to an element.
+
+The `@scope` at-rules allow you to scope CSS styles; that is, explicitly apply styles to specific elements.  See [`@scope` CSS at-rule](https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@scope) at MDN.
+
+To view the `@scope` rule:
+
+1. In a new window or tab, go to a page that uses the `@scope` at-rule, such as the [View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-scope/) demo:
+
+   ![Result of HTML & CSS for the at-scope at-rule](./reference-images/at-scope-at-rule-rendered.png)
+
+1. Right-click "I'm the text that lives on a card", and then select **Inspect**.
+
+   DevTools opens, with the **Elements** tool selected.
+
+1. Select the **Styles** tab.
+
+1. Examine the `@scope` rule:
+
+   ![The at-scope rule in the Styles tab](./reference-images/scope-rule-in-styles-tab.png)
+
+   In this example, the `@scope` rule (background color = plum) overrides the global CSS `background-color` declaration (aquamarine), for any `<p>` element that's inside an element (such as a `<div>`) that has a `card` class.
+
+   To edit the `@scope` rule, you double-click in the rule:
+
+1. In the **Styles** tab, double-click **plum**, press **Delete**, and then select **beige**.
+
+   The text in the card in the demo webpage changes from plum background to beige background.
+
 
 <!-- ---------- -->
-<!-- ###### View @font-palette-values at-rules -->
+###### View `@font-palette-values` at-rules
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#font-palette-values -->
 
+The [@font-palette-values CSS at-rule](https://developer.mozilla.org/docs/Web/CSS/@font-palette-values) lets you customize (override) the default values of the `font-palette` property.  In the **Elements** tool, the **Styles** tab shows this at-rule in a dedicated section.
+
+To view the `@font-palette-values` CSS rule:
+
+1. In a new window or tab, go to a page that uses the `@font-palette-values` at-rule, such as the [View `@font-palette-values` at-rules](https://microsoftedge.github.io/Demos/at-rules-font-palette-values/) demo.
+
+1. Right-click "new colors", and then select **Inspect**.
+
+   DevTools opens, with the **Elements** tool selected.
+
+1. In the **Styles** tab, find the `@font-palette-values` CSS rule:
+
+   ![The at-font-palette-values rule in the Styles tab](./reference-images/at-font-palette-values-at-rule-rendered.png)
+
+   In this example, the `--New` font palette values override the default values of the colored font.
+
+   To edit a custom value, double-click it, as follows:
+
+1. In the `@font-palette-values` CSS rule, in the `override-colors` property, double-click `0 gold, 1 red`, and enter `0 blue, 1 red`.
+
+   In the inspected webpage, "new colors" is now rendered as blue and red.
+
 
 <!-- ---------- -->
-<!-- ###### View @position-try at-rules -->
+###### View `@position-try` at-rules
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#filter -->
+<!-- upstream: the imported codepen code changed from using position-try-options to instead using position-try-fallbacks, but upstream article still says & shows position-try-options -->
+
+The `@position-try` CSS rule along with the `position-try-fallbacks` property lets you define alternative anchor positions for elements.
+
+In the **Elements** tool, the **Styles** tab resolves and links the following:
+
+* The `position-try-fallbacks` property values (or `position-try-options` property values) link to a dedicated `@position-try --name` CSS rule section.
+
+* The `position-anchor` property values and `anchor()` arguments link to the corresponding elements that have `popovertarget` attributes.
+
+For example, inspect the `position-try-fallbacks` values and `@position-try` CSS rules, as follows:
+
+1. In a new window or tab, go to a page that uses the  `position-try-fallbacks` values and `@position-try` at-rule, such as the [View `@position-try` at-rules](https://microsoftedge.github.io/Demos/at-rules-position-try/) demo.
+
+1. In the rendered webpage, open the submenu; that is, click **YOUR ACCOUNT**, and then click **STOREFRONT**.
+
+   The submenu is displayed, showing a list of commands: **LISTINGS**, **SPECIAL OFFERS**, **SIGN OUT**.
+
+1. In the submenu, right-click above **LISTINGS**, and then select **Inspect**.
+
+   DevTools opens, with the **Elements** tool selected.  The submenu element `<ul id="submenu">` is selected in the DOM tree:
+
+   ![Result of HTML & CSS for the at-position-try at-rule](./reference-images/at-position-try-at-rule-rendered.png)
+
+1. In the **Styles** tab, in the `#submenu` CSS rule, find the `position-try-fallbacks` property, and click its `--bottom` value.
+
+   The **Styles** tab scrolls down to the corresponding `@position-try` section:
+
+   ![The at-position-try section in the Styles tab](./reference-images/position-try-rule-in-styles-tab.png)
+
+1. In the **Styles** tab, in the `#submenu` CSS rule, click the `--submenu` link in any of the following properties:
+
+   ```css
+   position-anchor: --submenu;
+   left: anchor(--submenu right);
+   top: anchor(--submenu top);
+   ```
+
+   The DOM tree selects the element (`<button popovertarget="submenu">`) that has the corresponding `popovertarget` attribute value (`popovertarget="submenu"`), and the **Styles** tab shows the element's CSS:
+
+   ![The button element selected in the DOM tree, and its CSS](./reference-images/at-position-try-popovertarget.png)
+
+To edit a value, double-click the value.
+
+See also:
+* [The @position-try Rule](https://www.w3.org/TR/css-anchor-position-1/#fallback-rule) in _CSS Anchor Positioning Module Level 1_ at w3.org.
+* [Introducing the CSS anchor positioning API](https://developer.chrome.com/blog/anchor-positioning-api)  _todolink: non-Chrome link_
 
 
 <!-- ------------------------------ -->
 #### View an element's box model
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#box-model -->
 
-To view [the box model](https://developer.mozilla.org/docs/Learn/CSS/Introduction_to_CSS/Box_model) of an element, go to the **Styles** pane.  If your DevTools window is narrow, the **Box Model** diagram is at the bottom of the panel.
+To view the box model of an element, go to the **Styles** pane, and scroll down.
 
-To change a value, double-click it.
+To change a value, double-click the value.
 
-In the following figure, the **Box Model** diagram in the **Styles** pane shows the box model for the currently selected `h1` element.
+In the following figure, the **Box Model** diagram in the **Styles** pane shows the box model for the currently selected `h1` element:
 
 ![The Box Model diagram](./reference-images/css-elements-styles-h1-2.png)
 
+See also:
+* [The box model](https://developer.mozilla.org/docs/Learn/CSS/Introduction_to_CSS/Box_model) at MDN.
+
 
 <!-- ------------------------------ -->
 #### Search and filter the CSS of an element
@@ -226,15 +537,55 @@ In the following figure, the **Styles** pane is filtered to only show rules that
 
 ![Filter the Styles panel](./reference-images/css-elements-styles-filter-color.png)
 
-In the following figure, the **Computed** pane is filtered to only show declarations that include the search query `100%`.
+In the following figure, the **Computed** pane is filtered to only show declarations that include the search query `100%`:
 
 ![Filter the Computed panel](./reference-images/css-elements-computed-filter-100.png)
 
 
 <!-- ------------------------------ -->
-<!-- #### Emulate a focused page -->
+#### Emulate a focused page
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#focus -->
 
+If you switch focus from the inspected webpage to DevTools, some overlay elements automatically hide, if they are triggered by focus.  For example:
+* Dropdown lists.
+* Menus.
+* Date pickers.
+
+To debug such an element as if the page has focus, do either of the following:
+* In the **Elements** tool, in the **Styles** tab, click `:hov` (**Toggle Element State**), and then select the **Emulate a focused page** checkbox.
+* In the **Rendering** tool, select the **Emulate a focused page** checkbox.
+
+**Caution:** When this option is on, the `document.visibilityState` is set to `visible` and the `visibilitychange` event doesn't fire.  See [Page Visibility API](https://developer.mozilla.org/docs/Web/API/Page_Visibility_API) at MDN.
+
+To try emulating a focused page:
+
+1. Open the [Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/) demo in a new window or tab.
+
+1. Click the input text box.  Or, press **Tab** to put focus on the input text box.
+
+   Another element appears under the input text box, saying "This message only appears when the text box is focused."
+
+1. Right-click the input text box, and then select **Inspect**.
+
+   DevTools opens, and the message element disappears.  The DevTools window is now in focus, instead of the inspected webpage, so the message element disappears.
+
+1. In the **Elements** tool, in the **Styles** tab, click `:hov` (**Toggle Element State**), and then select the **Emulate a focused page** checkbox.
+
+1. Make sure the input text box element `<input id="textBox" type="text">` is still selected.
+
+   Under the input text box, the message element reappears below the input text box.
+
+   You can now inspect the message element that's below the input text box, even though DevTools, rather than the inspected page, has focus:
+
+   ![The Emulate a focused page checkbox selected](./reference-images/emulate-focused-page.png)
+
+1. Cleanup: In the **Elements** tool, in the **Styles** tab, click `:hov` (**Toggle Element State**), and then clear the **Emulate a focused page** checkbox.
+
+An **Emulate a focused page** checkbox also appears in the **Rendering** tool; see [Rendering tool, to see what a webpage looks like with different display options or vision deficiencies](../rendering-tools/rendering-tool.md).
+
+See also:
+* [Freeze screen & inspect disappearing elements](https://developer.chrome.com/blog/devtools-tips-35), in the Chrome for Developers blog.  _todolink: local link_
+
 
 <!-- ------------------------------ -->
 #### Toggle a pseudo-class
@@ -274,7 +625,6 @@ The **Styles** tab shows the following pseudo-classes for all elements:
 * [`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover)
 * [`:focus-visible`](https://developer.mozilla.org/docs/Web/CSS/:focus-visible)
 
-
 Additionally, some elements might have element-specific pseudo-classes.  When you select such an element, the **Styles** tab shows a **Force specific element state** section that you can expand and turn on pseudo-classes that are specific to the element, such as a **:read-write** checkbox:
 
 ![The `Force specific element state` section of a 'textarea' element](./reference-images/specific-pseudo-classes.png)
@@ -283,14 +633,75 @@ For an interactive tutorial, see [Add a pseudo-state to a class](../css/index.md
 
 
 <!-- ------------------------------ -->
-<!-- #### View inherited highlight pseudo-elements -->
+#### View inherited highlight pseudo-elements
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#view-inherited-highlight-pseudo-elements -->
 
+Pseudo-elements let you style specific parts of elements.  Highlight pseudo-elements are document portions with a "selected" status and they are styled as "highlighted" to indicate this status to the user.
+
+For example, such pseudo-elements are:
+* `::selection`
+* `::spelling-error`
+* `::grammar-error`
+* `::highlight`
+
+When multiple styles conflict, the CSS cascade determines the winning style.  See [Introduction to the CSS cascade](https://developer.mozilla.org/docs/Web/CSS/Guides/Cascade/Introduction) at MDN.
+
+To better understand the inheritance and priority of the rules, view the inherited highlight pseudo-element in the following demo.
+
+To view the inherited highlight pseudo-elements:
+
+1. Go to the [Highlight pseudo-elements](https://microsoftedge.github.io/Demos/highlight-pseudo-elements/) demo in a new window or tab.
+
+1. Select a portion of the text "I inherited the style of my parent's highlight pseudo-element. Select me!"
+
+   The selected text changes to red text on yellow background.
+
+1. Right-click the text "I inherited the style of my parent's highlight pseudo-element. Select me!", and then select **Inspect**.
+
+   DevTools opens.  In the **Elements** tool, in the **Styles** tab, the section is displayed: **Inherited from ::selection pseudo of div.text-parent**:
+
+   ![View the Inherited section in the Styles tab](./reference-images/view-inherited-section.png)
+
+1. In the DOM tree, select the `<div class="text-parent">` element.
+
+   In the **Styles** tab, the section is displayed: **Pseudo ::selection element**:
+
+   ![View the Pseudo section in the Styles tab](./reference-images/view-pseudo-section.png)
+
+See also:
+* [Pseudo-elements](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) at MDN.
+
 
 <!-- ------------------------------ -->
-<!-- #### View cascade layers -->
+#### View cascade layers
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#cascade-layers -->
 
+Cascade layers enable more explicit control of your CSS files, to prevent style-specificity conflicts.  This is useful for:
+* Large codebases.
+* System design.
+* Managing third-party styles.
+
+To view cascade layers:
+
+1. Go to a webpage that uses cascade layers, such as the [Cascade layers](https://microsoftedge.github.io/Demos/cascade-layers/) demo.
+
+1. Right-click the "My styles are layered!" element, and then select **Inspect**.
+
+   DevTools opens.
+
+1. In the **Elements** tool, select the **Styles** tab.
+
+1. In the **Styles** tab, view the three cascade layers and their styles: `page`, `component` and `base`:
+
+   ![Cascade layers](./reference-images/cascade-layers.png)
+
+1. To view the layer order, click the layer name (**page**, **component**, or **base**).  Or, click the ![Toggle CSS Layers view icon](./reference-images/toggle-css-layers-view-icon.png) **Toggle CSS Layers view** button.
+
+   The `page` layer has the highest specificity, therefore the element's background is green.
+
+See also:
+* [Cascade layers are coming to your browser](https://developer.chrome.com/blog/cascade-layers) in the Chrome blog.  _todolink: local link?_
+
 
 <!-- ------------------------------ -->
 #### View a page in print mode
@@ -298,11 +709,25 @@ For an interactive tutorial, see [Add a pseudo-state to a class](../css/index.md
 
 To view a page in print mode:
 
-1. Open the [Command Menu](../command-menu/index.md).
+1. Go to a webpage.
 
-1. Start typing `rendering`, and then select **Show Rendering**.
+1. Right-click the webpage, and then select **Inspect**.
 
-1. Click the **Emulate CSS Media** dropdown list, and then select **print**.
+   DevTools opens.
+
+1. Press **Esc** once or twice, so that the **Quick View** toolbar appears at the bottom of DevTools.
+
+1. On the **Quick View** toolbar, select **More tools** (**+**).
+
+1. Select the **Rendering** tool.
+
+   The **Rendering** tool opens in the **Quick View** panel at the bottom of DevTools.
+
+1. In the **Rendering** tool, click the **Emulate CSS media type** dropdown list, and then select **print**.
+
+   The webpage is rendered as if printing.
+
+1. When finished, in the **Rendering** tool, click the **Emulate CSS media type** dropdown list, and then select **No emulation**.
 
 
 <!-- ------------------------------ -->
@@ -314,11 +739,11 @@ The **Coverage** tool shows you what CSS a page actually uses.
 1. Open the [Command Menu](../command-menu/index.md) by pressing **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS), while DevTools has focus.
 
 1. Start typing `coverage`, and then select **Show Coverage**:
-   
+
    ![Opening the Coverage tool from the Command Menu](./reference-images/css-console-command-menu-coverage.png)
-   
+
    The **Coverage** tool appears:
-   
+
    ![The Coverage tool](./reference-images/css-console-qs-coverage-empty.png)
 
 1. Click **Start instrumenting coverage and refresh the page** (![Start instrumenting coverage and refresh the page](./reference-images/refresh-icon.png)).  The page refreshes and the **Coverage** tool provides an overview of how much CSS (and JavaScript) is used from each file that the browser loads.  Green represents used CSS.  Red represents unused CSS.
@@ -342,9 +767,47 @@ See [Force DevTools into Print Preview mode](../css/print-preview.md).
 
 
 <!-- ====================================================================== -->
-<!-- ## Copy CSS -->
+## Copy CSS
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#copy-css -->
 
+From a single dropdown menu in the **Styles** tab, you can copy separate CSS rules, declarations, properties, or values; see [CSS syntax basics](https://developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#css_syntax_basics) in _What is CSS?_ at MDN.
+
+Additionally, you can copy CSS properties in JavaScript syntax.  This option is handy if you're using CSS-in-JS libraries; see [Style editing for CSS-in-JS frameworks](./css-in-js.md).
+
+To copy CSS:
+
+1. Go to a webpage that uses CSS, such as [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab.
+
+1. Right-click the webpage, and then click **Inspect**.
+
+   DevTools opens, with the **Elements** tool selected.
+
+1. In the DOM tree, select an element, such as `<h1>`.
+
+1. In the **Styles** tab, within a CSS rule, right-click a CSS property, such as `text-align: center`:
+
+   ![Copy CSS dropdown menu](./reference-images/copy-css-dropdown-menu.png)
+
+1. Select a right-click menuitem:
+
+   * **Copy declaration**.  Copies the property and its value in CSS syntax: `property: value;`
+
+   * **Copy property**.  Copies only the `property` name.
+
+   * **Copy value**.  Copies only the `value`.
+
+   * **Copy rule**.  Copies the entire CSS rule: `selector[, selector] { property: value; property: value; ... }`
+
+   * **Copy declaration as JS**.  Copies the property and its value in JavaScript syntax: `propertyInCamelCase: 'value'`
+
+   * **Copy all declarations**.  Copies all properties and their values in the CSS syntax: `property: value; property: value; ...`
+
+   * **Copy all declarations as JS**.  Copies all properties and their values in JavaScript syntax: `propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...`
+
+   * **Copy all CSS changes**.  Copies the changes that you make in the **Styles** tab across all declarations.  See [Copy CSS changes](#copy-css-changes), below.  This menuitem conditionally appears.
+
+   * **View computed value**.  Takes you to the **Computed** tab; see [View only the CSS that's actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element), above.
+
 
 <!-- ====================================================================== -->
 ## Change CSS
@@ -355,6 +818,7 @@ This section lists all the ways you can change CSS in **Elements** > **Styles**.
 Additionally, you can:
 
 * Override CSS across page loads.  See [Override webpage resources with local copies (Overrides tab)](../javascript/overrides.md).
+
 * Save modified CSS to your local sources in a workspace.  See [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md).
 
 
@@ -371,7 +835,7 @@ The order of declarations affects how an element is styled.  You can add declara
 
 Adding a inline declaration is equivalent to adding a `style` attribute to the HTML of an element.  For most scenarios, you probably want to use inline declarations.
 
-Inline declarations have higher specificity than external declarations, so using inline declarations ensures that the changes take effect in your specific, expected element.  For more information about specificity, see [Selector Types](https://developer.mozilla.org/docs/Web/CSS/Specificity#Selector_Types).
+Inline declarations have higher specificity than external declarations, so using inline declarations ensures that the changes take effect in your specific, expected element.  For more information about specificity, see [Selector Types](https://developer.mozilla.org/docs/Web/CSS/Specificity#Selector_Types) in _Specificity_ at MDN.
 
 To add an inline declaration:
 
@@ -423,29 +887,58 @@ To change a numerical value, type in the value, or use the arrow keys, per the n
 
 
 <!-- ------------------------------ -->
-<!-- #### Change enumerable values with keyboard shortcuts -->
+#### Change enumerable values with keyboard shortcuts
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#values-shortcuts -->
 
+To change a numerical value of a CSS declaration, type in the value, or use the arrow keys to increment the value by a specific amount.  While editing an enumerable value of a declaration, for example, `font-size`, you can use the following keyboard shortcuts to increment the value by a fixed amount:
+
+| Key combination | Action |
+|---|---|
+| **Alt+Up Arrow** (Windows, Linux), **Option+UpArrow** (macOS) | Increment by 0.1. |
+| **Up Arrow** | Increment by 1, or by 0.1 if the current value is between -1 and 1. |
+| **Shift+Up Arrow** | Increment by 10. |
+| **Ctrl+Shift+PgUp** (Windows, Linux), **Shift+Command+UpArrow** (macOS) | Increment by 100. |
+
+To decrement, press the **Down Arrow** (or **Page Down**) key instead of the **Up Arrow** (or **Page Up**) key.
+
 
 <!-- ------------------------------ -->
-<!-- #### Change length values -->
+#### Change length values
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#change-length-value -->
 
+You can use your pointer to change any property that has a length value, such as `width`, `height`, `padding`, `margin`, or `border`.
 
-<!-- ------------------------------ -->
-#### Increment numerical declaration values
-<!-- not upstream -->
+To change the length unit:
 
-To change a numerical value of a CSS declaration, type in the value, or use the arrow keys to increment the value by a specific amount:
+1. Open a webpage that uses CSS, such as [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab.
 
-| Keyboard shortcut | Increments by |
-|---|---|
-| **Alt+Up Arrow** (Windows, Linux) or **Option+Up Arrow** (macOS) | 0.1 |
-| **Up Arrow** | 1 (or 0.1, if the current value is between -1 and 1) |
-| **Shift+Up Arrow** | 10 |
-| **Shift+Page Up** (Windows, Linux) or **Shift+Command+Up Arrow** (macOS) | 100 |
+1. Right-click the text **Add a task**, and then select **Inspect**.
 
-To decrement, press the **Down Arrow** (or **Page Down**) key instead of the **Up Arrow** (or **Page Up**) key.
+   DevTools opens, displaying the **Elements** tool.  The `<label>` element is selected in the DOM tree.
+
+1. In the **Styles** tab, in the `.new-task-form` CSS rule, in the `max-width:` property, hover over `50rem`.
+
+   A tooltip appears, showing the equivalent value and units: `800px`.
+
+1. Click the value `50rem`.
+
+   A tooltip appears: "Increment/decrement with mousewheel or up/down keys.  Ctrl: +/-100, Shift: +/-10, Alt: +/-0.1"
+
+1. Move the mousewheel, or press **UpArrow** and **DownArrow** keys, while pressing a key:
+
+   **Ctrl**: Increment by 100.
+   **Shift**: Increment by 10.
+   **Alt**: Increment by 0.1.
+
+   In the inspected webpage, the **Add a task** input text box changes width as you change the value.
+
+1. In the max-width property's value field, make the value `200px` (changing from `rem` units to `px` units).
+
+1. Again move the mousewheel, or press **UpArrow** and **DownArrow** keys, while holding the **Ctrl** (+/-100), **Shift** (+/-10), or **Alt** (+/-0.1) key.
+
+   In the inspected webpage, the **Add a task** input text box changes width as you change the value:
+
+   ![Changing the max-width of the input text box](./reference-images/change-length-values.png)
 
 
 <!-- ------------------------------ -->
@@ -466,7 +959,30 @@ To add a class to an element:
 
 
 <!-- ------------------------------ -->
-<!-- #### Emulate light and dark theme preferences and enable automatic dark mode -->
+#### Emulate light and dark theme preferences and enable automatic dark mode
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#emulate-light-dark-themes -->
+
+To toggle automatic dark mode, or emulate the user's preference of light or dark themes:
+
+1. In the **Elements** tool, in the **Styles** tab, click the **Toggle common rendering emulations** (![Paintbrush icon](./reference-images/toggle-common-rendering-emulations-icon.png)) button in the upper right:
+
+   ![Toggle common rendering emulations](./reference-images/toggle-common-rendering-emulations.png)
+
+1. Select one of the following options from the dropdown list:
+
+   * **prefers-color-scheme: light**.  Indicates that the user prefers the light theme.
+
+   * **prefers-color-scheme: dark**.  Indicates that the user prefers the dark theme.
+
+   * **Automatic dark mode**.  Displays your page in dark mode even if you didn't implement it.  Additionally, sets `prefers-color-scheme` to `dark` automatically.
+
+This dropdown list is a shortcut for **Emulate CSS media feature `prefers-color-scheme`** and **Enable automatic dark mode** options of the **Rendering** tool.
+
+See also:
+* [Emulating dark or light mode using the Rendering tool](../accessibility/preferred-color-scheme-simulation.md#emulating-dark-or-light-mode-using-the-rendering-tool) in _Emulate dark or light schemes in the rendered page_.
+* [Check for contrast issues with dark theme and light theme](../accessibility/test-dark-mode.md)
+* [Auto Dark Theme](https://developer.chrome.com/blog/auto-dark-theme) in Chrome blog.  _todolink: link ok?_
+* [prefers-color-scheme: Hello darkness, my old friend](https://web.dev/articles/prefers-color-scheme) at web.dev.
 
 
 <!-- ------------------------------ -->
@@ -511,18 +1027,20 @@ To instead add the rule in an existing stylesheet:
 
 
 <!-- ---------- -->
-###### Add a style rule to a specific location
-<!-- not upstream - todo: merge w/ above section? -->
+###### Add a style rule to a specific location in a stylesheet
+<!-- not upstream -->
+
+By default, adding a style rule by clicking the **New Style Rule** (![New Style Rule icon](./reference-images/new-style-rule-icon.png)) button inserts the new rule beneath the **element.style** rule in the `inspector-stylesheet` stylesheet.
 
-By default, adding a style rule by clicking on **New Style Rule** inserts the new rule beneath the **element.style** rule in the `inspector-stylesheet` stylesheet.
+To add a style rule in a specific location of a particular stylesheet by starting from the **Styles** pane:
 
-To add a style rule in a specific location of the **Styles** pane instead:
+1. In the **Elements** tool, in the **Styles** tab, hover over the style rule that's directly above where you want to add your new style rule.
 
-1. Hover on the style rule that is directly above where you want to add your new style rule.
+   An **Insert style rule below** (![Insert style rule below icon](./reference-images/insert-style-rule-below-icon.png)) button appears on the right side of the CSS rule.
 
-1. Click **Insert Style Rule Below** (![Insert Style Rule Below icon](./reference-images/new-style-rule-icon.png)).
+1. Click the **Insert style rule below** (![Insert style rule below icon](./reference-images/insert-style-rule-below-icon.png)) button:
 
-![Insert Style Rule Below](./reference-images/css-elements-styles-insert-style-rule-below.png)
+   ![Insert style rule below](./reference-images/css-elements-styles-insert-style-rule-below.png)
 
 
 <!-- ------------------------------ -->
@@ -543,19 +1061,26 @@ To toggle a single declaration on or off:
 
 
 <!-- ------------------------------ -->
-<!-- #### Edit the ::view-transition pseudo-elements during an animation -->
+#### Edit the `::view-transition` pseudo-elements during an animation
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#view-transition -->
 
+See:
+* [Edit the ::view-transition pseudo-elements during an animation](https://developer.chrome.com/docs/devtools/css/animations#view-transition) in _Animations: Inspect and modify CSS animation effects_, in Chrome docs.  _todolink: is there a non-Chrome link instead?_
+* [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions) in Chrome docs.<!-- todo: change to a local link after create article per AB#62591100 -->
+
 
 <!-- ------------------------------ -->
-<!-- #### Align grid items and their content with the Grid Editor -->
+#### Align grid items and their content with the Grid Editor
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#grid-editor -->
 
+See:
+* [Align grid items and their content: the grid editor popup](./grid.md#align-grid-items-and-their-content-the-grid-editor-popup) in _Inspect CSS Grid layouts_.
+
 
 <!-- ------------------------------ -->
 #### Change colors with the Color Picker
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#color-picker -->
-<!-- todo: replace content by a link to https://developer.chrome.com/docs/devtools/css/color -->
+<!-- todo: replace content by equiv of a link to https://developer.chrome.com/docs/devtools/css/color -->
 
 The **Color Picker** provides a user interface for changing `color` and `background-color` declarations.
 
@@ -587,7 +1112,10 @@ The following figure and list describes of each of the UI elements of the **Colo
 | 6 | **Hue** |  |
 | 7 | **Opacity** |  |
 | 8 | **Display Value Switcher** | Toggle between the RGBA, HSLA, and Hex representations of the current color. |
-| 9 | **Color Palette Switcher** | Toggle between the [Material Design palette](https://material.io/guidelines/style/color.html#color-color-palette), a custom palette, or a page colors palette.  DevTools generates the page color palette based on the colors that it finds in your stylesheets. |
+| 9 | **Color Palette Switcher** | Toggle between the Material Design palette, a custom palette, or a page colors palette.  DevTools generates the page color palette based on the colors that it finds in your stylesheets. |
+
+See also:
+* [Color usage and palettes](https://m2.material.io/design/color/the-color-system.html#color-usage-and-palettes) in _The color system_ at material.io: the Material Design palette.
 
 
 <!-- ------------------------------ -->
@@ -658,10 +1186,6 @@ Use the **Shadow Editor** to change the value of the `box-shadow` or `text-shado
    | **Y offset** | Specify a value in the text box, or drag the blue dot. |
    | **Blur** | Specify a value in the text box, or drag the slider. |
    | **Spread** | Specify a value in the text box, or drag the slider.  Only for `box-shadow`. |
-   <!-- todo: explain the meaning of each property, not only how to change the value.  change column heading to:
-   | Property | Description |
-   | Property | Description and how to change |
-   -->
 
    The changes are applied to the element in the rendered webpage in real time:
 
@@ -672,55 +1196,180 @@ Use the **Shadow Editor** to change the value of the `box-shadow` or `text-shado
 #### Edit animation and transition timings with the Easing Editor
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#edit-easing -->
 
-Use the **Easing Editor** to change the value of the [animation-timing-function](https://developer.mozilla.org/docs/Web/CSS/animation-timing-function) or [transition-timing-function](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function) property on an HTML element:
+Use the **Easing Editor** to change the value of the [animation-timing-function](https://developer.mozilla.org/docs/Web/CSS/animation-timing-function) or [transition-timing-function](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function) property on an HTML element.
+
+To open the **Easing Editor**:
+
+1. In DevTools, in the **Elements** tool, in the DOM tree, select an element that has a CSS animation or transition applied.
 
-1. [Select an element](#select-an-element) that has a CSS animation or transition applied.
+   For example, open the [animated property demo page](https://microsoftedge.github.io/Demos/devtools-animated-property-issue/) in a new tab or window, right-click the green box that contains an animation, and then select **Inspect**.
 
-   For example, open the [animated property demo page](https://microsoftedge.github.io/Demos/devtools-animated-property-issue/) in a new tab or window, right-click the page and select **Inspect** to open DevTools, and then in the **Elements** tool, press **Ctrl+F** and find "spinner", and then select the `<div class="spinner">` element.
+   DevTools opens, displaying the **Elements** tool.
 
-   The red and green boxes on this demo page are two different CSS animations. Both animations run with CSS by using the `animation` CSS property, and define an `ease-in-out` timing function.
+1. Press **Ctrl+F** and find "spinner", and then select the `<div class="spinner">` element that's inside `<div class="animation-demo good">`.
 
-1. In the **Styles** pane, find the `animation` declaration in the `.bad .spinner` CSS rule, and click the **Open cubic bezier editor** (![The cubic bezier editor button icon](./reference-images/easing-editor-icon.png)) button.
+   The red (bad) and green (good) boxes on this demo page are two different CSS animations.  Both animations run with CSS by using the `animation` CSS property, and define an `ease-in-out` timing function.
+
+1. In the **Styles** tab, in the `.good .spinner` CSS rule, in the `animation` declaration, to the left of `ease-in-out`, click the **Open cubic bezier editor** (![Cubic bezier editor icon](./reference-images/easing-editor-icon.png)) button.
 
    The **Easing Editor** opens:
 
    ![The Easing Editor](./reference-images/easing-editor.png)
 
-1. Change the properties of the animation timing function:
 
-   * Choose one of the pre-defined timing functions from the list.
-   * Create your own timing function by dragging the cubic-bezier curve handles.
+<!-- ---------- -->
+###### Use presets to adjust timings
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#presets -->
 
-   The changes are applied to the element in the rendered webpage in real time:
+To adjust timings by a simple mouse-click, use the presets in the **Easing Editor**:
 
-   ![The effect of changes made in the Easing Editor](./reference-images/easing-editor-changes.png)
+1. Open the Easing Editor, as described in [Edit animation and transition timings with the Easing Editor](#edit-animation-and-transition-timings-with-the-easing-editor), above.
 
+1. Click one of the four picker buttons:
 
-<!-- ------------------------------ -->
-<!-- #### Use presets to adjust timings -->
-<!-- https://developer.chrome.com/docs/devtools/css/reference/#presets -->
+   | Button | Function type | CSS keyword |
+   |---|---|---|
+   | ![Linear easing functions](./reference-images/easing-function-linear.png) | Linear functions | `linear` |
+   | ![Ease-in-out easing functions](./reference-images/easing-function-ease-in-out.png) | Ease-in-out functions | `ease-in-out` |
+   | ![Ease-in easing functions](./reference-images/easing-function-ease-in.png) | Ease-in functions | `ease-in` |
+   | ![Ease-out easing functions](./reference-images/easing-function-ease-out.png) | Ease-out functions | `ease-out` |
 
+   Selecting a button sets a keyword value in the CSS rule (which varies if you select a variant preset in the next step), and the **Presets switcher** opens at the bottom of the **Easing Editor**.
 
-<!-- ------------------------------ -->
-<!-- #### Configure custom timings -->
+1. In the **Presets switcher**, click the **Left** **`<`** or **Right** **`>`** buttons to pick one of the following presets:
+
+   * Linear presets: `elastic`, `bounce`, or `emphasized`.
+
+   * Cubic Bezier presets:
+
+   | Timing keyword | Preset | Cubic Bezier |
+   |---|---|---|
+   | ease-in-out | In Out, Sine | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` |
+   | ease-in-out | In Out, Quadratic | `cubic-bezier(0.46, 0.03, 0.52, 0.96)` |
+   | ease-in-out | In Out, Cubic | `cubic-bezier(0.65, 0.05, 0.36, 1)` |
+   | ease-in-out | Fast Out, Slow In | `cubic-bezier(0.4, 0, 0.2, 1)` |
+   | ease-in-out | In Out, Back | `cubic-bezier(0.68, -0.55, 0.27, 1.55)` |
+
+   | Timing keyword | Preset | Cubic Bezier |
+   |---|---|---|
+   | ease-in | In, Sine | `cubic-bezier(0.47, 0, 0.75, 0.72)` |
+   | ease-in | In, Quadratic | `cubic-bezier(0.55, 0.09, 0.68, 0.53)` |
+   | ease-in | In, Cubic | `cubic-bezier(0.55, 0.06, 0.68, 0.19)` |
+   | ease-in | In, Back | `cubic-bezier(0.6, -0.28, 0.74, 0.05)` |
+   | ease-in | Fast Out, Linear In | `cubic-bezier(0.4, 0, 1, 1)` |
+
+   | Timing keyword | Preset | Cubic Bezier |
+   |---|---|---|
+   | ease-out | Out, Sine | `cubic-bezier(0.39, 0.58, 0.57, 1)` |
+   | ease-out | Out, Quadratic | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
+   | ease-out | Out, Cubic | `cubic-bezier(0.22, 0.61, 0.36, 1)` |
+   | ease-out | Linear Out, Slow In | `cubic-bezier(0, 0, 0.2, 1)` |
+   | ease-out | Out, Back | `cubic-bezier(0.18, 0.89, 0.32, 1.28)` |
+   
+See also:
+* [Bézier curve](https://developer.mozilla.org/docs/Glossary/Bezier_curve) at MDN.
+
+
+<!-- ---------- -->
+###### Configure custom timings
 <!-- https://developer.chrome.com/docs/devtools/css/reference/#custom-timings -->
 
+To set custom values for timing functions, use the control points on the lines:
 
-<!-- ====================================================================== -->
-<!-- ## (Experimental) Copy CSS changes -->
-<!-- https://developer.chrome.com/docs/devtools/css/reference/#copy-css-changes -->
+* For linear functions, click anywhere on the line to add a control point and drag it.  To remove a control point, double-click it.
+
+   ![Dragging a control point of a linear function](./reference-images/dragging-control-point.png)
+
+* For Cubic Bezier functions, drag one of the control points:
+
+   ![Dragging the control points of a Cubic Bezier function](./reference-images/dragging-control-points.png)
+
+Any change triggers a ball animation in the **Preview** at the top of the **Easing Editor**.
 
 
 <!-- ====================================================================== -->
 ## See also
-
-Demos repo:
+<!-- all links in article -->
+
+<!-- Local: -->
+* [Get started viewing and changing CSS](../css/index.md).
+* [View the CSS for an element](../css/index.md#view-the-css-for-an-element).
+* [Reformat a minified JavaScript file with pretty-print](../javascript/reference.md#reformat-a-minified-javascript-file-with-pretty-print) in _JavaScript debugging features_.
+* [Rendering tool, to see what a webpage looks like with different display options or vision deficiencies](../rendering-tools/rendering-tool.md).
+* [Add a pseudo-state to a class](../css/index.md#add-a-pseudostate-to-a-class).
+* [Command Menu](../command-menu/index.md)
+* [Force DevTools into Print Preview mode](../css/print-preview.md).
+* [Override webpage resources with local copies (Overrides tab)](../javascript/overrides.md).
+* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md).
+* [Emulating dark or light mode using the Rendering tool](../accessibility/preferred-color-scheme-simulation.md#emulating-dark-or-light-mode-using-the-rendering-tool) in _Emulate dark or light schemes in the rendered page_.
+* [Check for contrast issues with dark theme and light theme](../accessibility/test-dark-mode.md)
+* [Align grid items and their content: the grid editor popup](./grid.md#align-grid-items-and-their-content-the-grid-editor-popup) in _Inspect CSS Grid layouts_.
+* [Test text-color contrast using the Color Picker](../accessibility/color-picker.md)
+* [Styles pane keyboard shortcuts](../shortcuts/index.md#styles-pane-keyboard-shortcuts).
+<!-- todo: after https://github.com/MicrosoftDocs/edge-developer/pull/3814 is merged, un-comment link
+* [Understand CSS in the Styles pane](https://learn.microsoft.com/microsoft-edge/devtools/css/issues#understand-css-in-the-styles-pane) in _Find invalid, overridden, inactive, and other CSS_.
+-->
+<!-- todo: after https://github.com/MicrosoftDocs/edge-developer/pull/3814 is merged, un-comment link
+* [Understand CSS in the Computed pane](https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/css/issues?branch=pr-en-us-3814#understand-css-in-the-computed-pane) in _Find invalid, overridden, inactive, and other CSS_.
+-->
+
+Demos:
 * [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/)
-   * [/demo-to-do/](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do/) - Readme and source code.
-* [1DIV](https://microsoftedge.github.io/Demos/1DIV/dist/) - Window Controls Overlay demo.
-   * [/1DIV/](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/) - Readme and source code.
-* [Animated CSS Property demo](https://microsoftedge.github.io/Demos/devtools-animated-property-issue/)
-   * [/devtools-animated-property-issue/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-animated-property-issue/) - Readme and source code.
+* [View `@property` at-rules](https://microsoftedge.github.io/Demos/at-rules-property/)
+* [View `@supports` at-rules](https://microsoftedge.github.io/Demos/at-rules-supports/)
+* [View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-scope/)
+* [View `@font-palette-values` at-rules](https://microsoftedge.github.io/Demos/at-rules-font-palette-values/)
+* [View `@position-try` at-rules](https://microsoftedge.github.io/Demos/at-rules-position-try/)
+* [Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/)
+* [Highlight pseudo-elements](https://microsoftedge.github.io/Demos/highlight-pseudo-elements/)
+* [Cascade layers](https://microsoftedge.github.io/Demos/cascade-layers/)
+* [1DIV](https://microsoftedge.github.io/Demos/1DIV/dist/)
+* [Animated property demo page](https://microsoftedge.github.io/Demos/devtools-animated-property-issue/)
+
+MDN:
+* [Using CSS custom properties (variables)](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties)
+* [`padding` CSS property](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/padding)
+* [Specificity](https://developer.mozilla.org/docs/Web/CSS/Specificity)
+* [Custom properties (`--*`): CSS variables](https://developer.mozilla.org/docs/Web/CSS/--*)
+   * [Custom properties (`--*`): CSS variables](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/--*)
+* [`@scope` CSS at-rule](https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@scope)
+* [@font-palette-values CSS at-rule](https://developer.mozilla.org/docs/Web/CSS/@font-palette-values)
+* [The box model](https://developer.mozilla.org/docs/Learn/CSS/Introduction_to_CSS/Box_model)
+* [Page Visibility API](https://developer.mozilla.org/docs/Web/API/Page_Visibility_API)
+* [`:active`](https://developer.mozilla.org/docs/Web/CSS/:active)
+* [`:focus`](https://developer.mozilla.org/docs/Web/CSS/:focus)
+* [`:focus-within`](https://developer.mozilla.org/docs/Web/CSS/:focus-within)
+* [`:target`](https://developer.mozilla.org/docs/Web/CSS/:target)
+* [`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover)
+* [`:focus-visible`](https://developer.mozilla.org/docs/Web/CSS/:focus-visible)
+* [Introduction to the CSS cascade](https://developer.mozilla.org/docs/Web/CSS/Guides/Cascade/Introduction)
+* [Pseudo-elements](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements)
+* [CSS syntax basics](https://developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#css_syntax_basics) in _What is CSS?_
+* [Selector Types](https://developer.mozilla.org/docs/Web/CSS/Specificity#Selector_Types) in _Specificity_.
+* [animation-timing-function](https://developer.mozilla.org/docs/Web/CSS/animation-timing-function)
+* [transition-timing-function](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function)
+* [Bézier curve](https://developer.mozilla.org/docs/Glossary/Bezier_curve)
+
+GitHub:
+* [VS Code Custom Data](https://github.com/microsoft/vscode-custom-data) - the "microsoft / vscode-custom-data" repo.
+
+Web.dev:
+* [@property: giving superpowers to CSS variables](https://web.dev/articles/at-property)
+* [prefers-color-scheme: Hello darkness, my old friend](https://web.dev/articles/prefers-color-scheme)
+
+W3C:
+* [The @position-try Rule](https://www.w3.org/TR/css-anchor-position-1/#fallback-rule) in _CSS Anchor Positioning Module Level 1_ at w3.org.
+
+Chrome docs:
+* [Introducing the CSS anchor positioning API](https://developer.chrome.com/blog/anchor-positioning-api)  _todolink: non-Chrome link_
+* [Freeze screen & inspect disappearing elements](https://developer.chrome.com/blog/devtools-tips-35), in the Chrome for Developers blog.  _todolink: local link_
+* [Cascade layers are coming to your browser](https://developer.chrome.com/blog/cascade-layers) in the Chrome blog.  _todolink: local link?_
+* [Auto Dark Theme](https://developer.chrome.com/blog/auto-dark-theme) in Chrome blog.  _todolink: link ok?_
+* [Edit the ::view-transition pseudo-elements during an animation](https://developer.chrome.com/docs/devtools/css/animations#view-transition) in _Animations: Inspect and modify CSS animation effects_, in Chrome docs.  _todolink: is there a non-Chrome link instead?_
+* [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions) in Chrome docs.<!-- todo: change to a local link after create article per AB#62591100 -->
+
+material.io:
+* [Color usage and palettes](https://m2.material.io/design/color/the-color-system.html#color-usage-and-palettes) in _The color system_: the Material Design palette.
 
 
 <!-- ====================================================================== -->
diff --git a/microsoft-edge/devtools/customize/extensions.md b/microsoft-edge/devtools/customize/extensions.md
index bf2c96963a..2451fb578f 100644
--- a/microsoft-edge/devtools/customize/extensions.md
+++ b/microsoft-edge/devtools/customize/extensions.md
@@ -36,7 +36,7 @@ To install a Microsoft Edge extension that extends DevTools:
 
 1. Click the **Add extension** button.  A dialog indicates that the extension has been installed, and the Extensions (![Extensions icon](./extensions-images/extensions-icon.png)) button now lists the extension.
 
-1. Open a new tab or window, and then go to a page that contains content that's relevant for the DevTools extension.  For example, use the [TodoMVC React example page](https://todomvc.com/examples/react/dist/), or go to a live [Microsoft Edge Demos repo](https://github.com/MicrosoftEdge/Demos#demos) page, such as [demo-to-do](https://microsoftedge.github.io/Demos/demo-to-do/).
+1. Open a new tab or window, and then go to a page that contains content that's relevant for the DevTools extension.  For example, use the [TodoMVC React example page](https://todomvc.com/examples/react/dist/), or go to a live page in the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo, such as [demo-to-do](https://microsoftedge.github.io/Demos/demo-to-do/).
 
 1. Open DevTools, such as by pressing **F12**.  In the case of this React extension, two new tabs are opened in the **Activity Bar**: **Components** and **Profiler**:
 
diff --git a/microsoft-edge/devtools/dom/index.md b/microsoft-edge/devtools/dom/index.md
index 88b90f9242..ebe2279e7a 100644
--- a/microsoft-edge/devtools/dom/index.md
+++ b/microsoft-edge/devtools/dom/index.md
@@ -40,7 +40,7 @@ When you are interested in a particular DOM node, **Inspect** is a fast way to o
 
 1. Open the [DOM Examples](https://microsoftedge.github.io/Demos/devtools-dom-get-started/) demo page in a new window or tab.  (To open a link in a new window or tab, right-click the link.  Or, press and hold **Ctrl** (Windows, Linux) or **Command** (macOS) and then click the link.)
 
-<!-- You can view the source files for the DOM Examples demo in the [MicrosoftEdge/Demos > devtools-dom-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) repo folder. -->
+<!-- You can view the source files for the DOM Examples demo in the [MicrosoftEdge / Demos > devtools-dom-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) repo folder. -->
 
 1. In the rendered webpage, under **Inspect a Node**, right-click **Michelangelo** and then select **Inspect**:
 
diff --git a/microsoft-edge/devtools/javascript/index.md b/microsoft-edge/devtools/javascript/index.md
index f9861c2181..53e5de068e 100644
--- a/microsoft-edge/devtools/javascript/index.md
+++ b/microsoft-edge/devtools/javascript/index.md
@@ -35,7 +35,7 @@ The first step in debugging is to find a sequence of actions that consistently r
 
    Tip: Open Microsoft Edge in InPrivate Mode, to ensure that Microsoft Edge runs in a clean state. For more information, see [Browse InPrivate in Microsoft Edge](https://support.microsoft.com/microsoft-edge/browse-inprivate-in-microsoft-edge-cd2c9a48-0bc4-b98e-5e46-ac40c84e27e2)
 
-   <!-- You can view the source files for the Debugging demo at the [MicrosoftEdge/Demos > devtools-js-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) repo folder. -->
+   <!-- You can view the source files for the Debugging demo at the [MicrosoftEdge / Demos > devtools-js-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) repo folder. -->
 
 1. Enter **5** in the **Number 1** text box.
 
diff --git a/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md b/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md
index 123e60f8ef..a98b01218c 100644
--- a/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md
+++ b/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md
@@ -124,7 +124,7 @@ Be sure to unmount components.  For long-running apps, small memory leaks of onl
 
 * [Tools for investigating detached elements](./index.md#tools-for-investigating-detached-elements) in _Fix memory problems_.
 * [Detached Elements demo webpage](https://microsoftedge.github.io/Demos/detached-elements/)
-   * [MicrosoftEdge/Demos > detached-elements](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) repo folder - source code.<!-- link not in article -->
+   * [MicrosoftEdge / Demos > detached-elements](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) repo folder - source code.<!-- link not in article -->
 
 <!-- possibly uncomment after PR https://github.com/MicrosoftDocs/edge-developer/pull/3290 is merged
 * [Detached Elements profiling type in Memory tool](../whats-new/2024/10/devtools-130.md#detached-elements-profiling-type-in-memory-tool) in _What's new in DevTools (Microsoft Edge 130)_.
diff --git a/microsoft-edge/devtools/memory-problems/heap-snapshots.md b/microsoft-edge/devtools/memory-problems/heap-snapshots.md
index ecb8ec9096..e3ae814bcb 100644
--- a/microsoft-edge/devtools/memory-problems/heap-snapshots.md
+++ b/microsoft-edge/devtools/memory-problems/heap-snapshots.md
@@ -32,7 +32,7 @@ Use the heap profiler in the **Memory** tool to do the following:
 
 The DevTools heap profiler shows the memory distribution used by the JavaScript objects and by related DOM nodes on the rendered webpage.
 
-<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge/Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder.
+<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge / Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder.
 
 This article uses demo webpages sourced at https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot -
 *  [Example 3: Scattered objects](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-03.html)
@@ -313,7 +313,7 @@ At this point, the `<div id="tree">` element can be garbage-collected. Both `tre
 
 To understand where DOM nodes might leak, and how to detect such leakage, open the example webpage [Example 6: Leaking DOM nodes](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-06.html) in a new window or tab.
 
-<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge/Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder. -->
+<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge / Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder. -->
 
 
 <!-- ------------------------------ -->
@@ -327,7 +327,7 @@ Open the example webpage [Example 8: Recording heap allocations](https://microso
 
 To see why a DOM leak might be bigger than expected, open the example webpage [Example 9: DOM leaks bigger than expected](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-09.html) in a new window or tab.
 
-<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge/Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder. -->
+<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge / Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder. -->
 
 <!-- Example: Try this **demo** to play with detached DOM trees. -->
 
diff --git a/microsoft-edge/devtools/network/index.md b/microsoft-edge/devtools/network/index.md
index 4460f41af5..042aea07fb 100644
--- a/microsoft-edge/devtools/network/index.md
+++ b/microsoft-edge/devtools/network/index.md
@@ -67,7 +67,7 @@ To get the most out of this tutorial, open the demo and try out the features on
 
    ![The demo](./index-images/demo-page.png)
 
-   <!-- You can view the source files for this demo in the [MicrosoftEdge/Demos > devtools-css-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) repo folder: -->
+   <!-- You can view the source files for this demo in the [MicrosoftEdge / Demos > devtools-css-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) repo folder: -->
 
    <!--
    ![The demo in one window and this tutorial in a different window](../media/network-tutorial/windows.png)
diff --git a/microsoft-edge/devtools/performance/extension.md b/microsoft-edge/devtools/performance/extension.md
index 7344416a8c..2b8ac7d2f9 100644
--- a/microsoft-edge/devtools/performance/extension.md
+++ b/microsoft-edge/devtools/performance/extension.md
@@ -225,7 +225,7 @@ To record a profile and view the custom performance data of the Photo Gallery de
 1. Open the [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) demo webpage in a new window or tab.
 
    Or, to be able to modify the sample code:
-   1. Clone the "MicrosoftEdge / Demos" repo, per [Clone the Edge Demos repo to your drive](../samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
+   1. Clone the Demos repo, per [Clone the "MicrosoftEdge / Demos" repo to your drive](../samples/index.md#clone-the-microsoftedge--demos-repo-to-your-drive) in _Sample code for DevTools_.
    1. Start a localhost server in the cloned `/demos/` directory, per [Start the localhost server](../samples/index.md#start-the-localhost-server), in _Sample code for DevTools_.
    1. In the browser, go to `http://localhost:8080/photo-gallery/` or equivalent, in a new window or tab.
 
diff --git a/microsoft-edge/devtools/quick-source/quick-source-tool.md b/microsoft-edge/devtools/quick-source/quick-source-tool.md
index c7106f3bbb..b39bd55807 100644
--- a/microsoft-edge/devtools/quick-source/quick-source-tool.md
+++ b/microsoft-edge/devtools/quick-source/quick-source-tool.md
@@ -62,7 +62,7 @@ For example, if not done already, clone the **MicrosoftEdge / Demos** repo to yo
 
 1. If not done already, install an up-to-date version of Node.js and npm from [Node.js](https://nodejs.org).
 
-1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab.
+1. Go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo in a new window or tab.
 
 1. Click the **Code** drop-down button.
 
@@ -87,7 +87,7 @@ For example, if not done already, clone the **MicrosoftEdge / Demos** repo to yo
    ```
 
    For details about cloning a repo, see:
-   * [Clone the Edge Demos repo to your drive](../samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
+   * [Clone the "MicrosoftEdge / Demos" repo to your drive](../samples/index.md#clone-the-microsoftedge--demos-repo-to-your-drive) in _Sample code for DevTools_.
    * [Clone the WebView2Samples repo](../../webview2/how-to/machine-setup.md#clone-the-webview2samples-repo) in _Set up your Dev environment for WebView2_.  Shows a different sample repo, but shows steps for several tools.
    * [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) - GitHub docs.
 
diff --git a/microsoft-edge/devtools/samples/index.md b/microsoft-edge/devtools/samples/index.md
index bf49a4605a..9ed5ac2e74 100644
--- a/microsoft-edge/devtools/samples/index.md
+++ b/microsoft-edge/devtools/samples/index.md
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 07/17/2025
+ms.date: 05/22/2026
 ---
 # Sample code for DevTools
 
@@ -24,50 +24,11 @@ To view the source code for a rendered demo webpage in DevTools in Microsoft Edg
 
 <!-- ====================================================================== -->
 ## List of DevTools samples
-<!-- 
-sync:
-https://learn.microsoft.com/microsoft-edge/devtools/sample-code/sample-code#list-of-devtools-samples
-https://github.com/MicrosoftEdge/Demos#readme
-sync'd Jul. 30, 2025
--->
-
-The following demos demonstrate DevTools features.
-
-| 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)](../../visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md) 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](../landing/index.yml). | [/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)](../memory-problems/dom-leaks-memory-tool-detached-elements.md). | [/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](../3d-view/index.md). | [/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](../accessibility/reference.md). | [/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](../css/reference.md#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](../console/index.md), [Log messages in the Console tool](../console/console-log.md), and [Fix JavaScript errors reported in the Console](../console/console-debug-javascript.md). | [/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](../console/console-dom-interaction.md). | [/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](../crash-analyzer/index.md#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](../css/index.md). | [/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](../dom/index.md). | [/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 tool | Used for [Analyze pages using the Inspect tool](../css/inspect.md). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect tool demo](https://microsoftedge.github.io/Demos/devtools-inspect/) |
-| Inspect CSS Grid | Used for [Inspect CSS Grid layouts](../css/grid.md). | [/devtools-grid/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-grid) | [Inspect CSS Grid layouts](https://microsoftedge.github.io/Demos/devtools-grid/) demo |
-| Debugging JavaScript that adds two numbers | Used for [Get started debugging JavaScript](../javascript/index.md). | [/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)](../memory-problems/heap-snapshots.md). | [/devtools-memory-heap-snapshot/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | n/a |
-| **Performance** tool Activity Tabs | Used for [View activities in a table](../performance/reference.md#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)](../performance/index.md). | [/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](../performance/reference.md#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](../whats-new/2021/01/devtools.md#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/) |
-| 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](../whats-new/2023/01/devtools-109.md#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 |
-| JSON dummy data | Simple JSON files.  Used for [View a JSON file or server response with formatting](../../web-platform/json-viewer.md). | [/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](../network/index.md). | [/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Inspect Network Activity demo](https://microsoftedge.github.io/Demos/network-tutorial/) |
-| Network tool reference | Used for [Network features reference](../network/reference.md). | [/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/) |
-| Photo gallery | Used for [View your custom data in the performance profile](../performance/extension.md#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](../whats-new/2024/01/devtools-121.md#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](../speed/get-started.md). | [/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)](../workspaces/index.md). | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces demo](https://microsoftedge.github.io/Demos/workspaces/) |
-| Idle detection | Used for [Emulate idle detector state](../sensors/index.md#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/) |
-
-A few of these samples are shown below.
+
+See:
+* [Microsoft Edge DevTools](https://github.com/MicrosoftEdge/Demos/blob/main/README.md#microsoft-edge-devtools) in the Readme for the "MicrosoftEdge / Demos" repo.
+
+Some of the samples are shown below.
 
 
 <!-- ====================================================================== -->
@@ -111,7 +72,7 @@ These articles walk you through using this demo webpage:
 
 This is the source code repo and its directory which stores the files for this demo webpage:
 
-* [MicrosoftEdge/Demos > devtools-a11y-testing](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-a11y-testing) - Contains files including:
+* [MicrosoftEdge / Demos > devtools-a11y-testing](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-a11y-testing) - Contains files including:
 
    * `index.html` - The demo webpage, including page sections and input forms that send data to the `buttons.js` JavaScript file.  To view the rendered webpage, use the demo webpage link above.
 
@@ -151,7 +112,7 @@ These articles or article sections walk you through using this demo webpage:
 
 This is the source code repo and its directory which stores the files for this demo webpage:
 
-* [MicrosoftEdge/Demos > devtools-js-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) - Contains the files:
+* [MicrosoftEdge / Demos > devtools-js-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) - Contains the files:
 
    *  `README.md` - Contains links to the rendered demo webpage and the in-depth tutorial article about using the demo webpage.
 
@@ -161,7 +122,7 @@ This is the source code repo and its directory which stores the files for this d
 
 
 <!-- ====================================================================== -->
-## Clone the Edge Demos repo to your drive
+## Clone the "MicrosoftEdge / Demos" repo to your drive
 
 The **Microsoft Edge / Demos** repo is useful for following the various DevTools documentation.  You can clone the repo, start a localhost web server within a folder of the cloned repo, and then edit the demo files directly within DevTools, or within an editor such as VS Code.
 
@@ -173,7 +134,7 @@ To clone the **MicrosoftEdge / Demos** repo to your local drive:
 
 1. If not done already, [Download git](https://git-scm.com/downloads) and install it.
 
-1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab.
+1. Go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo in a new window or tab.
 
 1. Click the **Code** drop-down button, and then click the **Copy url to clipboard** button.
 
@@ -199,11 +160,11 @@ Continue with the next section.
 
 
 <!-- ------------------------------ -->
-#### Clone the Edge Demos repo to your drive by using VS Code
+#### Clone the "MicrosoftEdge / Demos" repo to your drive by using VS Code
 
 To clone the **MicrosoftEdge / Demos** repo to your local drive:
 
-1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab.
+1. Go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo in a new window or tab.
 
 1. Click the **Code** dropdown button, and then click **Open with Visual Studio** if it appears.  A list of **Handler Selector** items is offered, one per Visual Studio instance installed.  This option appears only if you're logged in.
 
@@ -275,7 +236,7 @@ See also:
 <!-- ====================================================================== -->
 ## Open a demo folder from the Workspace tab in the Sources tool
 
-To use this section, first do [Clone the Edge Demos repo to your drive](#clone-the-edge-demos-repo-to-your-drive), above.
+To use this section, first do the steps in [Clone the "MicrosoftEdge / Demos" repo to your drive](#clone-the-microsoftedge--demos-repo-to-your-drive), above.
 
 See also:
 * [Workspace tutorial (Sources tool Workspace tab)](../workspaces/workspace-tutorial.md)
diff --git a/microsoft-edge/devtools/sources/index.md b/microsoft-edge/devtools/sources/index.md
index 80cd994b6b..3c09a181f2 100644
--- a/microsoft-edge/devtools/sources/index.md
+++ b/microsoft-edge/devtools/sources/index.md
@@ -572,7 +572,7 @@ To use a debugger on a webpage, you typically set a breakpoint and then send a f
 
 1. Open the [Debugging JavaScript with Microsoft Edge DevTools](https://microsoftedge.github.io/Demos/devtools-js-get-started/) webpage in a new window or tab.
 
-   <!-- You can view the source code for the demo page at the [MicrosoftEdge/Demos > devtools-js-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) repo folder. -->
+   <!-- You can view the source code for the demo page at the [MicrosoftEdge / Demos > devtools-js-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) repo folder. -->
 
 1. Right-click anywhere in the webpage, and then select **Inspect**.  Or, press **F12**.  The **DevTools** window opens, next to the demo webpage.
 
diff --git a/microsoft-edge/devtools/speed/get-started.md b/microsoft-edge/devtools/speed/get-started.md
index 7c7f70d9e1..ac85bdbd20 100644
--- a/microsoft-edge/devtools/speed/get-started.md
+++ b/microsoft-edge/devtools/speed/get-started.md
@@ -55,7 +55,7 @@ The source files for the website are at [MicrosoftEdge / Demos > travel-site](ht
 
 First, set up the website locally, so that you can make changes to it later:
 
-1. Get the website's source code locally: [Clone the Edge Demos repo to your drive](../samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
+1. Get the website's source code locally: [Clone the "MicrosoftEdge / Demos" repo to your drive](../samples/index.md#clone-the-microsoftedge--demos-repo-to-your-drive) in _Sample code for DevTools_.
 
 1. Open the folder you just downloaded or cloned in Visual Studio Code.
 
diff --git a/microsoft-edge/devtools/workspaces/workspace-tutorial.md b/microsoft-edge/devtools/workspaces/workspace-tutorial.md
index ba0e40778e..5ab5e4a2b0 100644
--- a/microsoft-edge/devtools/workspaces/workspace-tutorial.md
+++ b/microsoft-edge/devtools/workspaces/workspace-tutorial.md
@@ -39,7 +39,7 @@ Clone the **MicrosoftEdge / Demos** repo to your local drive, including the `/wo
 
 1. If not done already, [Download git](https://git-scm.com/downloads) and install it.
 
-1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab.
+1. Go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo in a new window or tab.
 
 1. Click the **Code** drop-down button, and then click the **Copy url to clipboard** button.
 
diff --git a/microsoft-edge/extensions/samples/index.md b/microsoft-edge/extensions/samples/index.md
index 36e5b8d771..aafeee1590 100644
--- a/microsoft-edge/extensions/samples/index.md
+++ b/microsoft-edge/extensions/samples/index.md
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: extensions
-ms.date: 07/03/2025
+ms.date: 05/22/2026
 ---
 # Samples for Microsoft Edge extensions
 
@@ -14,37 +14,18 @@ Use the extensions demos to learn how to develop extensions for Microsoft Edge.
 
 
 <!-- ====================================================================== -->
-## MicrosoftEdge-Extensions repo
-<!-- sync:
-https://learn.microsoft.com/microsoft-edge/extensions/samples#microsoftedge-extensions-repo
-https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/README.md#code
-sync'd Jul. 30, 2025
--->
+## Samples in the "microsoft / MicrosoftEdge-Extensions" repo
 
-| Demo name | Description | Source code & Readme | Docs |
-|---|---|---|---|
-| Picture viewer pop-up webpage | A browser extension, without JavaScript, that displays the `stars.jpeg` image in a small webpage in a pop-up in any Microsoft Edge tab. | [/picture-viewer-popup-webpage/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension-samples/picture-viewer-popup-webpage) | [Sample: Picture viewer pop-up webpage](../samples/picture-viewer-popup-webpage.md) |
-| Picture inserter using content script | Uses JavaScript code to insert the `stars.jpeg` image at the top of the current webpage, inside the `<body>` element. | [/picture-inserter-content-script/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension-samples/picture-inserter-content-script) | [Sample: Picture inserter using content script](../samples/picture-inserter-content-script.md) |
+See [Code](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/README.md#code) in the Readme for the "microsoft / MicrosoftEdge-Extensions" repo.
 
 
 <!-- ====================================================================== -->
-## MicrosoftEdge/Demos repo
-<!-- sync:
-https://learn.microsoft.com/microsoft-edge/extensions/samples#microsoftedgedemos-repo
-https://github.com/MicrosoftEdge/Demos/blob/main/README.md#microsoft-edge-extensions
-sync'd Jul. 30, 2025
--->
-
-| Demo name | Description | Source code & Readme | Docs |
-|---|---|---|---|
-| DevTools extension | Includes the following demos. | [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension) | [Create a DevTools extension, adding a custom tool tab and panel](../developer-guide/devtools-extension.md) |
-| Basic | A basic DevTools extension. | [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) in **MicrosoftEdge / Demos** repo | [Step 1: Create a basic Microsoft Edge extension that has a DevTools webpage](../developer-guide/devtools-extension.md#step-1-create-a-basic-microsoft-edge-extension-that-has-a-devtools-webpage) in _Create a DevTools extension, adding a custom tool tab and panel_. |
-| Panel | A basic DevTools extension with a panel. | [/devtools-extension/sample 2/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%202) in **MicrosoftEdge / Demos** repo | [Step 2: Add a custom tool in DevTools](../developer-guide/devtools-extension.md#step-2-add-a-custom-tool-in-devtools) in _Create a DevTools extension, adding a custom tool tab and panel_. |
-| 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) in **MicrosoftEdge / Demos** repo | [Step 3: Display memory information by calling extension APIs](../developer-guide/devtools-extension.md#step-3-display-memory-information-by-calling-extension-apis) in _Create a DevTools extension, adding a custom tool tab and panel_. |
-| 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) in **MicrosoftEdge / Demos** repo | [Step 4: Interact between the webpage and DevTools](../developer-guide/devtools-extension.md#step-4-interact-between-the-webpage-and-devtools) in _Create a DevTools extension, adding a custom tool tab and panel_. |
+## Samples in the "MicrosoftEdge / Demos" repo
+
+See [Microsoft Edge extensions](https://github.com/MicrosoftEdge/Demos/blob/main/README.md#microsoft-edge-devtools) in the Readme for the "MicrosoftEdge / Demos" repo.
 
 
 <!-- ====================================================================== -->
 ## See also
 
-* [Clone the Edge Demos repo to your drive](../../devtools/samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
+* [Clone the "MicrosoftEdge / Demos" repo to your drive](../../devtools/samples/index.md#clone-the-microsoftedge--demos-repo-to-your-drive) in _Sample code for DevTools_.
diff --git a/microsoft-edge/progressive-web-apps/how-to/sidebar.md b/microsoft-edge/progressive-web-apps/how-to/sidebar.md
index 7d0b6bafe5..4dd9ceed1f 100644
--- a/microsoft-edge/progressive-web-apps/how-to/sidebar.md
+++ b/microsoft-edge/progressive-web-apps/how-to/sidebar.md
@@ -207,7 +207,7 @@ The source code for the PWAmp demo app has the following, to support the Microso
 
 * The `isSidebarPWA` variable, which uses the `navigator.userAgentData` JavaScript API in the [app.js](https://github.com/MicrosoftEdge/Demos/blob/main/pwamp/app.js#L14) file.
 
-You can find the entire PWAmp demo source code at [MicrosoftEdge / Demos > pwamp](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp). To download the source code locally, see [Clone the Edge Demos repo to your drive](../../devtools/samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
+You can find the entire PWAmp demo source code at [MicrosoftEdge / Demos > pwamp](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp). To download the source code locally, see [Clone the "MicrosoftEdge / Demos" repo to your drive](../../devtools/samples/index.md#clone-the-microsoftedge--demos-repo-to-your-drive) in _Sample code for DevTools_.
 
 
 <!-- ====================================================================== -->
diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/1div-demo.png b/microsoft-edge/progressive-web-apps/samples/index-images/1div-demo.png
deleted file mode 100644
index e731d4dceb..0000000000
Binary files a/microsoft-edge/progressive-web-apps/samples/index-images/1div-demo.png and /dev/null differ
diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/background-sync.png b/microsoft-edge/progressive-web-apps/samples/index-images/background-sync.png
deleted file mode 100644
index c37d3d02d9..0000000000
Binary files a/microsoft-edge/progressive-web-apps/samples/index-images/background-sync.png and /dev/null differ
diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/file-handlers.png b/microsoft-edge/progressive-web-apps/samples/index-images/file-handlers.png
deleted file mode 100644
index 5cf6f10a19..0000000000
Binary files a/microsoft-edge/progressive-web-apps/samples/index-images/file-handlers.png and /dev/null differ
diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/pwamp.png b/microsoft-edge/progressive-web-apps/samples/index-images/pwamp.png
deleted file mode 100644
index f2e6207162..0000000000
Binary files a/microsoft-edge/progressive-web-apps/samples/index-images/pwamp.png and /dev/null differ
diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/wami.png b/microsoft-edge/progressive-web-apps/samples/index-images/wami.png
deleted file mode 100644
index 4fc990615e..0000000000
Binary files a/microsoft-edge/progressive-web-apps/samples/index-images/wami.png and /dev/null differ
diff --git a/microsoft-edge/progressive-web-apps/samples/index.md b/microsoft-edge/progressive-web-apps/samples/index.md
index 339e07d5e8..96f07231eb 100644
--- a/microsoft-edge/progressive-web-apps/samples/index.md
+++ b/microsoft-edge/progressive-web-apps/samples/index.md
@@ -6,210 +6,21 @@ ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: pwa
-ms.date: 10/01/2025
+ms.date: 05/22/2026
 ---
 # Progressive Web App samples
-<!-- sync:
-https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/index
-https://github.com/MicrosoftEdge/Demos/blob/main/README.md#progressive-web-apps-pwas
-sync'd Oct. 17, 2025
--->
-
-These demo PWAs show how to use features and APIs that can progressively enhance your apps when installed on devices.
-
-The first sample to use when getting started is the [Temperature converter sample](./temperature-converter.md).
-
-See the Readme file for the sample; some samples require setup and don't work if you just click the app's link below.
-
-Most of these PWA demos are in the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos?tab=readme-ov-file#progressive-web-apps-pwas) repo.
-
-<!-- sort h2's by repo then by dir name, to match https://github.com/MicrosoftEdge/Demos?tab=readme-ov-file#progressive-web-apps-pwas -->
-
 
-<!-- ====================================================================== -->
-## 1DIV
-<!-- "MicrosoftEdge / Demos" repo -->
-
-1DIV is a CSS editor that lets users create drawings by creating just one HTML element and CSS code.
-
-![The 1DIV app](./index-images/1div-demo.png)
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/), [App](https://microsoftedge.github.io/Demos/1DIV/dist/).
-
-1DIV uses the following features:
-
-| Feature | Description | Documentation |
-|:--- |:--- |:--- |
-| Window Controls Overlay | 1DIV uses the space normally reserved by the title bar to display a logo, search field, and button. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) |
+The sample Progressive Web Apps (PWAs) show how to use features and APIs that can progressively enhance your app when installed on a device.
 
+For overviews of most of the PWA samples, see [Progressive Web Apps (PWAs)](https://github.com/MicrosoftEdge/Demos/blob/main/README.md#progressive-web-apps-pwas) in the Readme for the "MicrosoftEdge / Demo" repo.
 
-<!-- ====================================================================== -->
-## Email client
-<!-- "MicrosoftEdge / Demos" repo -->
-
-A simulated email client PWA that demonstrates how to use PWA protocol handlers.
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/), [App](https://microsoftedge.github.io/Demos/email-client/).
-
-Email client uses the following features:
-
-| Feature | Description | Documentation |
-|:--- |:--- |:--- |
-| Protocol Handling | `mailto` links are handled by the app to start composing a new email. | [Handle protocols in a PWA](../how-to/handle-protocols.md) |
-
-
-<!-- ====================================================================== -->
-## Application Title Meta Tag
-<!-- "MicrosoftEdge / Demos" repo -->
-
-A demo web app to showcase the `application-title` meta tag.
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-application-title), [App](https://microsoftedge.github.io/Demos/pwa-application-title/).
-
-Application Title Meta Tag uses the following features:
-
-| Feature | Description | Documentation |
-|:--- |:--- |:--- |
-| `application-title` meta tag | The PWA makes runtime changes to the `<meta name="application-title" content="">` element. | [application-title](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/meta/name#application-name) in _&lt;meta&gt; name attribute_ at MDN. |
-
-
-<!-- ====================================================================== -->
-## PWA Background Sync
-<!-- "MicrosoftEdge / Demos" repo -->
-
-The PWA Background Sync demo 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 API demo](./index-images/background-sync.png)
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-background-sync/), [App](https://microsoftedge.github.io/Demos/pwa-background-sync/).
-
-The PWA Background Sync API demo uses the following features:
-
-| Feature | Description | Documentation |
-|:--- |:--- |:--- |
-| Background Sync | Enables using the PWA when offline; synchronizes data with the server when the network connection is restored. | [Synchronize and update a PWA in the background](../how-to/background-syncs.md) |
-
-
-<!-- ====================================================================== -->
-## PWA file handlers
-<!-- "MicrosoftEdge / Demos" repo -->
-
-The PWA file handlers app handles `*.txt` files like a native application does.
-
-![The "PWA file handlers" demo app](./index-images/file-handlers.png)
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-file-handlers/), [App](https://microsoftedge.github.io/Demos/pwa-file-handlers/).
-
-The PWA file handlers app uses the following features:
-
-| Feature | Description | Documentation |
-|:--- |:--- |:--- |
-| File Handling | The `file_handlers` web app manifest member enables a PWA to handle file types like a native application does. | [Handle files in a PWA](../how-to/handle-files.md) |
-
-
-<!-- ====================================================================== -->
-## PWA installer
-
-A PWA that uses the Web Install API to install other PWAs.  Also uses CSS Masonry.
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/), [App](https://microsoftedge.github.io/Demos/pwa-installer/).
-
-PWA installer uses the following features:
-
-| Feature | Description | Documentation |
-|:--- |:--- |:--- |
-| Web Install API | PWA installer uses the `navigator.install()` API to install other PWAs on the device. | [Web Install API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WebInstall/explainer.md) |
-| CSS Masonry | Instead of a strict grid that has gaps below shorter items, the items in the following row are raised up to fill the gaps. | [Masonry layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout) |
-
-See also:
-* [Microsoft Edge: Web Install API Dev Trial Live](https://www.linkedin.com/feed/update/urn:li:activity:7348768177993998337/)
-* [Web Install API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WebInstall/explainer.md) - explainer.
-
-
-<!-- ======================================================================
-## Web Install Sample
-"Kbhlee2121 / pwa" repo
-
-* [App](https://kbhlee2121.github.io/pwa/web-install/index.html) - requires the web-app-installation-api flag.
-* [/web-install/](https://github.com/Kbhlee2121/pwa/tree/master/web-install) - source code directory.  no readme
-* [/pwa-web-install-api/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-web-install-api/)
-   * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwa-web-install-api/README.md)
--->
-
-
-<!-- ====================================================================== -->
-## Timer PWA
-<!-- "MicrosoftEdge / Demos" repo -->
-
-Has a **Set timer** button, and you can set the duration of the timer.
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer/), [App](https://microsoftedge.github.io/Demos/pwa-timer/).
-
-
-<!-- ====================================================================== -->
-## PWA To Do
-<!-- "MicrosoftEdge / Demos" repo -->
-
-Create lists of tasks locally in your browser, or by installing the app.  Click the **About** link in the rendered demo.
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do/), [App](https://microsoftedge.github.io/Demos/pwa-to-do/).
-
-
-<!-- ====================================================================== -->
-## PWAmp
-<!-- "MicrosoftEdge / Demos" repo -->
-
-PWAmp is a desktop music player that plays local and remote audio files.
-
-![The PWAmp app, showing playback buttons and a list of songs](./index-images/pwamp.png)
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/), [App](https://microsoftedge.github.io/Demos/pwamp/).
-
-PWAmp uses the following features:
-
-| Feature | Description | Documentation |
-|:--- |:--- |:--- |
-| Window Controls Overlay | The space normally reserved to the title bar can be used by PWAmp to display a visualization of the current song. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) |
-| Protocol Handling | Links that start with `web+amp:` can be used to share remote songs. | [Handle protocols in a PWA](../how-to/handle-protocols.md) |
-| File Handling | Audio files can be opened with PWAmp directly. Right-click on a file ending with `.mp3` for example and click **Open with**. | [Handle files in a PWA](../how-to/handle-files.md) |
-| Web Share | Songs can be shared with other apps through the operating system sharing dialog. | [Sharing content](../how-to/share.md#sharing-content) |
-| Share Target | Other apps can share audio files with PWAmp, through the operating system sharing dialog. | [Receiving shared content](../how-to/share.md#receiving-shared-content) |
-| Widget | A mini-player Widget can be installed in Windows 11 Widgets dashboard to see the current song. | [Display a PWA widget in the Windows Widgets Board](../how-to/widgets.md) |
-| Sidebar | PWAmp can be pinned to the sidebar in Microsoft Edge. | [Build a PWA for the sidebar in Microsoft Edge](../how-to/sidebar.md) |
-
-
-<!-- ====================================================================== -->
-## Temperature converter
-<!-- "MicrosoftEdge / Demos" repo -->
-
-A simple PWA demo app that converts temperatures.  See [Temperature converter sample](./temperature-converter.md).
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/temperature-converter/), [App](https://microsoftedge.github.io/Demos/temperature-converter/).
-
-
-<!-- ====================================================================== -->
-## wami
-<!-- "MicrosoftEdge / Demos" repo -->
-
-wami can apply a sequence of image manipulation steps such as cropping, resizing, rotating, or adding effects on batch of images.
-
-![The wami app](./index-images/wami.png)
-
-[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/wami/), [App](https://microsoftedge.github.io/Demos/wami/).
-
-wami uses the following features:
-
-| Feature | Description | Documentation |
-|:--- |:--- |:--- |
-| Window Controls Overlay | The space normally reserved to the title bar can be used by wami. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) |
-| File System Access | wami can save transformed images back to disk. | [File System Access API](https://developer.mozilla.org/docs/Web/API/File_System_Access_API) |
+The first sample to use when getting started is the [Temperature converter sample](./temperature-converter.md).
 
+See the Readme file for a given sample.  Some samples require setup and don't work if you just click the app's GitHub.io demo link.
 
-<!-- end of "MicrosoftEdge / Demos" repo -->
+The following samples are in a repo other than the "MicrosoftEdge / Demo" repo.
 
 
-<!-- ====================================================================== -->
-<!-- ## Demos in a repo other than the Demos repo -->
 <!-- ====================================================================== -->
 ## BPM Techno
 <!-- "webmaxru / bpm-counter" repo -->
@@ -251,7 +62,18 @@ Webboard uses the following features:
 | Web Share | Drawings can be shared with other apps through the operating system sharing dialog. | [Sharing content](../how-to/share.md#sharing-content) |
 
 
+<!-- ======================================================================
+## Web Install Sample
+"Kbhlee2121 / pwa" repo
+
+* [App](https://kbhlee2121.github.io/pwa/web-install/index.html) - requires the web-app-installation-api flag.
+* [/web-install/](https://github.com/Kbhlee2121/pwa/tree/master/web-install) - source code directory.  no readme
+* [/pwa-web-install-api/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-web-install-api/)
+   * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwa-web-install-api/README.md)
+-->
+
+
 <!-- ====================================================================== -->
 ## See also
 
-* [Clone the Edge Demos repo to your drive](../../devtools/samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
+* [Clone the "MicrosoftEdge / Demos" repo to your drive](../../devtools/samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-instance.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-instance.md
index a5092dcc5c..97de0e43f7 100644
--- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-instance.md
+++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-instance.md
@@ -195,4 +195,4 @@ You've finished the tutorial "Get started by clicking the Launch Instance button
 
 * [demo-to-do](https://microsoftedge.github.io/Demos/demo-to-do/) - the demo web app running on the `github.io` server.
 * [Source code for demo-to-do](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do)
-* [MicrosoftEdge/Demos repo](https://github.com/MicrosoftEdge/Demos)
+* [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo.
diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-project.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-project.md
index 1fd865a979..7e95055239 100644
--- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-project.md
+++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-project.md
@@ -164,4 +164,4 @@ You've finished the tutorial "Get started by clicking the Launch Project button"
 
 * [demo-to-do](https://microsoftedge.github.io/Demos/demo-to-do/) - the demo web app running on the `github.io` server.
 * [Source code for demo-to-do](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do)
-* [MicrosoftEdge/Demos repo](https://github.com/MicrosoftEdge/Demos)
+* [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo.
diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-right-click-html.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-right-click-html.md
index eb1ce764da..142d7b9203 100644
--- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-right-click-html.md
+++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-right-click-html.md
@@ -150,4 +150,4 @@ You've finished the tutorial "Get started by right-clicking an HTML file".  It's
 
 * [demo-to-do](https://microsoftedge.github.io/Demos/demo-to-do/) - the demo web app running on the `github.io` server.
 * [Source code for demo-to-do](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do)
-* [MicrosoftEdge/Demos repo](https://github.com/MicrosoftEdge/Demos)
+* [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo.
diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started.md
index cb27626184..348a15f369 100644
--- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started.md
+++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started.md
@@ -28,4 +28,4 @@ These tutorials walk you through several ways of opening and closing DevTools, a
 
 * [demo-to-do](https://microsoftedge.github.io/Demos/demo-to-do/) - the demo web app running on the `github.io` server.
 * [Source code for demo-to-do](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do)
-* [MicrosoftEdge/Demos repo](https://github.com/MicrosoftEdge/Demos)
+* [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo.
diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md
index be6a160671..03eaef022e 100644
--- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md
+++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md
@@ -97,10 +97,9 @@ As another alternative, instead of cloning the entire directory, you can downloa
 
 `C:\Users\username\Documents\GitHub\Demos\demo-to-do\`
 
-
 To clone the **Demos** repo to use the **demo-to-do** sample for this tutorial:
 
-1. Go to [MicrosoftEdge/Demos repo](https://github.com/MicrosoftEdge/Demos/).
+1. Go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos/) repo.
 
 1. If the green **Code** button isn't shown, click **Demos** in the path **Microsoft Edge** / **Demos** in the upper left to go to the main page of the repo.
 
diff --git a/microsoft-edge/web-platform/samples.md b/microsoft-edge/web-platform/samples.md
index 2cadee68cc..236a5583f9 100644
--- a/microsoft-edge/web-platform/samples.md
+++ b/microsoft-edge/web-platform/samples.md
@@ -8,28 +8,5 @@ ms.service: microsoft-edge
 ms.date: 07/30/2025
 ---
 # Cross-browser API samples
-<!-- sync:
-https://learn.microsoft.com/microsoft-edge/web-platform/samples.md
-https://github.com/MicrosoftEdge/Demos/blob/main/README.md#cross-browser-api-samples
-sync'd Jul. 30, 2025
--->
 
-<!-- todo: delete table and link to https://github.com/MicrosoftEdge/Demos/blob/main/README.md#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 webpage. | [/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/) |
-| 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](./json-viewer.md). | [/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) |
-| Page Colors Custom Scrollbars demo | Shows a custom, green scrollbar in a page that has custom colors. | [/page-colors-custom-scrollbars/](https://github.com/MicrosoftEdge/Demos/tree/main/page-colors-custom-scrollbars) | [Page Colors Custom Scrollbars demo](https://microsoftedge.github.io/Demos/page-colors-custom-scrollbars/) |
-| 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/](https://github.com/MicrosoftEdge/Demos/tree/main/reader) | [Reader](https://microsoftedge.github.io/Demos/reader/) demo |
-| Open UI's `<selectlist>` demos | Demo webpage showing how the Open UI's `<selectlist>` element can be used. | [/selectlist/](https://github.com/MicrosoftEdge/Demos/tree/main/selectlist) | [Open UI's \<selectlist\> demos](https://microsoftedge.github.io/Demos/selectlist/) |
-| `<selectmenu>` demos | OpenUI's `<selectmenu>` component was renamed to `<selectlist>`. | [/selectmenu/](https://github.com/MicrosoftEdge/Demos/tree/main/selectmenu) | [`<selectmenu>` demos](https://microsoftedge.github.io/Demos/selectmenu/), redirects to `/selectlist/` demos |
-| SVG support in the Async Clipboard API | Demo page showing how the Async Clipboard API supports SVG format. | [/svg-clipboard/](https://github.com/MicrosoftEdge/Demos/tree/main/svg-clipboard) | [SVG clipbard support demo](https://microsoftedge.github.io/Demos/svg-clipboard/) |
-| WebNN API | Uses the WebNN API to build a machine learning graph and run it on the device's hardware. | [/webnn/](https://github.com/MicrosoftEdge/Demos/tree/main/webnn) | [WebNN API demo](https://microsoftedge.github.io/Demos/webnn/) |
+See [Cross-browser API samples](https://github.com/MicrosoftEdge/Demos/blob/main/README.md#cross-browser-api-samples) in the Readme for the "MicrosoftEdge / Demos" repo.
diff --git a/microsoft-edge/web-platform/writing-assistance-apis.md b/microsoft-edge/web-platform/writing-assistance-apis.md
index 43ff2cb5e0..c40d87afe1 100644
--- a/microsoft-edge/web-platform/writing-assistance-apis.md
+++ b/microsoft-edge/web-platform/writing-assistance-apis.md
@@ -189,7 +189,7 @@ To use the Writer API or the Rewriter API in Microsoft Edge:
 
    The page is filtered to show the matching flag.
 
-   (Starting with Microsoft Edge 138, the Summarizer API is enabled by default.  Prior to Microsoft Edge 138, to enable the Summarizer API, you had to enable the Summarizer API by entering **Summarization API for Phi mini** here.)
+   (Starting with Microsoft Edge 138, the Summarizer API is enabled by default.  Prior to Microsoft Edge 138, to enable the Summarizer API, you had to enter **Summarization API for Phi mini** here.)
 
 1. Select **Enabled** next to the flag for the API you want to enable:
 
diff --git a/microsoft-edge/webview2/how-to/machine-setup.md b/microsoft-edge/webview2/how-to/machine-setup.md
index c61f8ce690..45079fd13a 100644
--- a/microsoft-edge/webview2/how-to/machine-setup.md
+++ b/microsoft-edge/webview2/how-to/machine-setup.md
@@ -177,7 +177,7 @@ If you instead want to clone the repo by using a Git Bash shell or command promp
 
 See also:
 * [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) - GitHub docs.
-* [Clone the Edge Demos repo to your drive](../../devtools/samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
+* [Clone the "MicrosoftEdge / Demos" repo to your drive](../../devtools/samples/index.md#clone-the-microsoftedge--demos-repo-to-your-drive) in _Sample code for DevTools_.
 
 * [Step 6: Set up a localhost server](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#step-6-set-up-a-localhost-server) in _Installing the DevTools extension for Visual Studio Code_.
 
@@ -308,5 +308,5 @@ To update the WebView2 Runtime on your development machine and on user machines,
 ## See also
 
 * [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) - GitHub docs.
-* [Clone the Edge Demos repo to your drive](../../devtools/samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
+* [Clone the "MicrosoftEdge / Demos" repo to your drive](../../devtools/samples/index.md#clone-the-microsoftedge--demos-repo-to-your-drive) in _Sample code for DevTools_.
 * [Step 6: Set up a localhost server](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#step-6-set-up-a-localhost-server) in _Installing the DevTools extension for Visual Studio Code_.