create-example
Create a runnable WebUI example with app structure, theme wiring, Playwright tests, demo metadata, and demo-shell registration.
Checklist
- Create the app folder with
src/,data/state.jsonwhen SSR state is needed,package.json,tsconfig.json, and a concisedemo.toml. - Use the shared theme for example UI: add
@microsoft/webui-examples-theme, pass--theme=@microsoft/webui-examples-theme, and inject/*{{{tokens.light}}}*/plus/*{{{tokens.dark}}}*/in the entry template. - Keep
package.jsonscripts consistent:build,start:client,start:server,start,test, andtest:update-snapshotswhen Playwright applies. - Add Playwright coverage in
tests/and aplaywright.config.tsusing the app's fixed dev port. Prefer behavior tests over screenshots unless the UI is the point. - Register the app in
xtask/src/e2e.rswhen it has Playwright tests. Usepre_script: Some("build")for custom build pipelines that the generic esbuild step cannot reproduce. - Add
demo.toml, copy the app intoexamples/demo/Dockerfile, and list it inexamples/README.md. - Run the focused app test, then
cargo xtask check.
Loading supporting files
microsoft/webui · MIT · Revision d0750d41d34f
Be the first to comment
Share what worked or leave a question for the creator.