Skip to content

Monaco Editor control

This control is a implementatiopn of Monaco Editor.

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 done only to JSON language
  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 indecate if editor is in read only mode
showLineNumbers boolean no editor show linenumber 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