How to use a script editor in modern SharePoint sites

By João Ferreira Mar 15, 2023 Development 0 Comments

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.

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 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
   

   

6. Click in the Edit HTML Code and add your HTML, CSS or JavaScript code to the editor

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.

• How to use video as a background in SharePoint pages header
• Create a personalized greetings message for your users
• How to display a full-width Power BI report in SharePoint