Development + SPFx resources

Start here

Start with the official resources for the development model, then look through the samples for a small example close to your problem. Check the sample’s dependencies before adopting it.

There are a few basic ways to extend SharePoint / MS 365. The main front-end tool is SharePoint Framework (SPFx), which extends Teams and SharePoint. It lets you host custom React Components (visual interactive components) on M365. Back-end data access is via Microsoft Graph API (REST, not graphQL), or less commonly, SharePoint APIs. You can also use Power Automate flows, Power Apps, and Power Platform extensions via PCF components.

More basic forms of customization in SharePoint include site designs/scripts, and list formatting. Many old approaches (such as SharePoint Add-ins and JSLink) are now deprecated.

Official resources

• Patterns and Practices Resources
• SharePoint development docs
  • SPFx docs
  • Microsoft Graph docs
  • Microsoft Graph Explorer - try out Graph queries
  • Microsoft Graph SDKs
  • Microsoft 365 Agents Toolkit (formerly Teams toolkit)
  • Site designs and scripts
  • List formatting
  • Power Platform docs
• Microsoft Learn for Developers - structured learning paths.
• Microsoft Adoption Centre - Developers
• MS 365 Dev Blog

Tools

• MS 365 Developer Program - get a test environment (free E5 sandboxes are now limited to Visual Studio subscribers)
• Sign up for your own Business Basic license - a cheap dev/test tenant (~USD 7/mo)
• React Fluent UI
• SP Editor
• For back-end, consider Azure Integration Services (Functions, Logic Apps, API Management, more integration services)

Useful templates, samples, packages

• PnP Starter Kit (Microsoft 365)
• PnP SPFx Webparts
• Sprocket 365 (docs) – note, I helped make this, it’s a very low cost collection of high quality, maintained/supported SPFx webparts.
• Vendor comparison (neutral/free) - Clearbox

Github resources

• MS365 OfficeDev GitHub & SharePoint GitHub
• MS 365 PnP GitHub org
• The Awesome Lists
  • Awesome .NET
  • Awesome React
  • Awesome SharePoint (legacy)

React components

• Fluent UI React (by Microsoft)
• PnP Reusable Controls
• RJSF (React JSON Schema Form), formik, and alternatives
• Kendo React UI
• TanStack - utilities for React (tables, queries, forms and more)
• shadcn/ui
• Aceternity UI - React component library
• Chart.js
• Recharts
• d3 discovery

Testing & dev tools

• CLI for Microsoft 365 - tenant management and SPFx project upgrades
• PnPjs - fluent SharePoint/Graph library for SPFx
• SP Editor
• More at this reddit thread

Visual design

Inspiration + reading

• Laws of UX
• Refactoring UI + book
• Design Resources
• Design Systems Repo
• css-tricks
• GoodUI

See more in the IA + Comms resource.

Design tools

• Figma + SP Web UI Kit or Penpot (Open figma alternative)
• Spline - 3D design in the browser
• Coolors - color scheme generator

See communities for blogs and feeds.