solid-monaco

Monaco Editor for SolidJS

Quick start

Install it:

npm i solid-monaco
# or
yarn add solid-monaco
# or
pnpm add solid-monaco

MonacoEditor

Basic usage:

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

import { MonacoEditor } from 'solid-monaco';

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

Props

The MonacoEditor component accepts the following props:

Getting Monaco and Editor Instances

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

import { MonacoEditor } from 'solid-monaco';

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

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

MonacoDiffEditor

For a side-by-side comparison view of code, the package provides a MonacoDiffEditor component.

Basic Usage

You can incorporate the MonacoDiffEditor component into your Solid application:

import { MonacoDiffEditor } from 'solid-monaco';

function MyDiffEditor() {
  return (
    <MonacoDiffEditor
      original="const foo = 1;"
      modified="const foo = 2;"
      originalLanguage="javascript"
      modifiedLanguage="javascript"
    />
  );
}

Props

The MonacoDiffEditor component accepts the following props:

Contributing

Contributions to solid-monaco are welcomed!

Acknowledgments

• monaco-editor: The core editor that this package wraps for Solid.js.
• monaco-react by Suren Atoyan: A package referred to during the development of the solid-monaco wrapper.

License

MIT