Skip to content

Monaco Editor control

This control is an implementation of the Monaco Editor. The Monaco Editor is the code editor that powers VS Code.

Here is an example of the control:


MonacoEditor dark theme:


How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the control into your component:
import { MonacoEditor } from "@pnp/spfx-controls-react/lib/MonacoEditor";
  • Use the MonacoEditor control in your code as follows:
 <MonacoEditor value={defaultValue}
  • The onValueChange change event returns the upadated code and array with messages of errors on validation and can be implemented as follows:

This validation is only available for JSON language

Your onValueChange handler would follow a similar format to this:

   const onValueChange = (newValue: string, validationErrors: string[]): void => { console.log(newValue); };

Or, if using React Hooks:

  const onValueChange = React.useCallback((newValue: string, validationErrors: string[]): void => {console.log(newValue);} , []);


The MonacoEditor control can be configured with the following properties:

Property Type Required Description
value string yes default content for editor
theme string no theme used by editor, two themes are supported 'vs' and 'vs-dark', default 'vs'
readOnly boolean no indicate if editor is in read-only mode
showLineNumbers boolean no editor show line number or not, default : yes
onValueChange (newValue:string, validationErrors:string[]) => void no function to get code changes, return an array with validation error in case of language is 'JSON'
language string yes editor code language, please see for supported languages
jsonDiagnosticsOptions monaco.languages.json.DiagnosticsOptions no define options to JSON validation, please see for more details
jscriptDiagnosticsOptions monaco.languages.typescript.DiagnosticsOptions no define options to javascript or typescript validation, please see for more details