PnP Rich Text Editor in the SharePoint Framework (SPFx) webpart

This article provides a step-by-step guide to implementing the PnP Rich Text Editor in the SharePoint Framework (SPFx) web part.
The Rich Text Editor offers rich formatting, inline editing, and content saving capabilities directly within SharePoint pages.

📦 Install dependencies

Install the PnP React Controls library and dependencies:

npm install @pnp/spfx-controls-react --save --save-exact
npm install @pnp/sp --save --save-exact

🧩 Configure the component

Add the state interface for the Rich Text Editor:

export interface ISpfxPnpRichtextState {
  description: string;
  SuccessMessage: string;
}

Update your render function with the RichText control:

public render(): React.ReactElement<ISpfxPnpRichtextProps> {
  let tamil = (this.state.description === '') ? 'Dummy' : this.state.description;
  return (
    <div className={styles.spfxPnpRichtext}>
      <RichText isEditMode={true} value={this.state.description} onChange={this._onTextChange} />
      <br></br>
      <button className={styles.button} onClick={this._updateDescription}>Save</button>
      <br></br>
      <br></br>
      <label className={styles.label}>{this.state.SuccessMessage}</label>
    </div>
  );
}

💾 Save data to SharePoint

Add the following function to save the rich text content into a SharePoint list:

@autobind
private async _updateDescription() {
  console.log(this.state.description);
  await sp.web.lists.getByTitle("Teams").items.getById(1).update({
    Description: this.state.description
  });
  this.setState({ SuccessMessage: "Successfully saved" });
}

This function updates the Description field of a SharePoint list item and displays a success message after saving.

🚀 Deploy the solution

Once ready, build and package your solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file to your App Catalog, deploy it, and then add the web part to your SharePoint page.

🧭 Summary

You’ve successfully created a Rich Text Editor web part using PnP Controls in SPFx.
This web part enables inline editing, rich formatting, and content management directly within SharePoint pages.

📂 GitHub Source