Demos

Runnable RSPFx examples in examples/ plus one external project. Every example scaffolds via rspfx new, builds with rspfx build, and packages with rspfx package to sharepoint/solution/*.sppkg.

Clone the repo and run any demo with rspfx dev on http://localhost:4321 (local preview) or https://localhost:4321 when a tenant is set via dev.tenantUrl or --tenant. See getting-started.md and commands.md.

Featured — external

Demo	Stack	Repo
Play Fish — SPFx Chess	Solid 1.9 · Tailwind v4 · Stockfish 18 Lite WASM · chessground · Rspack · SPFx 1.22	master8848/spfx-with-rspfx-chess-demo

Play Fish is a SharePoint web part that plays chess against Stockfish 18 Lite in the browser.

Engine runs as WebAssembly (~7 MB, single-threaded) in a Web Worker, so the UI never blocks. UI is Solid.js with Tailwind v4 and chessground. Rules are chess.js (castling, en passant, promotion, checkmate/stalemate, PGN). Board supports drag & drop, animations, last-move/check highlights, legal-move dots, flip, and keyboard navigation.

Games persist to a SharePoint list Chess Games (created on first use via PnPjs, columns PGN/Moves/Result/WhiteElo/BlackElo/WhiteName/BlackName/Site) and fall back to localStorage demo mode without a SharePoint context. Includes 7 Elo levels (700–2800), thinking timer, confetti on win, and theme-aware styling (data-theme="light|dark").

What it proves for RSPFx: non-React framework at a modern version, ~7 MB WASM asset handling, Web Worker chunk, Tailwind v4 PostCSS pipeline, and a single rspack.config.ts with RspfxPlugin (packages/plugin/src/index.ts). See the demo repo for pnpm dev / pnpm build / pnpm package and deployment steps.

All demos at a glance

Demo	Framework	Bundler	Path	Description
feedback (React 19)	React 19	Vite 8	examples/vite-react19	Form with validation that saves to a SharePoint list
hello-react	React 18	Rspack	examples/react	Basic hello world
hello-react (Vite)	React 18	Vite	examples/vite-react	Same hello world, built with Vite
hello-react (Rsbuild)	React 18	Rsbuild	examples/rsbuild-react	Same hello world, built with Rsbuild
hello-solid	Solid	Rspack	examples/solid	Reactive hello world
hello-solid (Rsbuild)	Solid	Rsbuild	examples/rsbuild-solid	Same Solid hello world, built with Rsbuild
hello-vanilla	Vanilla TS	Rspack	examples/vanilla	No framework, plain TypeScript
hello-vanilla (Vite)	Vanilla TS	Vite	examples/vite-vanilla	Plain TypeScript, built with Vite
hello-preact	Preact	Rspack	examples/preact	Lightweight React alternative
hello-vue	Vue 3	Rspack	examples/vue	Vue single-file component
hello-svelte	Svelte	Rspack	examples/svelte	Svelte with scoped styles
shadcn	React 18 + Tailwind v4	Rspack	examples/shadcn	Styled UI with Tailwind and shadcn
mixed	React 18	Vite	examples/mixed	Web part plus extension and library
modern-search	React 17 · Fluent UI 8	Rspack	examples/modern-search	Large real-world search solution

All examples/* share deterministic GUIDs for docs and tests (e.g. react and vite-react both use component 11111111-1111-4111-8111-111111111101, solution 22222222-2222-4222-8222-222222222201). Do not install two variants with overlapping IDs on the same tenant; regenerate with crypto.randomUUID(). See project-structure.md and examples/README.md.

By framework

Framework is set via --framework at scaffold time (rspfx new --framework vue) and via framework: in plugin options (@mbsks/rspfx-plugin / @mbsks/rspfx-core). Each framework ships a preset with loaders/SWC options and a *WebPart base class plus a headless adapter (@mbsks/rspfx-framework-<fw>/headless).

React: examples/react, examples/vite-react, examples/rsbuild-react, examples/shadcn, examples/mixed, examples/vite-react19 (React 19). See frameworks.md and custom-framework.md.
Vanilla: examples/vanilla, examples/vite-vanilla.
Vue / Svelte / Solid / Preact: examples/vue, examples/svelte, examples/solid, examples/rsbuild-solid (Solid + Rsbuild), examples/preact. External Solid example is the chess demo above.

All frameworks support rspfx dev --refresh where the preset provides HMR (see fast-refresh.md).

By bundler

RSPFx exposes one plugin per bundler with the same options shape. Pick the config file, not a different API:

Vite — rspfxVite() in vite.config.ts: examples/vite-react, examples/vite-vanilla, examples/mixed, examples/vite-react19 (React 19 + Vite 8). Vite is the default for new projects.
Rspack — RspfxPlugin in rspack.config.ts: examples/react, examples/preact, examples/vue, examples/svelte, examples/solid, examples/vanilla, examples/shadcn, examples/modern-search. External chess demo also uses Rspack.
Rsbuild — rspfxRsbuild() in rsbuild.config.ts: examples/rsbuild-react, examples/rsbuild-solid.

See architecture.md for the pipeline and building-packages.md for rspfx build / rspfx package outputs.

Production-scale and multi-component

examples/modern-search — PnP Modern Search v4.23.3 (~178 TS files, 24 SCSS modules, 4 web parts, Graph webApiPermissionRequests, Handlebars/Adaptive Cards/MGT). Validates that a large real-world SPFx solution compiles unchanged under RSPFx. See migration-case-study.md and examples/modern-search/README.md.
examples/mixed — one solution with a web part (src/webparts/hello), an application customizer (src/extensions/banner), and a library (src/libraries/utils), plus assets/favicon.svg and localized loc/en-us.ts. See project-structure.md and multi-webpart.md.
examples/shadcn — styling reference for Tailwind v4 CSS-first and shadcn/ui without Fluent UI. See styling.md and favicon-and-assets.md.

Running a demo

npm install

Each example also supports rspfx doctor, rspfx clean, and rspfx analyze via apps/cli/src/commands/*. External chess demo uses pnpm and rspack.config.ts — pnpm install && pnpm dev auto-fetches the Stockfish engine, then pnpm build / pnpm package.

Demos ​

Featured — external ​

All demos at a glance ​

By framework ​

By bundler ​

Production-scale and multi-component ​

Running a demo ​

Links ​