Custom framework guide

TL;DR: You can add any framework to RSPFx with a preset and a web part class. Register them and pick the framework by name in your bundler config.

RSPFx core knows nothing about React or Vue. Each framework is a preset plus a base class. You can add your own without forking the CLI.

Contract

A framework has two parts:

Part	You export	File
FrameworkPreset	FrameworkPreset type	packages/plugin-api/src/types.ts
Web part class	BaseWebPart subclass	packages/core/src/base-web-part.ts

Use FrameworkPreset<string> for custom IDs. The preset adds compiler config. The class mounts at runtime with renderInto and disposeFrom.

Hot reload

Gate HMR plugins on fastRefresh. Return them only when true.

• Rspack React: new ReactRefreshRspackPlugin() and swc.jsc.transform.react.development: true
• Preact: new PreactRefreshRspackPlugin()
• Svelte: svelte-loader with hotReload: true
• Solid: solid-refresh via babel or SWC plugin
• Vue: vue-loader plus VueLoaderPlugin - HMR is always on

If a peer is missing, RSPFx warns and falls back to full reload. Install the peer to enable HMR. See Fast refresh.

Resolution

loadFrameworkPreset checks node_modules for @mbsks/rspfx-framework-<id>, then the in memory registry, then warns.

resolveContributionLoaders rewrites loader strings via createRequire(frameworkModuleUrl).resolve. builtin:swc-loader stays as is.

Scaffolding limits

rspfx new covers built in frameworks only. For custom frameworks, scaffold with vanilla and add your preset and class manually. rspfx doctor may report the framework package as missing when you use the registry, but build still succeeds.

For exact types, see ../../reference/custom-framework-reference.md.