How to use a script editor in modern SharePoint sites

The SharePoint Script Editor is a web part that allows users to add and edit HTML, CSS, and JavaScript code on SharePoint pages. Using the Script Editor web part, users can add custom code to SharePoint pages to extend the functionality of the page or to add custom branding elements.

The Script Editor web part is available out of the box in classic but not in modern. In this article I’m explaining how you can get the script editor in your modern SharePoint sites.

How to use a script editor in modern SharePoint sites

Install the PnP modern script editor

Before installing the script editor you will need the web part package; you can download a compiled version from here, if you want to compile the project yourself the source code is available here.

  1. Open your app catalog and upload the SPPKG file
  2. Make sure the option Enable this app and add it to all sites is checked so you can reuse the web part in multiple site collections without the need of manually installing it in each site
  3. Click on Enable App

How to use a script editor in modern SharePoint sites

How to use the PnP modern script editor

It is important to note that using the Script Editor web part can also introduce security risks if the code is not properly vetted and tested. Therefore, it is important to follow best practices for SharePoint development and ensure that custom code is thoroughly reviewed and tested before deploying it to production environments.

To use your custom code in the modern SharePoint pages do the following:

  1. Edit the page where you want the code to be executed
  2. Click in the + icon to add a new web part
  3. Search for the Script Editor web part and add it to the page
  4. Click in the Edit markupbutton
  5. Adjust the settings as you need
    Building a SharePoint intranet with personalized content
  6. Click in the Edit HTML Code and add your HTML, CSS or JavaScript code to the editor

How to use a script editor in modern SharePoint sites

What can you do with the modern SharePoint script editor?

If you are still thinking about how the modern SharePoint script editor can be useful, have a look to the following examples and get some inspiration to transform your intranet.

No comments yet

Leave a Reply

I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.

%d bloggers like this: