Modern Script Editor Web Part using SharePoint Framework (SPFx)

In classic SharePoint sites, the script editor webpart is available, but in modern SharePoint Online sites, it is not available due to security and performance considerations. To achieve similar functionality, we can create an SPFx React-based script editor webpart.

In this article, I will explain how to create a script editor webpart for the SharePoint Online sites using SPFx with both React and No JavaScript framework, along with examples.

SPFx React Script Editor Webpart

The script editor webpart is used to inject some custom JavaScript, HTML, and CSS into the modern SharePoint pages so that it renders that code in the SharePoint modern pages. Now, let’s see how to create this script editor webpart using the SPFx React framework.

1. Open the command prompt. Create a directory for the SPFx solution and navigate to it.

md SPFxScriptEditorSol

cd SPFxScriptEditorSol

2. Run Yeoman SharePoint Generator to create the solution.

yo @microsoft/sharepoint

Yeoman generator will present you with a wizard that asks questions about the solution to be created.

• What is your solution name? Hit Enter to have a default name, or type in any other name for your solution SPFxScriptEditorSol
• Which type of client-side component to create? Select option – WebPart
• Add new Web part to solution sp-fx-script-editor-sol.
• What is your Web part name? Hit enter to select the default name or type in any other name. Type name – ScriptEditor
• Which template would you like to use? React

3. In the command prompt, type the below command to open the solution in VS Code editor-> ” code .“

4. Go to the “IScriptEditorProps.ts” file and copy and paste the code below.

export interface IScriptEditorProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  markup: string;
}

Here, we added the markup, which is a string data type property.

5. Then, open the “ScriptEditorWebPart.ts” file and update the interface code, render() method and getPropertyPaneConfiguration, as given below:

export interface IScriptEditorWebPartProps {
  description: string;
   markup: string;
}

  public render(): void {
    const element: React.ReactElement<IScriptEditorProps> = React.createElement(
      ScriptEditor,
      {
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        hasTeamsContext: !!this.context.sdks.microsoftTeams,
        userDisplayName: this.context.pageContext.user.displayName,
        markup: this.properties.markup
      }
    );

    ReactDom.render(element, this.domElement);
  }

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                PropertyPaneTextField('markup', {
                label: "Enter HTML/Script",
                multiline: true,
                resizable: true
              })
              ]
            }
            
          ]
        }
      ]
    };
  }

6. Now, update the “ScriptEditor.tsx” file code with the code below.

import * as React from 'react';
import styles from './ScriptEditor.module.scss';
import type { IScriptEditorProps } from './IScriptEditorProps';
import { escape } from '@microsoft/sp-lodash-subset';

export default class ScriptEditor extends React.Component<IScriptEditorProps> {
   private containerRef = React.createRef<HTMLDivElement>();
   public componentDidMount(): void {
    this.renderMarkup();
  }

  public componentDidUpdate(prevProps: IScriptEditorProps): void {
    if (prevProps.markup !== this.props.markup) {
      this.renderMarkup();
    }
  }

  private renderMarkup(): void {
    if (this.containerRef.current) {
      const container = this.containerRef.current;
      container.innerHTML = '';
      container.innerHTML = this.props.markup || '';
      const scripts = container.getElementsByTagName('script');
      for (let i = 0; i < scripts.length; i++) {
        const script = document.createElement('script');
        if (scripts[i].src) {
          script.src = scripts[i].src; // external script
        } else {
          script.text = scripts[i].innerText; // inline script
        }
        document.body.appendChild(script);
      }
    }
  }
  public render(): React.ReactElement<IScriptEditorProps> {
    const {
      description,
      isDarkTheme,
      environmentMessage,
      hasTeamsContext,
      userDisplayName
    } = this.props;

    return (
      <section className={`${styles.scriptEditor} ${hasTeamsContext ? styles.teams : ''}`}>
        <div className={styles.welcome}>
          <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
          <h2>Well done, {escape(userDisplayName)}!</h2>
          <div>{environmentMessage}</div>
          <div>Web part property value: <strong>{escape(description)}</strong></div>
        </div>
          <div ref={this.containerRef}></div>
      </section>
    );
  }
}

Here,

• private containerRef = Create a containerRef to target a div where the user markup will be rendered.
• Added componentDidMount and componentDidUpdate to render the markup property script whenever it changes.
• renderMarkup()=This function takes HTML content, shows it on the page, and runs any JavaScript inside it.
  • container.innerHTML = ”; It removes the old HTML from the container.
  • container.innerHTML = this.props.markup || ”; It displays the new HTML provided to the component so it appears on the page.
  • const scripts = container.getElementsByTagName(‘script’); It finds any <script> elements in the inserted HTML because browsers don’t execute them automatically.
  • for (let i = 0; i < scripts.length; i++) {} It iterates over all found scripts to process them one by one.
  • const script = document.createElement(‘script’); This will create a new script element that can be added to the DOM and executed.
  • The if condition has a src; it loads it from the url, which is an external script. Otherwise, it copies inline JavaScript code.
  • document.body.appendChild(script); It appends the script to the page, causing the browser to execute it and make the content interactive.
• Added <div ref ={this.containerRef}></div> in render to show user HTML/JS.

That’s it, save the changes and test it locally in the workbench by running the gulp serve command. In the example below, I just added an H2 tag in the webpart property pane, and it is displaying in the webpart.

Below, I added some examples of HTML scripts so you can provide them in the webpart property pane and check how it is rendering.

Example 1: This example displays the selected colour in the text box.

<div style="padding:15px; border:2px solid #0078d4; border-radius:8px; max-width:1300px;">
  <h3>Background Color Changer</h3>
  <label for="colorSelect">Choose a color:</label>
  <select id="colorSelect" style="margin:5px 0; padding:5px; width:100%;">
    <option value="">--Select--</option>
    <option value="#FFDDC1">Peach</option>
    <option value="#C1FFD7">Mint</option>
    <option value="#C1D4FF">Sky Blue</option>
  </select>

  <div id="colorBox" style="margin-top:10px; height:100px; border:1px solid #ccc;"></div>
</div>

<script>
  document.getElementById('colorSelect').addEventListener('change', function() {
    var color = this.value;
    document.getElementById('colorBox').style.backgroundColor = color;
  });
</script>

Example 2: This example contains a text input control where you can enter your name. When you click the button control, a greeting message with the given name will be displayed.

<div style="border: 2px solid #0078d4; padding: 15px; border-radius: 8px; max-width: 1200px;">
  <h2 style="color:#0078d4;">Welcome to SPFx Test!</h2>
  <p>This is a sample HTML content to test in the Script Editor web part.</p>

  <label for="nameInput">Enter your name:</label>
  <input type="text" id="nameInput" placeholder="Your name" style="margin:5px 0; padding:5px; width:100%;">
  
  <button id="greetBtn" style="background-color:#0078d4; color:white; border:none; padding:8px 12px; cursor:pointer; border-radius:4px;">
    Greet Me
  </button>
  
  <p id="greetMessage" style="margin-top:10px; font-weight:bold;"></p>
</div>

<script>
  document.getElementById('greetBtn').addEventListener('click', function() {
    var name = document.getElementById('nameInput').value;
    var message = name ? 'Hello, ' + name + '! Welcome to SPFx.' : 'Please enter your name.';
    document.getElementById('greetMessage').innerText = message;
  });
</script>

Example 3: This example will render with two text input controls, where you can provide your SharePoint site URL and site ID (optional). By clicking the Load lists button, it will retrieve all the SharePoint lists into the dropdown control.

Additionally, checking the ‘Include hidden lists’ will also include system lists in the dropdown. Then you can select any list name and rename it by providing the new list name and clicking the “Rename List” button. For refreshing, click “Reload Lists”. At the bottom, you can also view the logs.

<div id="renameListContainer" 
     style="font-family:Segoe UI,Arial,Helvetica,sans-serif;
            max-width:720px;
            margin:12px 0;
            padding:16px;
            border:1px solid #e1e1e1;
            border-radius:8px;
            background:#fafafa;
            box-shadow:0 1px 3px rgba(0,0,0,0.1);">

  <h3 style="margin:0 0 12px 0;">Rename SharePoint List</h3>

  <div style="margin-bottom:10px;">
    <label style="font-size:13px;color:#333;">Site URL (optional):</label><br/>
    <input id="siteUrl" type="text" 
           style="width:100%;padding:8px;margin-top:4px;
                  border:1px solid #ccc;border-radius:4px;box-sizing:border-box;"
           placeholder="https://yourtenant.sharepoint.com/sites/yoursite" />
  </div>

  <div style="margin-bottom:10px;">
    <label style="font-size:13px;color:#333;">Site ID (optional):</label><br/>
    <input id="siteId" type="text" 
           style="width:100%;padding:8px;margin-top:4px;
                  border:1px solid #ccc;border-radius:4px;box-sizing:border-box;"
           placeholder="GUID like 01234567-89ab-cdef-0123-456789abcdef" />
  </div>

  <div style="margin-bottom:10px;">
    <label><input id="chkIncludeHidden" type="checkbox" /> Include hidden lists</label>
  </div>

  <div style="margin-bottom:10px;">
    <button id="btnLoadLists"
            style="padding:8px 12px;margin-right:8px;
                   background:#0078d4;color:white;border:none;border-radius:4px;cursor:pointer;">
      Load Lists
    </button>
  </div>

  <div style="margin-bottom:10px;">
    <label style="font-size:13px;color:#333;">Select List:</label><br/>
    <select id="ddlLists" 
            style="width:100%;padding:8px;margin-top:4px;
                   border:1px solid #ccc;border-radius:4px;box-sizing:border-box;">
      <option value="">-- Lists will appear after loading --</option>
    </select>
  </div>

  <div style="margin-bottom:10px;">
    <label style="font-size:13px;color:#333;">New Title for selected list:</label><br/>
    <input id="txtNewName" type="text"
           style="width:100%;padding:8px;margin-top:4px;
                  border:1px solid #ccc;border-radius:4px;box-sizing:border-box;"
           placeholder="Enter new list title" />
  </div>

  <div style="margin-bottom:12px;">
    <button id="btnRenameList"
            style="padding:9px 14px;background:#107c10;color:white;
                   border:none;border-radius:4px;cursor:pointer;">
      Rename List
    </button>
    <button id="btnReload"
            style="padding:9px 14px;margin-left:8px;background:#e81123;
                   color:white;border:none;border-radius:4px;cursor:pointer;">
      Reload Lists
    </button>
  </div>

  <div id="msg" style="margin-top:10px;font-size:13px;color:#333;"></div>
  <div id="debugConsole" style="margin-top:8px;font-size:12px;color:#666;"></div>
</div>

<script type="text/javascript">
(function () {
  const siteUrlInput = document.getElementById('siteUrl');
  const siteIdInput = document.getElementById('siteId');
  const loadBtn = document.getElementById('btnLoadLists');
  const reloadBtn = document.getElementById('btnReload');
  const ddl = document.getElementById('ddlLists');
  const includeHiddenChk = document.getElementById('chkIncludeHidden');
  const msg = document.getElementById('msg');
  const debug = document.getElementById('debugConsole');
  const renameBtn = document.getElementById('btnRenameList');
  const newNameInput = document.getElementById('txtNewName');

  if (window._spPageContextInfo && window._spPageContextInfo.webAbsoluteUrl)
    siteUrlInput.value = window._spPageContextInfo.webAbsoluteUrl;

  function logDebug(text) {
    console.log('[ListRename] ' + text);
    debug.innerText = new Date().toLocaleTimeString() + ' — ' + text;
  }

  function showMessage(html, isError) {
    msg.innerHTML = html;
    msg.style.color = isError ? 'red' : 'green';
  }

  async function fetchJson(url, options) {
    logDebug('fetch: ' + url);
    const res = await fetch(url, options);
    if (!res.ok) {
      const t = await res.text().catch(()=> '');
      throw new Error('HTTP ' + res.status + ' ' + res.statusText + (t? ' — ' + t : ''));
    }
    const ct = res.headers.get('content-type') || '';
    return ct.includes('application/json') ? res.json() : null;
  }

  async function getRequestDigest(targetSiteUrl) {
    try {
      const el = document.getElementById('__REQUESTDIGEST');
      if (el && el.value) return el.value;

      logDebug('Requesting contextinfo for site: ' + targetSiteUrl);
      const res = await fetch(targetSiteUrl.replace(/\/$/, '') + '/_api/contextinfo', {
        method: 'POST',
        headers: { 'Accept': 'application/json;odata=nometadata' }
      });
      const data = await res.json();
      if (data?.FormDigestValue) return data.FormDigestValue;
      if (data?.GetContextWebInformation?.FormDigestValue)
        return data.GetContextWebInformation.FormDigestValue;
      if (data?.d?.GetContextWebInformation?.FormDigestValue)
        return data.d.GetContextWebInformation.FormDigestValue;
      throw new Error('FormDigestValue not found');
    } catch (e) {
      console.error('Error retrieving form digest:', e);
      throw new Error('Could not obtain form digest (contextinfo).');
    }
  }

  async function resolveSiteUrlFromId(siteId) {
    const base = window._spPageContextInfo?.siteAbsoluteUrl?.replace(/\/$/, '');
    if (!base) throw new Error('Cannot resolve site ID — no context.');
    const info = await fetchJson(
      base + "/_api/SPSiteManager/GetSiteById('" + siteId + "')",
      { method: 'POST', headers: { 'Accept': 'application/json;odata=nometadata','Content-Type':'application/json;odata=nometadata'} }
    );
    if (info?.SiteUrl) return info.SiteUrl;
    if (info?.d?.SiteUrl) return info.d.SiteUrl;
    throw new Error('Could not resolve Site URL from ID.');
  }

  async function loadLists() {
    showMessage('Loading lists...', false);
    ddl.innerHTML = '<option>Loading...</option>';
    let targetSiteUrl = siteUrlInput.value.trim();
    const siteId = siteIdInput.value.trim();
    const includeHidden = includeHiddenChk.checked;

    try {
      if (!targetSiteUrl && siteId)
        targetSiteUrl = await resolveSiteUrlFromId(siteId);
      if (!targetSiteUrl)
        targetSiteUrl = window._spPageContextInfo?.webAbsoluteUrl;
      if (!targetSiteUrl)
        throw new Error('No site URL available.');

      const query = targetSiteUrl.replace(/\/$/, '') + "/_api/web/lists?$select=Title,Id,Hidden&$top=5000";
      const data = await fetchJson(query, { headers: { 'Accept': 'application/json;odata=nometadata' } });
      const values = data?.value || data?.d?.results;
      if (!Array.isArray(values)) throw new Error('Unexpected response shape.');

      ddl.innerHTML = '<option value="">-- Select a list --</option>';
      let count = 0;
      for (const l of values) {
        if (!includeHidden && (l.Hidden === true || String(l.Hidden) === 'true')) continue;
        const opt = document.createElement('option');
        opt.value = l.Id;
        opt.textContent = l.Title || '(no title)';
        ddl.appendChild(opt);
        count++;
      }
      showMessage(`Loaded ${count} list(s) from ${targetSiteUrl}`, false);
    } catch (err) {
      ddl.innerHTML = '<option>-- error --</option>';
      showMessage('Error loading lists: ' + err.message, true);
      console.error(err);
    }
  }

  async function renameSelectedList() {
    const selectedId = ddl.value;
    const newTitle = newNameInput.value.trim();
    let targetSiteUrl = siteUrlInput.value.trim();
    const siteId = siteIdInput.value.trim();

    if (!selectedId) return showMessage('Please select a list.', true);
    if (!newTitle) return showMessage('Enter a new title.', true);

    try {
      if (!targetSiteUrl && siteId)
        targetSiteUrl = await resolveSiteUrlFromId(siteId);
      if (!targetSiteUrl)
        targetSiteUrl = window._spPageContextInfo?.webAbsoluteUrl;
      if (!targetSiteUrl)
        throw new Error('Site URL not available.');

      showMessage('Renaming list...', false);
      const digest = await getRequestDigest(targetSiteUrl);

      const endpoint = targetSiteUrl.replace(/\/$/, '') + "/_api/web/lists(guid'" + selectedId + "')";
      const res = await fetch(endpoint, {
        method: 'POST',
        headers: {
          'Accept': 'application/json;odata=nometadata',
          'Content-Type': 'application/json;odata=nometadata',
          'X-RequestDigest': digest,
          'IF-MATCH': '*',
          'X-HTTP-Method': 'MERGE'
        },
        body: JSON.stringify({ 'Title': newTitle })
      });

      if (res.ok || res.status === 204) {
        showMessage(' List renamed to "' + newTitle + '"', false);
        newNameInput.value = ''; //  clear input after success
        ddl.value = '';          // optional: reset dropdown too
        await loadLists();
      } else {
        const text = await res.text().catch(()=> '');
        throw new Error('Rename failed: ' + text);
      }
    } catch (err) {
      showMessage('Error renaming list: ' + (err.message||err), true);
      console.error(err);
    }
  }

  loadBtn.addEventListener('click', e => { e.preventDefault(); loadLists(); });
  reloadBtn.addEventListener('click', e => { e.preventDefault(); loadLists(); });
  renameBtn.addEventListener('click', e => { e.preventDefault(); renameSelectedList(); });

  setTimeout(() => loadLists(), 300);
})();
</script>

In this code, I used the REST API to get the list’s names and to perform the rename action.

This way, we can create a SPFx React script editor web part to render the HTML and JavaScript code in it.

SPFx No Framework Script Editor Webpart

In this section, we’ll learn how to create the SPFx script editor webpart using the No framework. Follow the steps below to achieve it.

1. Create an SPFx webpart by following the steps I mentioned in the previous section, make sure the webpart template is No Framework.
2. Then, open the “ScriptEditorNfWebPart.ts” file and update the code with the code below.

import { Version } from '@microsoft/sp-core-library';
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import type { IReadonlyTheme } from '@microsoft/sp-component-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './ScriptEditorNfWebPart.module.scss';
import * as strings from 'ScriptEditorNfWebPartStrings';

export interface IScriptEditorNfWebPartProps {
  description: string;
  markup: string; 
}

export default class ScriptEditorNfWebPart extends BaseClientSideWebPart<IScriptEditorNfWebPartProps> {

  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = '';

  public render(): void {
  this.domElement.innerHTML = `
    <section class="${styles.scriptEditorNf} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
      <div class="${styles.welcome}">
        <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
        <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
        <div>${this._environmentMessage}</div>
        <div>Web part property value: <strong>${escape(this.properties.description)}</strong></div>
      </div>
      <div id="markupContainer"></div>
    </section>
  `;

  this._renderMarkup();
}

  protected onInit(): Promise<void> {
    return this._getEnvironmentMessage().then(message => {
      this._environmentMessage = message;
    });
  }
  private _renderMarkup(): void {
  const container = this.domElement.querySelector("#markupContainer");
  if (container) {
    container.innerHTML = this.properties.markup || "";

    // Execute any <script> tags
    const scripts = container.getElementsByTagName("script");
    for (let i = 0; i < scripts.length; i++) {
      const oldScript = scripts[i];
      const newScript = document.createElement("script");

      if (oldScript.src) {
        newScript.src = oldScript.src; // external script
      } else {
        newScript.text = oldScript.innerText; // inline script
      }

      document.body.appendChild(newScript);
    }
  }
}



  private _getEnvironmentMessage(): Promise<string> {
    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
      return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
        .then(context => {
          let environmentMessage: string = '';
          switch (context.app.host.name) {
            case 'Office': // running in Office
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
              break;
            case 'Outlook': // running in Outlook
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
              break;
            case 'Teams': // running in Teams
            case 'TeamsModern':
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            default:
              environmentMessage = strings.UnknownEnvironment;
          }

          return environmentMessage;
        });
    }

    return Promise.resolve(this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment);
  }

  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
    if (!currentTheme) {
      return;
    }

    this._isDarkTheme = !!currentTheme.isInverted;
    const {
      semanticColors
    } = currentTheme;

    if (semanticColors) {
      this.domElement.style.setProperty('--bodyText', semanticColors.bodyText || null);
      this.domElement.style.setProperty('--link', semanticColors.link || null);
      this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered || null);
    }

  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
                ,
              PropertyPaneTextField('markup', {
                label: "Enter HTML/Script",
                multiline: true,
                resizable: true
              })
              ]
            }
          ]
        }
      ]
    };
  }
}

Here,

• Added markup as a new webpart property, which is a multiline text field.
• _renderMarkup(), which takes the scripts we enter in the property pane and renders them in the web part.
• this._renderMarkup(); with this line, we are calling the method within the render() method.

Save the changes and run in the local workbench, you’ll see the same webpart that we have seen above, only the change is the framework we used to build this SPFx script editor web part.

I hope you found this article helpful!, Here I have explained how to create an SPFx script editor webpart with both React and No JavaScript frameworks, so that we can inject some HTML, CSS and JavaScript code that will be rendered in modern SharePoint site pages.

Also, you may like:

• Use Microsoft Graph API in SPFx Web Parts
• Give Unique Permissions For a SharePoint Library
• Display SharePoint List Items in a SPFX Web Part [Tabular Format]
• Bind Dropdown from SharePoint List in SPFx (SPHttpClient, PnPJS, Graph)
• SPFx Accordion Webpart Example

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.