# Development + SPFx resources

> SharePoint Framework (SPFx) development resources for building custom Microsoft 365 apps. Includes React components, Microsoft Graph API docs, PnP tools, and design resources for extending Teams and SharePoint.

Source: https://ali.id.au/platforms/m365-sharepoint/development/ (last edited 2026-10-12)

## Official resources

* [Patterns and Practices Resources](https://pnp.github.io/)
* [SharePoint development docs](https://learn.microsoft.com/sharepoint/dev/)
  * [SPFx docs](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
  * [Microsoft Graph docs](https://learn.microsoft.com/graph/overview)
  * [Microsoft Graph Explorer](https://developer.microsoft.com/graph/graph-explorer) - try out Graph queries
  * [Microsoft Graph SDKs](https://learn.microsoft.com/graph/sdks/sdks-overview)
  * [Microsoft 365 Agents Toolkit](https://learn.microsoft.com/microsoftteams/platform/toolkit/agents-toolkit-fundamentals) (formerly Teams toolkit)
  * [Site designs and scripts](https://learn.microsoft.com/sharepoint/dev/declarative-customization/site-design-overview)
  * [List formatting](https://pnp.github.io/List-Formatting/)
  * [Power Platform docs](https://learn.microsoft.com/power-platform/)
* [Microsoft Learn for Developers](https://learn.microsoft.com/training/roles/developer/) - structured learning paths.
* [Microsoft Adoption Centre - Developers](https://adoption.microsoft.com/roles/developer/)
* [MS 365 Dev Blog](https://devblogs.microsoft.com/microsoft365dev/)

## Tools

* [MS 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program) - get a test environment (free E5 sandboxes are now limited to Visual Studio subscribers)
* [Sign up for *your own* Business Basic license](https://www.microsoft.com/microsoft-365/business/microsoft-365-business-basic) - a cheap dev/test tenant (~USD 7/mo)
* [SP Editor](https://www.reddit.com/r/sharepoint/comments/677cq0/sp_editor_this_chrome_extension_adds_a_sharepoint/)
* For back-end, consider [Azure Integration Services](https://www.youtube.com/watch?v=sbqhJsWhKAs&t=1s&pp=ygUkYXp1cmUgaW50ZWdyYXRpb24gc2VydmljZXMgbWVjYWhuaWNz) (Functions, Logic Apps, API Management, [more integration services](https://azure.microsoft.com/en-us/products/category/integration))

## Useful templates, samples, packages

* [PnP Starter Kit](https://github.com/pnp/sp-starter-kit) (Microsoft 365)
* [PnP SPFx Webparts](https://github.com/pnp/sp-dev-fx-webparts)
* [Sprocket 365](https://sprocket365.com) ([docs](https://sprocket365.com/docs/category/sprocket-web-parts)) -- note, I helped make this, it's a very low cost collection of high quality, maintained/supported SPFx webparts.
* [Vendor comparison (neutral/free) - Clearbox](https://www.clearbox.co.uk/2026-intranet-report-clearbox/)

### Github resources

* [MS365 OfficeDev GitHub](https://github.com/OfficeDev) & [SharePoint GitHub](https://github.com/SharePoint)
* [MS 365 PnP GitHub org](https://github.com/pnp)
* [Awesome SharePoint](https://github.com/BSUG/awesome-sharepoint) (legacy); more [Awesome lists](/practices/building/web-development/#awesome-lists) under Web development

### React components

* [Fluent UI React](https://developer.microsoft.com/fluentui) (by Microsoft)
* [PnP Reusable Controls](https://pnp.github.io/sp-dev-fx-controls-react/)
* More component libraries, forms and charts under [Web development](/practices/building/web-development/#frameworks-and-components)

## Testing & dev tools

* [CLI for Microsoft 365](https://pnp.github.io/cli-microsoft365/) - tenant management and SPFx project upgrades
* [PnPjs](https://pnp.github.io/pnpjs/) - fluent SharePoint/Graph library for SPFx
* [SP Editor](https://chromewebstore.google.com/detail/sp-editor/ecblfcmjnbbgaojblcpmjoamegpbodhd)
* More at this [reddit thread](https://www.reddit.com/r/sharepoint/comments/3xur5o/useful_sharepoint_dev_tools/)

## Design

See also: [UI design](/practices/building/ui-design/) for UX reading, design tools, type and colour.

---

See [DevOps & automation](/practices/building/devops-automation/) for CI/CD and monitoring, [Web development](/practices/building/web-development/) for frameworks and component libraries, and [communities](/platforms/m365-sharepoint/communities/) for blogs and feeds.