PropertyFieldMonacoEditor – Adding a Monaco Code Editor to the SPFx Property Pane

The PropertyFieldMonacoEditor is one of the most powerful controls available in the PnP SPFx Property Controls library. It embeds the Monaco Editor (the same editor used by Visual Studio Code) directly inside the SharePoint Framework Property Pane.

This control is ideal when users need to edit structured content such as HTML, JSON, CSS, JavaScript, XML, or other text-based formats.

Official Documentation

PropertyFieldMonacoEditor

PnP SPFx Property Controls

Prerequisites

Install the PnP Property Controls package.

npm install @pnp/spfx-property-controls --save

Import the control

import { PropertyFieldMonacoEditor } from '@pnp/spfx-property-controls/lib/PropertyFieldMonacoEditor';

Create the Web Part property

export interface IPropertyFieldMonacoEditorWpWebPartProps {
  description: string;
  monacoEditorValue: string;
}

Add the Property Pane control

PropertyFieldMonacoEditor('monacoEditorValue', {
  key: 'monacoEditorValue',
  value: this.properties.monacoEditorValue || '',
  showMiniMap: true,
  showLineNumbers: true,
  language: 'html',
  onChange: this._onMonacoChange
})

Handle editor changes

Unlike many native Property Pane controls, PropertyFieldMonacoEditor does not automatically persist the edited value.

Create a callback that updates the Web Part property.

private _onMonacoChange = (newValue: string): void => {
  this.properties.monacoEditorValue = newValue;
  this.render();
};

This method stores the editor content and refreshes the Web Part immediately.

Pass the value to the React component

const element: React.ReactElement<IPropertyFieldMonacoEditorWpProps> =
React.createElement(PropertyFieldMonacoEditorWp, {
  description: this.properties.description,
  monacoEditorValue: this.properties.monacoEditorValue,
  isDarkTheme: this._isDarkTheme,
  environmentMessage: this._environmentMessage,
  userDisplayName: this.context.pageContext.user.displayName
});

Display the editor content as plain text

If you simply want to display the generated code, use a <pre> element.

<pre>
  {props.monacoEditorValue}
</pre>

This preserves formatting and line breaks.

Render HTML generated by the editor

If the editor language is HTML, you can render the generated markup.

<div
  dangerouslySetInnerHTML={{
    __html: props.monacoEditorValue || ''
  }}
/>

Example:

Editor content

<h2>Hello SharePoint</h2>
<p>This HTML was created inside Monaco Editor.</p>

Rendered output

Hello SharePoint

This HTML was created inside Monaco Editor.

Supported languages

The Monaco Editor supports syntax highlighting for many languages, including:

• HTML
• CSS
• JavaScript
• TypeScript
• JSON
• XML
• Markdown
• SQL
• PowerShell
• C#
• Java
• Python
• YAML

The language is configured through the language property.

language: "html"

Examples

language: "json"

language: "css"

language: "typescript"

language: "javascript"

Additional options

Display the minimap

showMiniMap: true

Display line numbers

showLineNumbers: true

Initial value

value: this.properties.monacoEditorValue

Important SharePoint Online configuration

Beginning with recent SharePoint Online releases, Content Security Policy (CSP) is enforced for dynamically loaded scripts.

The Monaco Editor downloads its runtime from jsDelivr, so SharePoint blocks it unless the domain is added as a trusted script source.

Without this configuration the browser displays an error similar to:

Loading the script
https://cdn.jsdelivr.net/npm/monaco-editor/...
violates the Content Security Policy directive

To enable the control:

1. Open SharePoint Admin Center
2. Select Advanced
3. Select Script sources
4. Click Add source
5. Add:

https://cdn.jsdelivr.net

After saving the configuration, reload the Workbench or SharePoint page.

Note: This requirement is related to the browser’s Content Security Policy and is not a limitation of the PnP Property Controls library.

Security considerations

Rendering HTML with

dangerouslySetInnerHTML

should only be used with trusted content.

If the HTML is provided by end users, consider sanitizing it before rendering to avoid Cross-Site Scripting (XSS) vulnerabilities.

When should you use PropertyFieldMonacoEditor?

Typical scenarios include:

• HTML template editing
• Email template customization
• JSON configuration
• CSS customization
• JavaScript snippets
• Markdown editing
• XML configuration
• Power Automate payload templates

Summary

PropertyFieldMonacoEditor provides a professional code editing experience directly inside the SharePoint Framework Property Pane. Built on top of the Monaco Editor, it offers syntax highlighting, line numbers, a minimap, and support for multiple programming languages.

The only additional configuration required in modern SharePoint Online environments is adding https://cdn.jsdelivr.net to the tenant’s Trusted Script Sources, allowing the Monaco runtime to load successfully under the Content Security Policy (CSP).

References

PropertyFieldMonacoEditor

PnP SPFx Property Controls

Monaco Editor

SharePoint Framework

SharePoint Content Security Policy