I’ve been building SharePoint Framework (SPFx) solutions since the framework first launched, and over the years, I’ve used it to deliver custom web parts, page extensions, Microsoft Teams tabs, and Viva Connections dashboard cards for real enterprise clients across a wide range of Microsoft 365 environments.
SPFx is the official Microsoft-recommended development model for extending SharePoint Online, Microsoft Teams, and Microsoft Viva Connections — and if you’re serious about modern Microsoft 365 development, it’s the one framework you need to master.
On this page, I’ve organized every SPFx tutorial I’ve published on EnjoySharePoint by topic, so you can follow a clear, structured path from your very first web part through to Microsoft Graph API integrations, Fluent UI React components, SPFx extensions, and AI-ready solutions with SPFx 1.24.
I’ve also included clearly marked “Coming Soon” sections for the topics I’m actively writing — so you’ll always know what’s available now and what’s on the way.
These tutorials are based on real project experience and kept aligned with the latest Microsoft SPFx documentation. The current stable version as of June 2026 is SPFx 1.23, which requires Node.js 22 and TypeScript 5.3+. SPFx 1.24 — which introduces expanded AI and Copilot extensibility — is expected to reach general availability very soon.
What Is SharePoint Framework (SPFx)?
SharePoint Framework (SPFx) is Microsoft’s open-source, client-side development framework for building custom web parts, extensions, and adaptive card experiences in SharePoint Online, Microsoft Teams, and Microsoft Viva Connections.
It runs entirely in the browser — no server-side code, no elevated permissions, no farm solutions — and is built on standard web technologies including TypeScript, React, and Node.js.
Before SPFx existed, SharePoint developers relied on server-side Farm Solutions, Sandboxed Solutions, or JavaScript injection via Script Editor web parts. SPFx replaced all of those with a clean, secure, fully supported client-side model.
Every serious SharePoint customization in Microsoft 365 today is built on SPFx — whether you’re adding a custom web part to a SharePoint page, extending the page header and footer with an Application Customizer, adding toolbar action buttons via a ListView Command Set, or building an interactive Viva Connections dashboard card using Adaptive Card Extensions (ACE).
If you’re a SharePoint developer, consultant, or solution architect working on Microsoft 365, SPFx is the core development skill you need above all others.
Current SPFx Development Environment (June 2026)
Before you start any SPFx project, verify your development environment matches the currently supported stack. Using outdated Node.js versions is the single most common cause of broken SPFx builds and failed generator runs.
If you are using the Heft build system (introduced as the default build tool in newer SPFx versions), then you can refer to the table below:
| Component | Required Version |
|---|---|
| SPFx (current stable GA) | 1.23 |
| SPFx (upcoming) | 1.24 (expected June 2026 – AI & Copilot extensibility enhancements) |
| Build System | Heft (default build pipeline) |
| Node.js | 22.x LTS |
| TypeScript | 5.3.3+ |
| React | 17.x (React 18 expected in a future SPFx release) |
| Yeoman Generator | @microsoft/generator-sharepoint (latest) |
| Rush Stack / Heft | @rushstack/heft (included with SPFx projects) |
| Package Manager | npm or pnpm |
| Bundler | Webpack (managed internally by SPFx/Heft) |
| Task Runner | Heft (replaces direct gulp usage for most build operations) |
Notes
- Heft is now the primary build orchestrator for modern SPFx projects and is gradually replacing many traditional gulp-based build processes.
- Developers still use familiar commands such as
gulp serve, but under the hood SPFx relies increasingly on Heft and the Rush Stack toolchain. - New SPFx projects generated with recent versions automatically include the required Heft configuration and dependencies.
- Custom build customizations should preferably leverage Heft plugins and configuration instead of legacy gulp tasks where possible.
Here is a summary:
| Component | Version / Tool |
|---|---|
| SPFx | 1.23 |
| Node.js | 22.x LTS |
| TypeScript | 5.3.3+ |
| React | 17.x |
| Build Tool | Heft |
| Project Generator | @microsoft/generator-sharepoint |
| Package Manager | npm / pnpm |
| Module Bundler | Webpack (via SPFx & Heft) |
Quick note on SPFx 1.24: Microsoft has confirmed that SPFx 1.24 will introduce AI and Copilot extensibility options, making it possible to build Copilot-ready solutions natively within the SPFx framework. I will be covering these new features in a dedicated tutorial series as soon as 1.24 reaches GA. Watch the Coming Soon section below.
Getting Started with SharePoint Framework (SPFx)
If you’re new to SharePoint Framework, start with these tutorials. They cover the foundational patterns you’ll use on every project — how SPFx web parts access the SharePoint page context, how to render data inside a web part, how to add external CSS frameworks for styling, and how the Script Editor web part pattern fits into modern SharePoint.
These are the building blocks that everything else in SPFx builds on.
- How to Display the Current User Name in an SPFx Client-Side Web Part
- SPFx Script Editor Web Part: Build a Custom HTML, CSS and JavaScript Editor
- Script Editor Web Part in SharePoint Online Modern Pages
- How to Use Bootstrap in an SPFx Web Part for Responsive Styling
Working with SharePoint Data in SPFx
The most common real-world SPFx requirement is connecting a web part to live SharePoint list data — reading list items, binding them to UI components, and displaying them inside your custom web part.
These tutorials walk through exactly how to do that: how to read SharePoint list items from SPFx using the SharePoint REST API, how to bind that data to React dropdown components, and how to render it in a structured table layout inside your web part.
- SPFx: How to Bind a Dropdown with Items from a SharePoint List
- SPFx: Display SharePoint List Items in a Table Inside a Custom Web Part
- SPFx: Bind SharePoint List Items to a Fluent UI React Dropdown Component
Microsoft Graph API in SPFx
Microsoft Graph is the unified API gateway for all Microsoft 365 data — users, groups, SharePoint sites, OneDrive files, Teams channels, Outlook mail, and more. Calling Graph from inside an SPFx web part requires configuring the right API permissions in your solution manifest and handling tokens correctly.
These tutorials give you everything you need to make authenticated Graph API calls from SPFx, with working code you can adapt directly to your own projects.
- How to Use the Microsoft Graph API in an SPFx Web Part: Complete Guide
- How to Call the SharePoint REST API via Microsoft Graph API in SPFx
SharePoint Framework (SPFx) Extensions
SPFx Extensions are a separate category of SPFx components designed to customize the SharePoint interface in ways that web parts cannot.
There are three extension types: Application Customizers (inject persistent UI into the page header and footer), ListView Command Sets (add custom toolbar buttons and context menu items to list and library views), and Field Customizers (change how a specific column renders in a list view).
Extensions run on every page the user visits — not just pages where a web part has been added — making them ideal for organization-wide customizations like a consistent branded header, a help button, or a custom column display.
Coming soon in this section:
- SPFx Field Customizer Extension: Full Step-by-Step Example
- SPFx ListView Command Set Extension: Add Custom Buttons to the SharePoint Toolbar
- SPFx Application Customizer: Build a Custom Header and Footer for Every SharePoint Page
Fluent UI & React Components in SPFx
Microsoft Fluent UI React is the official component library for SPFx development. It provides the full set of pre-built, accessible UI components that match SharePoint’s visual design language — dropdowns, buttons, panels, dialogs, lists, spinners, and more.
Using Fluent UI components in your SPFx web parts means your custom solutions look and feel like native SharePoint, which improves user adoption and reduces design time. These tutorials show you how to use Fluent UI React components inside SPFx with real, working examples.
- SPFx Accordion Web Part Built with React and Fluent UI
- Office UI Fabric React GroupedList Component in an SPFx Web Part
- SPFx Fluent UI React Dropdown Component Bound to SharePoint List Data
Setting Up the SPFx Development Environment (Coming Soon)
A correctly configured development environment is the foundation of every successful SPFx project. The wrong version of Node.js alone will break your entire build.
The tutorials in this section will walk through installing Node.js 22, setting up the Yeoman SPFx generator, configuring gulp, and verifying your environment is ready for SPFx 1.23 development — and show you how to upgrade existing projects when new SPFx versions are released.
- How to Install Node.js 22 and Set Up Your SPFx 1.23 Development Environment from Scratch
- Yeoman Generator for SPFx: How to Scaffold Your First SharePoint Framework Project
- SPFx Project Structure Explained: What Every File and Folder Does
- How to Upgrade an SPFx Project to the Latest Version (1.21 to 1.23 Step by Step)
Building Your First SPFx Web Part (Coming Soon)
These tutorials will take you from a blank SPFx project all the way to a working, deployed web part on a live SharePoint Online site — covering property pane configuration, local debugging with the Workbench, bundle optimization, and deployment to both site-level and tenant-level app catalogs.
- How to Create Your First Hello World SPFx Client-Side Web Part (SPFx 1.23)
- SPFx Property Pane Configuration: Text, Dropdown, Toggle, and Slider Controls with Working Examples
- How to Package and Deploy an SPFx Solution to the SharePoint App Catalog
- How to Serve and Debug an SPFx Web Part Locally Using the SharePoint Workbench
- SPFx Web Part with React: A Complete Step-by-Step Development Guide
Reading & Writing Data with PnPJS in SPFx (Coming Soon)
PnPJS (@pnp/sp) is the most widely used SharePoint data access library for SPFx development. It wraps the SharePoint REST API in a clean, chainable, promise-based syntax — making it far faster to write, read, and maintain list operations than using raw fetch calls.
The tutorials in this section will cover setting up PnPJS in SPFx and using it to perform real CRUD operations on SharePoint lists and document libraries.
- How to Set Up PnPJS (@pnp/sp) Inside an SPFx Web Part
- How to Read SharePoint List Items Using PnPJS in SPFx
- How to Create, Update, and Delete SharePoint List Items Using PnPJS in SPFx
- How to Upload a File to a SharePoint Document Library from an SPFx Web Part Using PnPJS
SPFx Extensions: Advanced Patterns (Coming Soon)
Once you’re comfortable with the Application Customizer basics, the next step is building more powerful extension solutions — custom column rendering with Field Customizers, rich action menus with ListView Command Sets, and persistent, tenant-wide page customizations using Application Customizers deployed to the tenant app catalog.
These upcoming tutorials will cover all three extension types with full production-ready examples.
- SPFx Field Customizer: How to Customize the Way a SharePoint Column Renders in a List View
- SPFx ListView Command Set: Add Custom Action Buttons to Any SharePoint List or Library Toolbar
- SPFx Application Customizer: Build a Persistent Branded Header and Footer Across Every SharePoint Page
SPFx & Microsoft Teams (Coming Soon)
SPFx web parts can be surfaced directly inside Microsoft Teams as personal tabs and group channel tabs — without any additional server-side infrastructure or Azure hosting. Your SPFx code runs in SharePoint Online and is surfaced inside Teams through SharePoint’s native Teams integration.
These upcoming tutorials will show you exactly how to configure your SPFx solution for Teams, including how to read the Teams-specific context that becomes available when your web part runs inside a Teams tab.
- How to Build a Microsoft Teams Personal Tab Using an SPFx Web Part
- SPFx Teams Tab: Complete Setup and Deployment Guide for SharePoint Framework 1.23
Viva Connections & Adaptive Card Extensions (Coming Soon)
Adaptive Card Extensions (ACE) are a type of SPFx component introduced specifically for the Microsoft Viva Connections experience. They render as interactive cards on the Viva Connections dashboard — allowing developers to surface SharePoint data, trigger Power Automate flows, and display personalized Microsoft 365 content directly in the Viva home experience.
As organizations roll out Viva Connections as part of their Microsoft 365 intranet strategy, ACE development is becoming one of the most in-demand SPFx skills.
- Introduction to SPFx Adaptive Card Extensions (ACE): What They Are and How to Build Your First One
- Build a Viva Connections Dashboard Card Using SPFx Adaptive Card Extensions
SPFx & Copilot / AI Features (Coming Soon — SPFx 1.24+)
Microsoft has confirmed that SPFx 1.24 will introduce expanded AI and Copilot extensibility options, enabling SPFx developers to build Copilot-ready solutions natively within the SharePoint Framework.
This is the most significant direction shift in SPFx since the introduction of ACE in SPFx 1.13 — and it marks the beginning of a new chapter where custom Microsoft 365 solutions are AI-integrated by design rather than by addition.
I will be publishing dedicated tutorials for these capabilities as soon as SPFx 1.24 reaches general availability.
- Building AI-Ready SPFx Solutions with SharePoint Framework 1.24
- How to Extend Microsoft 365 Copilot Using Custom SPFx Web Parts
All SPFx Tutorials: Complete Index
Below is the complete list of every SPFx tutorial currently published on EnjoySharePoint. Use Ctrl+F (Windows) or Cmd+F (Mac) to search for any topic.
Getting Started
- Display the Current User Name in an SPFx Client-Side Web Part
- SPFx Script Editor Web Part
- Script Editor Web Part in SharePoint Online Modern Pages
- Use Bootstrap in an SPFx Web Part
SharePoint Data & List Binding
- Bind a Dropdown from a SharePoint List in SPFx
- Display SharePoint List Items in a Table Using SPFx
- Bind SharePoint List Items to a Fluent UI React Dropdown in SPFx
Microsoft Graph API
SPFx Extensions
Fluent UI React & Components
Explore Related Tutorials
SPFx connects directly with the rest of the Microsoft 365 platform. Use these hubs to go deeper on any related technology:
- SharePoint Tutorials — Lists, libraries, permissions, REST API, web parts, and everything SharePoint Online
- Power Apps Tutorials — Build canvas apps that embed inside SharePoint pages and Teams tabs
- Power Automate Tutorials — Automate workflows triggered by SharePoint list and library events
- Power BI Tutorials — Reports, dashboards, Visualization, DAX, etc.
- PowerShell Tutorials — Manage SPFx app catalog deployments, site configurations, and tenant settings with PowerShell
Free SPFx and SharePoint Development Training
If you want to learn SharePoint Framework and the broader Microsoft 365 developer stack in a structured, project-based format — going beyond individual tutorials into complete real-world implementation patterns — I offer a free training course that covers the core SharePoint and Power Platform skills you need for production Microsoft 365 work.
Frequently Asked Questions About SharePoint Framework
What is SharePoint Framework (SPFx), and what can I build with it?
SharePoint Framework (SPFx) is Microsoft’s official, open-source, client-side development model for building custom extensions in SharePoint Online, Microsoft Teams, and Microsoft Viva Connections. With SPFx, you can build three types of solutions: client-side web parts (custom UI blocks you add to SharePoint pages or Teams tabs), extensions (Application Customizers for header and footer UI, ListView Command Sets for toolbar buttons, and Field Customizers for column rendering), and Adaptive Card Extensions (interactive cards for the Viva Connections dashboard).
What version of Node.js do I need for SPFx in 2026?
As of June 2026, SPFx 1.23 — the current stable release — requires Node.js 22 LTS. Older Node.js versions (14, 16, and 18) are no longer supported by SPFx 1.21 and later. If you try to run the Yeoman generator or gulp build commands with an unsupported Node.js version, the build will fail. Always check the official SPFx compatibility matrix before starting a new project or upgrading an existing one.
Do I need to know React to develop SPFx solutions?
React is not technically required for every SPFx web part — you can build a basic web part with plain TypeScript. However, in practice, nearly all production SPFx development uses React because it integrates naturally with Fluent UI React (Microsoft’s official component library for SPFx), simplifies state management, and is the pattern Microsoft uses in all its own SPFx samples. Understanding React fundamentals — components, props, state, hooks, and the component lifecycle — will significantly accelerate your SPFx development and is essential for anything beyond the simplest web parts.
What is the difference between an SPFx web part and an SPFx extension?
An SPFx web part is a reusable UI component that a SharePoint page editor adds to a specific page — it only runs on pages where it has been explicitly placed. An SPFx extension, by contrast, runs at the site or tenant level regardless of which page the user is on. Application Customizers inject persistent UI (like a branded header or footer) on every page in a site or across the entire tenant. ListView Command Sets add custom toolbar buttons to every list or library view. Field Customizers change how a specific column renders in every list view where that column appears.
Can SPFx web parts run inside Microsoft Teams?
Yes. SPFx web parts can be surfaced as personal tabs and channel tabs inside Microsoft Teams without any additional server infrastructure or Azure app registration. Your SPFx solution runs in SharePoint Online and is exposed inside Teams through SharePoint’s native Teams integration. This means you can build a single SPFx web part and deploy it to both SharePoint pages and Microsoft Teams tabs from the same solution package — significantly reducing development and maintenance overhead.
