Master SharePoint Site Design with PnPjs and SPFx

Modern SharePoint development has evolved significantly, allowing developers to build scalable, maintainable, and interactive solutions. One of the most powerful combinations in this ecosystem is PnPjs and SPFx (SharePoint Framework) for site design and customization. In this blog, we will explore how to leverage PnPjs in SPFx to create professional site designs efficiently.

What is PnPjs?

PnPjs is an open-source JavaScript library maintained by the Microsoft Patterns & Practices (PnP) team. It simplifies SharePoint development by providing fluent, type-safe APIs to interact with:

SharePoint lists, libraries, and items
Site pages and site designs
Microsoft Graph for broader M365 integrations

Using PnPjs, developers can focus on business logic rather than handling complex REST API calls manually.

Why Use SPFx for Site Design?

The SharePoint Framework (SPFx) is the recommended client-side development model for building SharePoint customizations:

Fully supports modern SharePoint pages and web parts
Works with TypeScript, React, and other modern libraries
Integrates seamlessly with PnPjs
Ensures solutions are future-proof and maintainable

Combining SPFx with PnPjs allows developers to automate site design, create reusable components, and manage SharePoint content dynamically.

Setting Up SPFx with PnPjs

Step 1. Create a New SPFx Project

  
    yo @microsoft/sharepoint

Select the following options:

Web Part
React (for UI flexibility)
SharePoint Online only

This scaffolds a basic SPFx web part project.

Step 2. Install PnPjs

Inside your SPFx project folder, run:

  
    npm install @pnp/sp @pnp/logging @pnp/common @pnp/odata --save

These packages cover core SharePoint operations with logging and OData support.

Step 3. Configure PnPjs

Open your web part src/webparts/<YourWebPart>/<YourWebPart>.ts and initialize PnPjs:

  
    import { sp } from "@pnp/sp";
import { Web } from "@pnp/sp/webs";
import { spfi, SPFx } from "@pnp/sp";

export interface IMyWebPartProps {
  description: string;
}

export default class MyWebPart extends BaseClientSideWebPart<IMyWebPartProps> {
  private _sp: ReturnType<typeof spfi>;

  public onInit(): Promise<void> {
    return super.onInit().then(_ => {
      // Initialize PnPjs with SPFx context using spfi factory
      this._sp = spfi().using(SPFx(this.context));
    });
  }
}

This ensures that all subsequent PnPjs calls are aware of your SPFx context.

Using PnPjs to Design Sites

PnPjs allows you to create modern pages, add web parts, and configure site designs programmatically.

Creating a Site Design

To create a new site design, use the createSiteDesign method:

  
    import "@pnp/sp/site-designs";

const siteDesign = await sp.siteDesigns.createSiteDesign({
  SiteScriptIds: ["884ed56b-1aab-4653-95cf-4be0bfa5ef0a"],
  Title: "SiteDesign001",
  WebTemplate: "64", // 64 for Team site, 68 for Communication site
});

console.log(siteDesign.Title);

This method creates a site design that can be applied to new sites, incorporating predefined scripts and templates.

Applying a Site Design

To apply a site design to an existing site:

  
    await sp.siteDesigns.applySiteDesign(
  "75b9d8fe-4381-45d9-88c6-b03f483ae6a8",
  "https://contoso.sharepoint.com/sites/teamsite-pnpjs001"
);

This action applies the specified site design to the target site, automating the configuration process.

Retrieving Applied Site Designs

To fetch the site designs applied to a specific site:

  
    const appliedDesigns = await sp.web.siteDesigns(); 
console.log(appliedDesigns);

This retrieves a collection of site designs associated with the current site.

Managing Permissions

To set permissions for a site design, you can use the setSiteDesignRights method:

  
    await sp.siteDesigns.setSiteDesignRights({
  SiteDesignId: "75b9d8fe-4381-45d9-88c6-b03f483ae6a8",
  Principal: {
    PrincipalId: 12345,
    PrincipalType: "User",
  },
  Rights: ["View", "Edit"],
});

This assigns specific permissions to a user or group for the given site design.

Best Practices

Use TypeScript Interfaces: Keep your data strongly typed.
Leverage Async/Await: PnPjs methods are asynchronous; always handle errors gracefully.
Modularize Web Parts: Create reusable components for site pages or web parts.
Cache Responses: For frequently accessed data, caching improves performance.
Follow SPFx Security Guidelines: Avoid hardcoding sensitive data and use SharePoint permissions.

Advantages of This Approach

Faster Development: PnPjs reduces boilerplate REST API code.
Maintainable Solutions: SPFx ensures future-proofing and compatibility.
Interactive and Dynamic Sites: Easily update pages and components programmatically.
Seamless Microsoft 365 Integration: Extend beyond SharePoint using Microsoft Graph.

Conclusion

Leveraging PnPjs with SPFx for site design not only streamlines SharePoint development but also enhances maintainability and scalability. Whether you are creating modern pages, automating site designs, or building interactive web parts, this approach empowers developers to focus on innovation rather than repetitive tasks.

Start experimenting with PnPjs in your SPFx projects today and watch your SharePoint sites transform into modern, dynamic platforms.