Clarify Readme steps to add new sample by mikehoffms · Pull Request #137 · MicrosoftEdge/Demos

mikehoffms · 2026-05-21T17:51:33Z

Related PRs:

Rendered page for review:

Microsoft Edge demos (main Readme)
- ~/README.md
- Preview: https://github.com/mikehoffms/Demos/blob/user/mikehoffms/readme-tables-links/README.md
- Before/live: https://github.com/MicrosoftEdge/Demos/blob/main/README.md
- Clarified Adding a new demo.
- Nested sections:
  - Contributing
    - Adding a new demo
- Deleted syncing/maintenance comments.
  - PR #3771 will try deleting the dup tables from docset, to avoid having to sync dup content.
- Changed title to sentence-case.
- Fixed 404 due to relative path.
- Changed What's New to What's new 3x.
- Listed 4 ways to clone repo, linked to GH Docs.
- Changed 80-col wrap to non-wrapped.
- Updated link text as [Inspect CSS Grid layouts].

AB#62380953

mikehoffms

LGTM - Content Developer/ Writer/Editor

Rewrites and expands the demo creation steps in README.md for clarity. Changes include: consistently referring to the demo README as `README.md`, instructing how to modify the GitHub.io link to match your directory name, adding a note that the GitHub Pages demo becomes available about an hour after merge with an Actions link, listing example files commonly found in a demo directory (index.html, style.css, foo.js, README.md, manifest.json), and emphasizing creation of a pull request for review. These edits improve guidance for contributors adding new demos.

captainbrosset · 2026-05-25T12:05:20Z

+| 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) |


Suggested change

| 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) |

| CSS Masonry | Instead of a strict grid that has gaps below shorter items, the items fill the columns in the layout to avoid gaps. | [Masonry layout](https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Masonry_layout) |

captainbrosset · 2026-05-25T12:06:34Z

+To open and run the sample:

-1. In the browser, open a new tab and go to `about:flags`.
+1. Go to [Open the demo](https://microsoftedge.github.io/Demos/pwa-installer/).


Suggested change

1. Go to [Open the demo](https://microsoftedge.github.io/Demos/pwa-installer/).

1. Go to [PWA Installer](https://microsoftedge.github.io/Demos/pwa-installer/).

captainbrosset · 2026-05-25T12:07:07Z

+1. Open a new tab, and then go to `about:flags`.
+
+   You end up at `edge://flags`.


Suggested change

1. Open a new tab, and then go to `about:flags`.

You end up at `edge://flags`.

1. Open a new tab, and then go to `edge://flags`.

captainbrosset · 2026-05-25T12:09:26Z

 1. In the browser, open a new tab and go to `about:flags`.

-   In Microsoft Edge, you end up at `edge://flags`.
+   You end up at `edge://flags`.

 1. In the **Search** box, enter **css-masonry-layout**.

 1. Set the **CSS Masonry Layout** flag to **Enabled**.

-1. Click the **Restart** button in the lower right.  The browser restarts.
+1. Click the **Restart** button in the lower right.
+
+   The browser restarts.


Can we tell users to enable both flags at the same time, while they're on the edge://flags page? Right now, we're telling them to do the steps twice in a row (open edge://flags, set a flag, restart, and then open edge://flags, set another flag, restart again)

captainbrosset · 2026-05-25T12:19:16Z

+      * [By the Light of the Silvery Moon - Fats Waller](web+amp:remote-song:ia803003.us.archive.org/17/items/78_by-the-light-of-the-silvery-moon_fats-waller-and-his-rhythm-fats-waller-the-dee_gbia0153541a/BY%20THE%20LIGHT%20OF%20THE%20SILVERY%20-%20%22Fats%22%20Waller%20and%20his%20Rhythm.mp3).

-* To edit song information, click on the artist, title, or album fields and edit the text.
+* The title bar becomes able to be displayed or hidden.  To hide the title bar, in the toolbar, click the chevron (>>) icon.


Suggested change

* The title bar becomes able to be displayed or hidden. To hide the title bar, in the toolbar, click the chevron (>>) icon.

* The title bar can be displayed or hidden. To hide the title bar, in the toolbar, click the chevron (^) icon.

captainbrosset · 2026-05-25T12:22:00Z


 <!-- ====================================================================== -->
-## Making a new skin
+## Open the sample


I think it would be good to make this section appear earlier in the readme. The most important thing we want users to do on the repo is open samples.

captainbrosset · 2026-05-25T12:26:37Z

+
+
+<!-- ------------------------------ -->
+### Record an audio clip


We don't really need to document all the features of the app. Some of them are not useful to learn about integrating a PWA in Windows (which this sample is about).

captainbrosset · 2026-05-25T12:34:35Z

 wami is an image manipulation demo application. It is an installable web app (PWA) specifically made to demonstrate that web technologies can be used to create desktop apps that feel like platform-specific apps.

 ![Screenshot of the wami app](screenshot-app.png)


This should be moved up into the "About this sample" section.

mikehoffms added 2 commits May 21, 2026 10:48

replace tables by links

d4b3cf2

change sections to 1 table

13419d9

mikehoffms commented May 21, 2026

View reviewed changes

Comment thread README.md Outdated

mikehoffms added 7 commits May 21, 2026 11:49

table lead-in

ddefcca

no table lead-in

f01a678

consistent demo dir name

7e9128b

actually script.js

1c61729

better log msg

307099a

link how create PR

82bdef8

mikehoffms changed the title ~~Replace tables by links in main Readme~~ Clarify Readme steps to add new sample May 22, 2026

mikehoffms added 2 commits May 22, 2026 10:15

restore tables

126f693

del todo

cbb69bd

mikehoffms mentioned this pull request May 22, 2026

Update "CSS features reference" MicrosoftDocs/edge-developer#3771

Open

mikehoffms added 8 commits May 22, 2026 11:12

not touch docset repo

50c3113

nesting/order sections

46e1d3a

Cloning

1b59025

del "index" from url

e8e1e39

move pwa content from docset to Readmes

eee0bdc

pwamp Detailed contents

d7294fe

.

cdf0f69

not detailed

b7f8f1f

captainbrosset requested changes May 25, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clarify Readme steps to add new sample#137

Clarify Readme steps to add new sample#137
mikehoffms wants to merge 19 commits into
MicrosoftEdge:mainfrom
mikehoffms:user/mikehoffms/readme-tables-links

mikehoffms commented May 21, 2026 •

edited

Loading

Uh oh!

mikehoffms left a comment

Uh oh!

Uh oh!

captainbrosset May 25, 2026

Uh oh!

captainbrosset May 25, 2026

Uh oh!

captainbrosset May 25, 2026

Uh oh!

captainbrosset May 25, 2026

Uh oh!

captainbrosset May 25, 2026

Uh oh!

captainbrosset May 25, 2026

Uh oh!

captainbrosset May 25, 2026

Uh oh!

captainbrosset May 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	\| 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) \|
	\| CSS Masonry \| Instead of a strict grid that has gaps below shorter items, the items fill the columns in the layout to avoid gaps. \| [Masonry layout](https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Masonry_layout) \|

	1. Go to [Open the demo](https://microsoftedge.github.io/Demos/pwa-installer/).
	1. Go to [PWA Installer](https://microsoftedge.github.io/Demos/pwa-installer/).

		1. Open a new tab, and then go to `about:flags`.

		You end up at `edge://flags`.

	* The title bar becomes able to be displayed or hidden. To hide the title bar, in the toolbar, click the chevron (>>) icon.
	* The title bar can be displayed or hidden. To hide the title bar, in the toolbar, click the chevron (^) icon.



		<!-- ------------------------------ -->
		### Record an audio clip

		wami is an image manipulation demo application. It is an installable web app (PWA) specifically made to demonstrate that web technologies can be used to create desktop apps that feel like platform-specific apps.

		![Screenshot of the wami app](screenshot-app.png)

Conversation

mikehoffms commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mikehoffms left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mikehoffms commented May 21, 2026 •

edited

Loading