Development + SPFx resources

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 (e.g. SharePoint Add-ins, JSLink, etc) are now deprecated.

Official resources

• Patterns and Practices Resources
• SharePoint development docs
  • SPFx docs
  • Microsoft Graph docs
  • Microsoft Graph Explorer - try out Graph queries
  • 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
• Sign up for your own Business Basic license - a dev/test tenant for $5/mo
• React Fluent UI
• SP Editor
• For back-end, consider Azure Integration Services (Functions, Logic Apps, API Management, etc)

Useful templates, samples, packages

• PnP Starter Kit (Microsoft 365)
• PnP SPFx Webparts
• PnP Starter Intranet (2016+)
• 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
• Vendor selection guidance (neutral) - StepTwo

Github resources

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

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, etc)
• shadcn/ui
• Aceternity UI - React component library
• Chart.js
• Recharts
• d3 discovery

Testing & dev tools

• 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/governance 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, etc.