The SharePoint Framework (SPFx) is Microsoft’s client-side development model for modernizing and extending the SharePoint Online user experience, as well as for building customizations that span across Microsoft Teams, Viva Connections and other Microsoft 365 experiences. It was first made generally available in February 2017.

Introduction

The SharePoint Framework (SPFx) is Microsoft’s client-side development model for modernizing and extending the SharePoint Online user experience, as well as for building customizations that span across Microsoft Teams, Viva Connections and other Microsoft 365 experiences. It was first made generally available in February 2017. (Voitanos)

Since then, Microsoft has released successive versions of SPFx — each version driving enhancements in tooling, runtime dependencies (Node.js, TypeScript), support for new hosts (Teams, Viva), improved developer experience, and increased flexibility for layout and personalization.

This article reviews the major milestones in SPFx’s version history, outlines key features by version, discusses why updates matter, and provides guidance for planning upgrades — followed by a reference table of versions.

Historical Milestones

Early Years (Pre-v1.5)

• The initial SPFx version v1.0 was released in February 2017. It included the core runtime for client-side web parts running in SharePoint Online. (Voitanos)
• Soon after, in summer 2017, version v1.3.1 introduced support for SPFx Extensions (Application Customizers, Field/Command Set Customizers). (Voitanos)
• In late 2017, version v1.4.0 added the includeClientSideAssets property (allowing automatic packaging of assets into the .sppkg), and version v1.4.1 brought support for calling secured endpoints (Entra ID/Microsoft Graph) from SPFx. (Voitanos)
• These early years set the foundation: modern toolchain, TypeScript/React support, deployment model via the SharePoint App Catalog, and alignment with SharePoint Online’s “modern experience”.

Mid-Cycle (v1.10 → v1.15)

• Over the next few years, Microsoft continuously updated the toolchain: React versions, Fluent UI updates, TypeScript upgrades, build and packaging enhancements. For instance, version v1.12.1 added support for web part rendering width detection and improved Teams support. (GitHub)
• The emphasis in this period was on stability, developer tooling, compatibility, and expanding SPFx’s reach into Teams and other hosts.

Recent Key Releases (v1.17 → v1.21)

SPFx v1.17 (April 4, 2023)

• The release introduced improvements enabling SPFx components to span across Microsoft 365 (Teams, Outlook, Office) more seamlessly. (Microsoft Learn)
• Highlights:
  • Teams JS SDK updated to v2.9.1 to support Live Share SDK. (Microsoft Learn)
  • Adaptive Card Extensions (ACEs) support for Adaptive Cards schema v1.5 (allowing tables and other new features). (Microsoft Learn)
  • “Sync to Teams” operation in App Catalog updated to use Teams Manifest v1.16.
• Why it matters: If your SPFx solution targets multi-host scenarios (SharePoint + Teams + Viva), v1.17 significantly improved the alignment and packaging.

SPFx v1.19 (April 30, 2024)

• Released early-2024, v1.19 focussed on the Viva Connections / ACE scenario. (Voitanos)
• Highlights:
  • Added new template for ACE data visualization (line chart) in Viva Connections. (Voitanos)
  • Node.js v16 deprecation: v1.19 supports Node v18 as minimum. (Voitanos)
• Why it matters: It signalled a shift — toolchain dependency minimums rose and focus moved to richer UI experiences.

SPFx v1.20 (September 26, 2024)

• This release built on v1.19 with additional features in the ACE / Viva visualization domain. (Microsoft Learn)
• Highlights:
  • Introduced three new data-visualization chart types (bar chart, pie chart, donut chart) for ACE cards. (Microsoft Learn)
  • Introduced support for HTML-based Quick Views in ACEs (allowing arbitrary JS frameworks beyond adaptive-card JSON). (Microsoft Learn)
  • Fixed a key tooling bug: Webpack exception displaying [object Object] error (#9834) in prior versions. (Microsoft Learn)
• Why it matters: This release gave developers broader flexibility with UI and charting in Viva Connections scenarios, plus improved tooling stability.

SPFx v1.21 (April 23, 2025)

• The latest major release as of now. (Microsoft Learn)
• Highlights:
  • Node.js support moved to Node v22 only. (Microsoft Learn)
  • TypeScript updated to 5.x (default scaffold uses 5.3.3). (Microsoft Learn)
  • Introduced “flexible layout” sizing options in web-part manifest: allows custom web parts to participate in flexible canvas/grid layouts with properties like supportsDynamicResizing, defaultRowHeight, and defaultColumnWidth. (Microsoft Learn)
  • Viva Connections personalization support: end-users can add/remove cards if the manifest allows personalization. (Microsoft Learn)
  • Teams JS SDK updated to version 2.32. (Microsoft Learn)
  • The default debug manifest URL changed (for gulp serve): from …/temp/manifests.js to …/temp/build/manifests.js. This requires updates in custom tooling/pipelines. (Microsoft Learn)
• Why it matters: This version raises the baseline for toolchain and layout flexibility — critical if you are building modern SPFx solutions inside responsive grid layouts, Viva Connections dashboards, or multi-host scenarios. If your project is still on v1.18 or earlier, an upgrade is strongly recommended.

Why Upgrading Matters

Here are several key reasons why keeping your SPFx projects up-to-date is important:

1. Toolchain and runtime alignment: Node.js, TypeScript, Webpack, and other build tools evolve fast. Older versions may not support newer JS/TS language features, may create larger bundles, or may introduce compatibility risks.
2. Host-reach and packaging: As SPFx evolves, solutions increasingly target not just SharePoint but Teams, Viva, Outlook etc. New versions ensure better packaging, compatibility, and “multi-host” readiness.
3. Layout & UI flexibility: Modern pages, dashboards, responsive canvases and Viva Connections require more flexible layout options — e.g., manifest support for flexible resizing is only available in newer SPFx versions.
4. Bug-fixes & maintenance: Even if your project works fine on an older version, updates often fix subtle build or runtime bugs (e.g., the Webpack error in v1.20) and improve developer productivity.
5. Support & sustainability: Microsoft deprecates older runtimes over time (e.g., Node v16 removal) and focuses future investments in recent versions. Staying too far behind increases technical debt and risk.

Planning an Upgrade — Practical Checklist

If you’re managing SPFx projects and planning an upgrade, here is a recommended checklist:

• Assess current version: Determine which SPFx version your projects use (check @microsoft/sp-* packages in package.json).
• Review runtime prerequisites: For target version, verify Node.js version, TypeScript version, and other toolchain dependencies. For example, moving to v1.21 requires Node v22 and TS 5.x.
• Backup and branch: Before upgrading, create a branch (or copy) of your existing project so you can roll back if needed.
• Uninstall old packages: Per upgrade guidance, uninstall the previous SPFx version’s packages. For example: npm uninstall @microsoft/{spfx-package-name}@1.20 npm install @microsoft/{spfx-package-name}@latest --save --save-exact (From v1.20→v1.21 upgrade docs) (Microsoft Learn)
• Update project structure/tools: Update your Yeoman generator, gulp or build tasks, CI/CD pipelines if applicable. Pay attention to changed default settings (e.g., debug manifest URL change in v1.21).
• Test thoroughly in dev tenant: Run build, bundle, test in local workbench and tenant. Test behavior in SharePoint page, Teams tab (if applicable), Viva dashboard (if applicable).
• Validate customizations: Especially custom web parts and ACEs — verify manifest changes (e.g., flexible layout sizing) and UI behavior.
• Monitor performance and bundle size: Sometimes toolchain upgrades change bundle size or have side-effects on load time.
• Plan roll-out to production: Once validated, update npm dependencies, rebuild solution, package .sppkg, deploy to App Catalog, update sites.
• Update documentation and version baseline: Note the new SPFx version in your team’s documentation, and consider retiring older code templates.

Summary Table of Versions

Here is a table summarizing key SPFx versions discussed:

Conclusion

The evolution of SPFx reflects Microsoft’s push toward a modern development model: aligning with up-to-date web toolchains (Node/TypeScript), supporting responsive layouts and cross-host scenarios (SharePoint, Teams, Viva), and enabling richer UI experiences (ACE data visualizations, personalization, flexible layout).

If your development practice involves SPFx, you should view version upgrades not merely as “nice to haves” but as enablers of improved architecture, maintainability, performance, and user experience. That said, upgrades require planning: ensure your toolchain is compatible, test customizations carefully, and update your pipelines and documentation accordingly.