Monaco-editor-solidjs NPM

Quick start

Install it:

npm i monaco-editor-solidjs
# or
yarn add monaco-editor-solidjs
# or
pnpm add monaco-editor-solidjs
# or
bun add monaco-editor-solidjs

MonacoEditor

Basic Usage:

You can import and use the MonacoEditor component in your Solid Application:

import { MonacoEditor } from 'monaco-editor-solidjs';

function Editor() {
    return <MonacoEditor language="javascript" defaultValue="console.log('Hello World!');" />;
}

Props

The MonacoEditor component accepts the following props:

Prop	Type	Default	Description
`language`	`string`	-	The programming language for the editor. E.g., `"javascript"`, `"typescript"`.
`defaultValue`	`string`	-	Default value for the content of the editor.
`value`	`string`	-	Content of the editor.
`loadingState`	`JSX.Element`	`"Loading…"`	JSX element to be displayed during the loading state.
`class`	`string`	-	CSS class for the editor container.
`theme`	`BuiltinTheme` or `string`	`"vs"`	The theme to be applied to the editor.
`path`	`string`	`""`	Path used for Monaco model management for multiple files.
`overrideServices`	`object`	-	Services to override the default ones provided by Monaco.
`width`	`string`	`"100%"`	Width of the editor container.
`height`	`string`	`"100%"`	Height of the editor container.
`options`	`object`	-	Additional options for the Monaco editor.
`saveViewState`	`string`	`true`	Whether to save the model view state for a given path of the editor.
`onChange`	`(value: string, event: editor.IModelContentChangedEvent) => void`	-	Callback triggered when the content of the editor changes.
`onBeforeMount`	`() => void`	-	Callback triggered before the editor mounts.
`onMount`	`(monaco: Monaco, editor: editor.IStandaloneCodeEditor) => void`	-	Callback triggered when the editor mounts.
`onBeforeUnmount`	`(monaco: Monaco, editor: editor.IStandaloneCodeEditor) => void`	-	Callback triggered before the editor unmounts.

Getting Monaco and Editor Instances

You can get instances of both monaco and the editor by using the onMount callback:

import { MonacoEditor } from 'monaco-editor-solidjs';

function Editor() {
  const handleMount = (monaco, editor) => {
    // Use monaco and editor instances here
  };

  return (
    <MonacoEditor
      language="javascript"
      defaultValue="console.log('Hello World!);"
      onMount={handleMount}
    />
  );
}