Skip to content

PropertyFieldMonacoEditor control

This control implement Microsoft Monaco Editor.

PropertyFieldMonacoEditor example usage

PropertyFieldMonacoEditor example PropertyFieldMonacoEditor example PropertyFieldMonacoEditor example

How to use this control in your solutions

  • Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency.
  • Import the following modules to your component:
import { PropertyFieldMonacoEditor } from '@pnp/spfx-property-controls/lib/PropertyFieldMonacoEditor';
  • Create a new property for your web part, for example:
export interface IPropertyControlsTestWebPartProps {
  monacoEditorValue: string;
  • Add the custom property control to the groupFields of the web part property pane configuration:
PropertyFieldMonacoEditor('monacoEditor', {
      key: 'monacoEditor',
      showMiniMap: true,
      onChange: this.monacoChange ,


The PropertyFieldMonacoEditor control can be configured with the following properties:

Property Type Required Description
key string yes An unique key that indicates the identity of this control.
value number yes Value field.
theme string no 'vs-dark'
readOnly boolean no editor is read only
showLineNumbers boolean no Show line number - default no
showMiniMap boolean no Show Mini Map - default yes
onChange (newValue:string) => void; no If set, this method is used to get the the input value when it changed
language string yes language, please see for all supported languages
jsonDiagnosticsOptions monaco.languages.json.DiagnosticsOptions no see
jscriptDiagnosticsOptions monaco.languages.typescript.DiagnosticsOptions no see
panelWidth number no Panel Width default 800px.