[docs-infra] Migrate demos to docs-infra

[brijeshb42]

Extension of #47821
Comparison with original PR.

Performance benchmark

I benchmarked this PR against master and the original PR across five representative documentation pages:

• Button
• Autocomplete
• Text Field
• Dialog
• Table

Summary

Metric	Master	PR #47821	This PR	This PR vs #47821	This PR vs Master
HTML full	610.0 KiB	592.7 KiB	589.4 KiB	-0.6%	-3.4%
HTML gzip	66.8 KiB	71.5 KiB	71.2 KiB	-0.4%	+6.7%
Initial first-party JS full	2017.0 KiB	2307.2 KiB	2410.0 KiB	+4.5%	+19.5%
Initial first-party JS gzip	538.9 KiB	709.5 KiB	661.7 KiB	-6.7%	+22.8%
Settled first-party JS full	2163.7 KiB	2587.6 KiB	2588.8 KiB	+0.0%	+19.6%
Settled first-party JS gzip	585.8 KiB	799.1 KiB	720.4 KiB	-9.8%	+23.0%
Settled JS files	27.0	39.4	42.0	+6.6%	+55.6%
TTFB	533 ms	491 ms	475 ms	-3.2%	-10.9%
FCP	890 ms	864 ms	706 ms	-18.2%	-20.7%
LCP	890 ms	864 ms	706 ms	-18.2%	-20.7%
CLS	0.003	0.000	0.004	+0.003	+0.000
TBT	140 ms	115 ms	80 ms	-30.6%	-42.9%
DOMContentLoaded	946 ms	1,062 ms	872 ms	-17.9%	-7.9%
Load	1,245 ms	1,397 ms	1,049 ms	-24.9%	-15.7%

Overall values are the mean of the five route medians.

New PR vs old PR by route

Route	Route chunk transfer	Total page transfer	FCP	LCP	TBT	Lighthouse score
Button	-36.1%	-19.5%	-38.9%	-8.9%	-42.3%	64 → 75
Autocomplete	-55.6%	-26.3%	-36.3%	-21.5%	-57.8%	51 → 66
Text Field	-58.4%	-23.6%	-32.8%	-11.8%	-49.6%	56 → 77
Dialog	-55.7%	-22.3%	-28.1%	-15.1%	-40.4%	67 → 84
Table	-65.8%	-22.0%	-42.2%	-11.6%	-39.7%	61 → 79

Interaction performance

Metric	Master	Original PR	Trimmed PR	Trimmed vs original	Trimmed vs Master
Next.js hydration	127.9 ms	104.1 ms	105.9 ms	+1.7%	-17.2%
Button to Autocomplete navigation	451.1 ms	316.2 ms	305.4 ms	-3.4%	-32.3%
Post-navigation LCP	433.5 ms	303.0 ms	291.3 ms	-3.9%	-32.8%
Playground Code Editing	32.0 ms	16.0 ms	40.0 ms	+16.7%

The only regression is the code editing part since we are going back to textarea based editor. This will be solved separately when we migrate back to content editable in a dedicated PR.

What changed in the waterfall

• Route chunks are 36–66% smaller than the old PR. The largest reductions are on Autocomplete and Table.
• Every observed LCP element is introductory text, not an image or demo.
• The new PR requests about 154 KiB fewer fonts than both Master and the old PR, which helps it achieve the lowest total page transfer despite carrying more initial JS than Master.

Goal assessment

Goal	Result
Reduce HTML	Mostly. Overall encoded HTML is 0.4% smaller than the old PR, but 14.9% larger than Master. Autocomplete is 0.2% larger than the old PR.
Reduce initial JS	Partial. 5.4% smaller than the old PR overall, but Text Field is 1.9% larger. Initial JS remains 14.0% above Master.
Defer noncritical source/precompute payload	Partial. Route payloads are substantially smaller and per-demo payloads are deferred, but eager route chunks still contain precomputed metadata.
Improve LCP without hurting FCP, TBT, CLS, or total JS vs old PR	Pass in the controlled Phase B runs. FCP, LCP, TBT, and total JS all improve; Phase B CLS is unchanged.

Methodology

• Deployments:
  • Master: 58cfb571212961a46cce5ef51418cf4dcc8da4cb
  • Old PR: 9f883f3561a4f0a3b6b4735c589e475d4649082d
  • New PR: 13d6f50caef899d0c09d5c31352df4765ebdf514
• 5 measured cold loads per route and deployment for each Playwright phase.
• 3 Lighthouse mobile runs per route and deployment.
• Deployment order interleaved between runs.
• Fresh browser context for every measured load.
• Browser cache disabled and service workers blocked.
• Chromium 149.0.7827.55, Playwright 1.61.1, Lighthouse 13.4.1.
• Viewport: 1365 × 900.
• Phase A: no artificial throttling; CDP network events used for encoded and decoded sizes.
• Phase B: 150 ms latency, 200,000 B/s download, 75,000 B/s upload.
• Each run waited 10 seconds after load to capture deferred imports.

• I have followed (at least) the PR section of the contributing guide.

[mnajdova]

Some issues I noticed, clicking on View Sources on GH on a preview link is broken:

• https://github.com/mui/material-ui/blob/docs-infra/migrate-demos-trimmed/docs/data/material/components/autocomplete/demos/combo-box/ComboBox.tsx vs other PR https://github.com/mui/material-ui/blob/v9.3.1/docs/data/material/components/autocomplete/ComboBox.tsx
• we are missing the JS/TS switcher
• I also noticed on master we are missing gap between the Edit in Chat and JS/TS switcher, we can fix it
  
• the demo on (perma|PR|master|next) anchor is wrong, e.g. it generates https://deploy-preview-48842--material-ui.netlify.app/material-ui/react-autocomplete/#ComboBox, while it should be https://deploy-preview-48842--material-ui.netlify.app/material-ui/react-autocomplete/#combo-box

Not for the scope of this PR, I accidently noticed that for the Autocomplete, in some demos we have a dedicated file for the movies, while on other they are inlined. I guess we should have a dedicated file for files in all demos.

[brijeshb42]

we are missing the JS/TS switcher

Note that for a demo, if js and ts contents remain same after transpiling from ts to js, the switcher won't show since it'll switch to the same content.

Checking others.

[silviuaavram]

Will continue the review but what to mention a critical bug:

The Reset button functionality is broken. Even when you're in JS, and hit reset, it will bring back the TS version.

In the demo below I used quite a few clicks, but eventually it starts to bring the TS version.

Screen.Recording.2026-08-07.at.15.08.46.mov

[silviuaavram]

There is a difference in text highlight colors, see options:

Before:

After: