Send Emails in SPFx Using SP Utility

Overview

Sending emails is one of the most common functionalities in enterprise-level SharePoint solutions. From notifying users to triggering alerts and approvals, email communication is crucial.
Luckily, with SharePoint Framework (SPFx) and the PnP JS library, you can send rich HTML emails directly using sp.utility.sendEmail—without needing Power Automate, a backend API, or third-party tools.
In this blog, I will guide you step-by-step on how to send formatted emails in SPFx using the powerful yet simple sp.utility.sendEmail method.

Prerequisites

Before we dive into the code, make sure you have the following ready.

SPFx solution created using Yeoman generator.
PnP JS (@pnp/sp) library is installed in your solution.
Appropriate permission granted to the current user for sending emails.

Install PnP JS

If you haven’t already, run the following command in your solution directly.

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

Import Required Modules

At the top of your component or service file.

import { sp } from "@pnp/sp";
import "@pnp/sp/utility";
import { IEmailProperties } from "@pnp/sp/utility/types";

Implementation

Here’s the reusable method that allows you to send emails using sp.utility.sendEmail from your SPFx web part or extension.

public async sendEmail(to: string[], cc: string[], subject: string, body: string) {
  const emailProps: IEmailProperties = {
    To: to,
    CC: cc,
    Subject: subject,
    Body: body,
    AdditionalHeaders: {
      "content-type": "text/html"
    }
  };

  try {
    console.log("Sending email with the following details:", emailProps);

    await sp.utility.sendEmail(emailProps);

    console.log("Email delivered successfully.");
  } catch (error) {
    console.error("Failed to send email:", error);
  }
}

Explanation

To: An Array of recipient email addresses.
CC: Array of CC recipients.
Subject: Email subject line.
Body: Email body, supports both plain text and HTML.
AdditionalHeaders: Optional. If your body is HTML-formatted, set "content-type": "text/html" to ensure proper rendering.

Example Usage

You can trigger the email function on a button click or event handler like this.

this.sendEmail(
  ["[email protected]"],
  ["[email protected]"],
  "SPFx Email Notification",
  "<p>Hello <strong>User</strong>,<br />This is a test email from SPFx.</p>"
 );

Permission Consideration

You do not need the Microsoft Graph API to use this method. The SharePoint REST API is used behind the scenes by sp.utility.sendEmail. Make sure the API has permission to send emails. In your package-solution.json, add the following under webApiPermissionRequests, if needed.

"webApiPermissionRequests": [
 {
   "resource": "Microsoft Graph",
   "scope": "Mail.Send"
 }
]

Note. If you're using only SharePoint APIs, ensure that your SPFx solution has the necessary SharePoint permissions and is approved in the tenant app catalog.

Benefits of Using sp.utility.sendEmail

No backend or Power Automate dependency.
Lightweight and easy to integrate into any SPFx component.
Supports HTML and plain text email formats.
Encourages reusability across components or solutions.
No external configuration is required if the user has default SharePoint email rights.
Ideal for alerts, notifications, and internal workflows.

Pro Tips

Avoid sending emails in loops—consider batching where possible.
Test in development/staging environments before live rollout.
Sanitize user input in the email body to avoid script injection.
Use environment-based logic to control when and where emails are sent.
Format HTML correctly for compatibility across different mail clients.

Conclusion

With just a few lines of code, you can send dynamic, formatted HTML emails directly from your SPFx web part using sp.utility.sendEmail method. It’s reliable, efficient, and works perfectly in SPFx environments for sending notifications without any server dependency.

This method is perfect for building quick notifications and alerts in your SharePoint solutions, especially when you want to keep things simple and inside the SPFx ecosystem.

If you found this helpful, do not forget to share and comment!