### Start JSON Example Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/examples.md

Command to start the JSON language server for examples. Ensure you are in the monaco-languageclient repository directory.

```shell
npm run start:example:server:json  # For JSON examples
```

--------------------------------

### Run Vite Verification Example

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Runs the Vite verification example to demonstrate bundling with Vite. This example reuses code from the JSON client example and requires the JSON server to be started.

```shell
cd verify/vite && npm run verify
```

--------------------------------

### Cloning and Running Example Projects

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/installation.md

Clone the monaco-languageclient repository, install dependencies, and run the development server to explore example projects.

```shell
# Clone the repository
git clone https://github.com/TypeFox/monaco-languageclient.git
cd monaco-languageclient

# Install dependencies
npm install

# Run examples
npm run dev
```

--------------------------------

### Run Webpack Verification Example

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Runs the Webpack verification example to demonstrate bundling with Webpack. This example reuses code from the JSON client example and requires the JSON server to be started. The configuration is available in webpack.config.js.

```shell
cd verify/webpack && npm run verify
```

--------------------------------

### Run Next.js Verification Example

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Runs the Next.js verification example demonstrating the use of @typefox/monaco-editor-react with Next.js. This example reuses code from the JSON client example and requires the JSON server to be started.

```shell
cd verify/next && npm run verify
```

--------------------------------

### Clone and Build Project

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Clone the monaco-languageclient repository, install npm dependencies, and build the entire project. This is the initial setup for local development.

```bash
# clone the git repository
git clone https://github.com/TypeFox/monaco-languageclient.git
cd monaco-languageclient
# optional: if you have mise installed
mise upgrade
# install npm dependencies
npm i
# Cleans-up, compiles and builds everything
npm run build
```

--------------------------------

### Start Groovy Language Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Starts the Groovy language server using docker-compose. This requires docker-compose and does not need manual setup for OpenJDK/Gradle.

```shell
docker-compose -f ./packages/examples/resources/groovy/docker-compose.yml up -d
```

--------------------------------

### Run Angular Verification Example

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Runs the Angular verification example. This example reuses code from the JSON client example and requires the JSON server to be started. Note that monaco-languageclient currently does not support the Angular build directly, so @analogjs/vite-plugin-angular is used.

```shell
cd verify/angular && npm run verify
```

--------------------------------

### Start Graalpy Debugger

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Starts the Graalpy debugger using docker-compose. This is required for the Python client example's debugger functionality. Ensure docker-compose is installed.

```shell
docker-compose -f ./packages/examples/resources/debugger/docker-compose.yml up -d
```

--------------------------------

### Basic HTML Setup for Monaco Editor Example

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/examples.md

Minimal HTML structure required to host the Monaco Editor and load your TypeScript example file. Ensure you are using a development server.

```html
<div id="editor" style="height: 100vh;"></div>
<script type="module" src="./your-example.ts"></script>
```

--------------------------------

### Initialize and Start Components (v10)

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/migration.md

This snippet demonstrates the new three-step process for initializing and starting the API wrapper, language client wrapper, and editor app.

```typescript
import { EditorApp, type EditorAppConfig } from 'monaco-languageclient/editorApp';
import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
import { LanguageClientWrapper, type LanguageClientConfig } from 'monaco-languageclient/lcwrapper';

const vscodeApiConfig: MonacoVscodeApiConfig = {
    $type: 'extended',
    viewsConfig: {
        $type: 'EditorService'
    }.
    // ...
};
const languageClientConfig: LanguageClientConfig = {
    languageId: myLang,
    // ...
};
const editorAppConfig: EditorAppConfig = {
    // ...
};

const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
await apiWrapper.start();

const lcWrapper = new LanguageClientWrapper(languageClientConfig);
await lcWrapper.start();

const editorApp = new EditorApp(editorAppConfig);
const htmlContainer = document.getElementById('monaco-editor-root')!;
await editorApp.start(htmlContainer);
```

--------------------------------

### Install Monaco Language Client Core Package

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/installation.md

Installs the main package for Monaco Language Client. This is the recommended starting point for most users.

```shell
npm install monaco-languageclient
```

--------------------------------

### Run Two Language Clients Example

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/two_langauge_clients.html

Imports and executes the function to run an example with two language clients. This is the entry point for the multi-language client demonstration.

```typescript
import { runMultipleLanguageClientsExample } from './src/multi/twoLanguageClients.ts';

runMultipleLanguageClientsExample();
```

--------------------------------

### Initialize and Start Monaco Language Client

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/client/README.md

Use this code to set up and launch the Monaco Language Client. Ensure the language server is reachable at the specified WebSocket URL. This setup should only be performed once.

```typescript
import * as vscode from 'vscode';
// Import Monaco Language Client components
import { EditorApp, type EditorAppConfig } from 'monaco-languageclient/editorApp';
import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
import { LanguageClientWrapper, type LanguageClientConfig } from 'monaco-languageclient/lcwrapper';

async function createEditorAndLanguageClient() {
  const languageId = 'mylang';
  const code = '// initial editor content';
  const codeUri = '/workspace/hello.mylang';

  // Monaco VSCode API configuration
  const vscodeApiConfig: MonacoVscodeApiConfig = {
    $type: 'extended',
    viewsConfig: {
      $type: 'EditorService'
    },
    userConfiguration: {
      json: JSON.stringify({
        'workbench.colorTheme': 'Default Dark Modern',
        'editor.wordBasedSuggestions': 'off'
      })
    },
    monacoWorkerFactory: configureDefaultWorkerFactory
  };

  // Language client configuration
  const languageClientConfig: LanguageClientConfig = {
    languageId: languageId,
    connection: {
      options: {
        $type: 'WebSocketUrl',
        // at this url the language server for myLang must be reachable
        url: 'ws://localhost:30000/myLangLS'
      }
    },
    clientOptions: {
      documentSelector: [languageId],
      orkspaceFolder: {
        index: 0,
        name: 'workspace',
        uri: vscode.Uri.file('/workspace')
      }
    }
  };

  // editor app / monaco-editor configuration
  const editorAppConfig: EditorAppConfig = {
    codeResources: {
      main: {
        text: code,
        uri: codeUri
      }
    }
  };

  // Create the monaco-vscode api Wrapper and start it before anything else
  const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
  await apiWrapper.start();

  // Create language client wrapper
  const lcWrapper = new LanguageClientWrapper(languageClientConfig);
  await lcWrapper.start();

  // Create and start the editor app
  const editorApp = new EditorApp(editorAppConfig);
  const htmlContainer = document.getElementById('monaco-editor-root')!;
  await editorApp.start(htmlContainer);
}

createEditorAndLanguageClient().catch(console.error);

```

--------------------------------

### Start Java Language Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Starts the Java language server using docker-compose. This requires docker-compose and does not need manual setup for OpenJDK/Eclipse JDT LS.

```shell
docker-compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml up -d
```

--------------------------------

### Initialize and Start Wrapper (v9/v6)

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/migration.md

This snippet shows the older method of initializing and starting the wrapper using a single configuration object.

```typescript
import { MonacoEditorLanguageClientWrapper, type WrapperConfig } from 'monaco-editor-wrapper';

const wrapperConfig: WrapperConfig = {
  $type: 'extended',
  htmlContainer: document.getElementById('monaco-editor-root')!,
  vscodeApiConfig: {
    // ...
  },
  languageClientConfigs: {
    configs: {
      myLang: {
        // ...
      }
    }
  },
  editorAppConfig: {
    // ...
  }
};

const wrapper = new MonacoEditorLanguageClientWrapper();
await wrapper.init(wrapperConfig);
await wrapper.start();
```

--------------------------------

### Start Vite Dev Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Launch the Vite development server to serve client code and examples. Use 'dev:debug' for additional logging and cache clearing.

```shell
npm run dev
```

```shell
# OR: this clears the cache and has debug output
npm run dev:debug
```

--------------------------------

### Start Pyright Language Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Starts the express server with the Python language server running as an external node process. This is required for the Python client example.

```shell
npm run start:example:server:python
```

--------------------------------

### Install Vite Import Meta URL Plugin

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/getting-started.md

Install the necessary plugin for Vite to handle Monaco Language Client functionality in development mode when loading vsix extensions.

```shell
npm install @codingame/esbuild-import-meta-url-plugin
```

--------------------------------

### Start JSON Language Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Starts the express server with the JSON language server running in the same process. Ensure the JSON server is running for all JSON client examples.

```shell
npm run start:example:server:json
```

--------------------------------

### Launch JDT LS Backend with Docker Compose

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/eclipse.jdt.ls.html

Use this command to start the Eclipse JDT Language Server backend service. Ensure Docker is installed and running.

```bash
docker compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml up -d
```

--------------------------------

### Start JSON Language Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/getting-started.md

Run this command in your terminal to start a JSON language server. The Monaco Language Client expects to connect to a server at `ws://localhost:30000/sampleServer`.

```shell
# In the monaco-languageclient repository
npm install
npm run start:example:server:json
```

--------------------------------

### Install WebSocket Communication Package

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/installation.md

Installs the package required for WebSocket communication with external language servers.

```shell
npm install vscode-ws-jsonrpc
```

--------------------------------

### Setup In-Memory File System

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/configuration.md

Integrate an in-memory file system for the editor. Register files with content and then overlay the system into the editor's environment.

```typescript
import {
  RegisteredFileSystemProvider,
  RegisteredMemoryFile,
  registerFileSystemOverlay
} from '@codingame/monaco-vscode-files-service-override';

// In-memory file system
const fileSystemProvider = new RegisteredFileSystemProvider(false);
fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/project/main.ts'), 'console.log("Hello from TypeScript");'));
registerFileSystemOverlay(1, fileSystemProvider);
```

--------------------------------

### Install React Integration Package

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/installation.md

Installs the package that provides integration for React projects.

```shell
npm install @typefox/monaco-editor-react
```

--------------------------------

### MonacoVscodeApiConfig Example (v10)

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/migration.md

Example of the MonacoVscodeApiConfig structure in v10, highlighting the mandatory viewsConfig.

```typescript
const vscodeApiConfig: MonacoVscodeApiConfig = {
  $type: 'extended',
  viewsConfig: {
    $type: 'EditorService'
  }
  // ...
};
```

--------------------------------

### Install JSON Language Client Extension

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/getting-started.md

Install the default JSON language client extension package. Ensure the version matches your monaco-languageclient version for compatibility.

```shell
npm install @codingame/monaco-vscode-json-default-extension@23
```

--------------------------------

### Setup Monaco Editor and Language Client

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/getting-started.md

Integrate this code into your main TypeScript file to initialize the Monaco Editor and connect it to a language server. Ensure you have a running language server for features like JSON support. This setup includes configuring the VSCode API wrapper, the language client, and the editor application.

```typescript
// import Monaco Language Client components
import { EditorApp, type EditorAppConfig } from 'monaco-languageclient/editorApp';
import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
import { LanguageClientWrapper, type LanguageClientConfig } from 'monaco-languageclient/lcwrapper';

// VSCode API for file system operations
import * as vscode from 'vscode';
import { LogLevel } from '@codingame/monaco-vscode-api';
import {
  RegisteredFileSystemProvider,
  RegisteredMemoryFile,
  registerFileSystemOverlay
} from '@codingame/monaco-vscode-files-service-override';

// import extension for JSON support
import '@codingame/monaco-vscode-json-default-extension';

// Sample JSON content
const jsonContent = `{
    "$schema": "http://json.schemastore.org/package",
    "name": "my-package",
    "version": "1.0.0",
    "description": "A sample package"
}`;

async function createJsonEditor() {
  // Set up an in-memory file system (won't persist on reload)
  const fileUri = vscode.Uri.file('/workspace/package.json');
  const fileSystemProvider = new RegisteredFileSystemProvider(false);
  fileSystemProvider.registerFile(new RegisteredMemoryFile(fileUri, jsonContent));
  registerFileSystemOverlay(1, fileSystemProvider);

  // Monaco VSCode API configuration
  const vscodeApiConfig: MonacoVscodeApiConfig = {
    $type: 'extended',
    viewsConfig: {
      $type: 'EditorService',
      htmlContainer: document.getElementById('monaco-editor-root')!
    },
    logLevel: LogLevel.Debug,
    userConfiguration: {
      json: JSON.stringify({
        'workbench.colorTheme': 'Default Dark Modern',
        'editor.guides.bracketPairsHorizontal': 'active',
        'editor.lightbulb.enabled': 'On',
        'editor.wordBasedSuggestions': 'off',
        'editor.experimental.asyncTokenization': true
      })
    },
    monacoWorkerFactory: configureDefaultWorkerFactory
  };

  const languageId = 'json';

  // Language client configuration
  const languageClientConfig: LanguageClientConfig = {
    languageId,
    connection: {
      options: {
        $type: 'WebSocketUrl',
        url: 'ws://localhost:30000/sampleServer'
      }
    },
    clientOptions: {
      documentSelector: [languageId],
      workspaceFolder: {
        index: 0,
        name: 'workspace',
        uri: vscode.Uri.file('/workspace')
      }
    }
  };

  // editor app / monaco-editor configuration
  const editorAppConfig: EditorAppConfig = {
    codeResources: {
      modified: {
        text: jsonContent,
        uri: fileUri.path
      }
    }
  };

  // create the monaco-vscode api Wrapper
  const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
  await apiWrapper.start();

  // create language client wrapper & app
  const lcWrapper = new LanguageClientWrapper(languageClientConfig);
  const editorApp = new EditorApp(editorAppConfig);

  // start editor app first, then language client
  await editorApp.start(document.getElementById('monaco-editor-root')!);
  await lcWrapper.start();

  console.log('JSON editor with language client is ready!');
}
createJsonEditor().catch(console.error);
```

--------------------------------

### JSON Editor Setup (Classic Mode)

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/examples.md

Connects a JSON language server using monaco-languageclient in classic mode. Requires a running JSON language server at ws://localhost:30000/jsonLS.

```typescript
import { LogLevel } from '@codingame/monaco-vscode-api';
import type { Logger } from 'monaco-languageclient/common';
import { EditorApp, type EditorAppConfig } from 'monaco-languageclient/editorApp';
import { LanguageClientWrapper, type LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
import { defineDefaultWorkerLoaders, useWorkerFactory } from 'monaco-languageclient/workerFactory';

export const runClient = async () => {
  const vscodeApiConfig: MonacoVscodeApiConfig = {
    $type: 'classic',
    viewsConfig: {
      $type: 'EditorService'
    },
    logLevel: LogLevel.Debug,
    userConfiguration: {
      json: JSON.stringify({
        'editor.experimental.asyncTokenization': true
      })
    },
    monacoWorkerFactory: configureClassicWorkerFactory
  };

  const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
  await apiWrapper.start();

  const languageId = 'json';
  const code = `{
    "$schema": "http://json.schemastore.org/coffeelint",
    "line_endings": "unix"
}`;
  const codeUri = '/workspace/model.json';
  const editorAppConfig: EditorAppConfig = {
    codeResources: {
      modified: {
        text: code,
        uri: codeUri
      }
    },
    languageDef: {
      languageExtensionConfig: {
        id: languageId,
        extensions: ['.json', '.jsonc'],
        aliases: ['JSON', 'json'],
        mimetypes: ['application/json']
      }
    }
  };
  const editorApp = new EditorApp(editorAppConfig);
  const htmlContainer = document.getElementById('monaco-editor-root')!;
  await editorApp.start(htmlContainer);

  const languageClientConfig: LanguageClientConfig = {
    languageId,
    clientOptions: {
      documentSelector: [languageId]
    },
    connection: {
      options: {
        $type: 'WebSocketUrl',
        // at this url the language server must be reachable
        url: 'ws://localhost:30000/jsonLS'
      }
    }
  };
  const languageClientWrapper = new LanguageClientWrapper(languageClientConfig, apiWrapper.getLogger());
  await languageClientWrapper.start();
};

export const configureClassicWorkerFactory = (logger?: Logger) => {
  const defaultworkerLoaders = defineDefaultWorkerLoaders();
  // remove textmate worker as it is not compatible with classic mode
  defaultworkerLoaders.TextMateWorker = undefined;
  useWorkerFactory({
    workerLoaders: defaultworkerLoaders,
    logger
  });
};

```

--------------------------------

### Setup In-Memory File System

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/examples.md

Use this to create and register files in memory without interacting with the actual file system. This is useful for testing or environments where file system access is restricted.

```typescript
import { RegisteredFileSystemProvider, RegisteredMemoryFile, registerFileSystemOverlay } from '@codingame/monaco-vscode-files-service-override';
import * as vscode from 'vscode';

// Create file system provider
const fileSystemProvider = new RegisteredFileSystemProvider(false);

// Add files to memory
const files = [
    { path: '/workspace/main.java', content: `public static void main (String[] args) {
    System.out.println("Hello World!");
}`},
    { path: '/workspace/package.json', content: '{"name": "my-app", "version": "1.0.0"}' }
];

files.forEach(file => {
    const uri = vscode.Uri.file(file.path);
    const memFile = new RegisteredMemoryFile(uri, file.content);
    fileSystemProvider.registerFile(memFile);
});

// Register the file system
registerFileSystemOverlay(1, fileSystemProvider);
```

--------------------------------

### Configure Multiple Language Servers

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/configuration.md

Initialize multiple language clients for different file types, such as Java and JSON. Configure each client with its connection options and document selector, then start them concurrently.

```typescript
// Eclipse JDT language client
const javaConfig = {
  connection: {
    options: {
      $type: 'WebSocketUrl',
      url: 'ws://localhost:3001/jdtls'
    }
  },
  clientOptions: {
    documentSelector: ['java']
  }
};

// JSON language client
const jsonConfig = {
  connection: {
    options: {
      $type: 'WebSocketUrl',
      url: 'ws://localhost:3001/json'
    }
  },
  clientOptions: {
    documentSelector: ['json']
  }
};

// Initialize both
await Promise.all([new LanguageClientWrapper().init(javaConfig), new LanguageClientWrapper().init(jsonConfig)]);
```

--------------------------------

### Setup In-Memory File System

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/getting-started.md

Creates an in-memory file system for the editor to use. This is necessary for language servers to access files, enabling features like diagnostics and autocompletion.

```typescript
const fileSystemProvider = new RegisteredFileSystemProvider(false);
fileSystemProvider.registerFile(new RegisteredMemoryFile(fileUri, jsonContent));
registerFileSystemOverlay(1, fileSystemProvider);
```

--------------------------------

### Minimal Monaco VSCode API Wrapper Configuration

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/configuration.md

The most basic configuration to initialize and start the MonacoVscodeApiWrapper. This is required regardless of the configuration mode.

```typescript
import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';

const vscodeApiConfig: MonacoVscodeApiConfig = {
  $type: 'extended',
  viewsConfig: {
    $type: 'EditorService'
  }
};

const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
await apiWrapper.start();
```

--------------------------------

### Create a New Vite React Project

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/installation.md

Scaffolds a new Vite project with React and TypeScript. Navigate into the created directory and install its dependencies.

```shell
npm create vite@latest my-monaco-project -- --template react-ts
cd my-monaco-project
npm install
```

--------------------------------

### Run Language Client in Browser

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/browser.html

Imports and executes the `runBrowserEditor` function to initialize the language client in the browser. Ensure the necessary browser environment setup is in place.

```typescript
import { runBrowserEditor } from './src/browser/main.ts';

runBrowserEditor();
```

--------------------------------

### Configure Multiple Language Support

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/examples.md

This example shows how to initialize and manage language clients for multiple programming languages (JSON and Java) within a single Monaco editor instance. Ensure the respective language server WebSocket endpoints are running.

```typescript
import '@codingame/monaco-vscode-json-default-extension';
import '@codingame/monacovscode-java-default-extension';

async function createMultiLanguageEditor() {
  const apiWrapper = new MonacoVscodeApiWrapper({
    $type: 'extended',
    viewsConfig: {
      $type: 'EditorService'
    },
    monacoWorkerFactory: configureDefaultWorkerFactory
  });
  await apiWrapper.start();

  // JSON Language Client
  const jsonClient = new LanguageClientWrapper();
  await jsonClient.init({
    connection: { options: { $type: 'WebSocketUrl', url: 'ws://localhost:3001/json' } },
    clientOptions: { documentSelector: ['json'] }
  });

  // Java Language Client
  const javaClient = new LanguageClientWrapper();
  await javaClient.init({
    connection: { options: { $type: 'WebSocketUrl', url: 'ws://localhost:3002/java' } },
    clientOptions: { documentSelector: ['java'] }
  });

  // Editor can now handle both JSON and Java files
  const editorApp = new EditorApp({
    codeResources: {
      json: { text: '{"test": true}', uri: '/workspace/config.json', fileExt: 'json' },
      ts: { text: 'const x: number = 42;', uri: '/workspace/main.ts', fileExt: 'ts' }
    }
  });

  const htmlContainer = document.getElementById('monaco-editor-root')!;
  await editorApp.start(htmlContainer);
}
```

--------------------------------

### Initialize Classic Mode Monaco Language Client

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/configuration.md

Set up the Monaco Editor in classic mode with language client features. Ensure the HTML container is available and the editor application is started.

```typescript
import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';

const vscodeApiConfig: MonacoVscodeApiConfig = {
  $type: 'classic',
  viewsConfig: {
    $type: 'EditorService'
  }
};

const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
await apiWrapper.start();

const editorAppConfig: EditorAppConfig = {};
const editorApp = new EditorApp(editorAppConfig);
const htmlContainer = document.getElementById('monaco-editor-root')!; 
await editorApp.start(htmlContainer);
```

--------------------------------

### Run Watch Command

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Compile all TypeScript files from both libraries and examples in watch mode. This ensures changes are reflected directly in the libraries.

```shell
npm run watch
```

--------------------------------

### Initialize Monaco Language Client and Editor

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/index.md

Initialize the VSCode API wrapper and the editor application. The API wrapper must be started before the editor. Ensure the HTML container for the editor is available.

```typescript
import { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
import { EditorApp } from 'monaco-languageclient/editorApp';

// always start the monaco-vscode-api wrapper first and await it
const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
await apiWrapper.start();

// create editor with empty content
const editorApp = new EditorApp({});
const htmlContainer = document.getElementById('monaco-editor-root')!;
await editorApp.start(htmlContainer);
```

--------------------------------

### Run Langium Grammar DSL Extended Mode

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/langium_extended.html

Imports and runs the Langium Grammar DSL in extended mode. Ensure the necessary setup is completed before execution.

```typescript
import { runLangiumGrammarDsl } from './src/langium/langium-dsl/main.ts';

runLangiumGrammarDsl();
```

--------------------------------

### Add VSCode API as Direct Dependency (pnpm/yarn)

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/troubleshooting.md

When using pnpm or yarn, ensure VSCode API packages are direct dependencies to prevent installation failures.

```json
{
  "vscode": "npm:@codingame/monaco-vscode-extension-api@^34.0.1"
}
```

--------------------------------

### Basic Extended Mode Configuration for Monaco VSCode API Wrapper

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/configuration.md

A basic setup for Extended Mode, including user settings and default worker factory configuration. This mode leverages VSCode services and disables monarch/language features in monaco-editor.

```typescript
import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
import { LogLevel } from '@codingame/monaco-vscode-api';
import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';

const vscodeApiConfig: MonacoVscodeApiConfig = {
    $type: 'extended',
    viewsConfig: {
        $type: 'EditorService'
    }
    logLevel: LogLevel.Info,

    // User settings (like VSCode settings.json)
    userConfiguration: {
        json: JSON.stringify({
            'workbench.colorTheme': 'Default Dark Modern'
        })
    },

    // specific features handled by web workers
    monacoWorkerFactory: configureDefaultWorkerFactory
};

const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
await apiWrapper.start();
```

--------------------------------

### Print addlicense Help Information

Source: https://github.com/typefox/monaco-languageclient/blob/main/scripts/addlicense/USAGE.md

This command displays the help information for the addlicense tool. Use it to understand all available options and configurations.

```bash
docker compose -f ./scripts/addlicense/docker-compose.yml run --rm addlicense-help
```

```bash
npm run license:help
```

--------------------------------

### Initialize Services with MonacoVscodeApiWrapper (v10)

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/migration.md

This snippet demonstrates the new approach for initializing services using `MonacoVscodeApiWrapper`. It is recommended for v10 and later.

```typescript
import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';

const vscodeApiConfig: MonacoVscodeApiConfig = {
  $type: 'classic',
  viewsConfig: {
    $type: 'EditorService'
  },
  serviceOverrides: {
    ...getKeybindingsServiceOverride()
  }
};
const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
await apiWrapper.start();

```

--------------------------------

### Stop Graalpy Debugger

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Stops the Graalpy debugger started with docker-compose.

```shell
docker-compose -f ./packages/examples/resources/debugger/docker-compose.yml down
```

--------------------------------

### Stop Java Language Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Stops the Java language server started with docker-compose.

```shell
docker-compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml down
```

--------------------------------

### Stop Groovy Language Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/README.md

Stops the Groovy language server started with docker-compose.

```shell
docker-compose -f ./packages/examples/resources/groovy/docker-compose.yml down
```

--------------------------------

### Initialize Services (v9/v6)

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/migration.md

This snippet shows the older method of initializing services using `initServices`. This approach is deprecated in favor of `MonacoVscodeApiWrapper`.

```typescript
import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
import { initServices } from "monaco-languageclient/vscode/services";

initServices({
    serviceOverrides: {
        ...getKeybindingsServiceOverride()
    }
};

```

--------------------------------

### Run JSON Client

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/json_classic.html

Initiates the JSON language client. Ensure the necessary imports are present.

```typescript
import { runClient } from './src/json/client/classic.ts';
runClient();
```

--------------------------------

### Configure Worker Factory for Bundled Workers

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/troubleshooting.md

Adjust the 'workerLoaders' parameter in 'useWorkerFactory' to point to the pre-bundled workers when using Webpack. This example shows how to configure TextEditorWorker and TextMateWorker.

```javascript
'TextEditorWorker': () => new Worker('/assets/monaco-workers/editor.js', {type: 'module'}),
'TextMateWorker': () => new Worker('/assets/monaco-workers/textmate.js', {type: 'module'}),
```

--------------------------------

### Run Python Wrapper

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/python.html

Initiates the Python Language Client wrapper. Ensure necessary imports are present.

```typescript
import { runPythonWrapper } from './src/python/client/main.ts';
runPythonWrapper();
```

--------------------------------

### Run JSON Language Client & Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/json.html

Initiates the JSON language client and server wrapper. Ensure the necessary imports are available.

```typescript
import { runJsonWrapper } from './src/json/client/extended.ts';
runJsonWrapper();
```

--------------------------------

### Run Statemachine React Client

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/react_statemachine.html

Initializes the Statemachine React language client and server. Ensure strict mode is enabled and dispose of resources properly.

```typescript
import { runStatemachineReact } from './src/langium/statemachine/main-react.tsx';
runStatemachineReact();
```

--------------------------------

### Enable Async Tokenization in Editor Config

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/troubleshooting.md

Enable experimental async tokenization in your editor configuration to potentially improve performance and responsiveness.

```json
{
  "editor.experimental.asyncTokenization": true
}
```

--------------------------------

### Create Editor and Language Client in React

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/wrapper-react/README.md

Demonstrates a full implementation of the Monaco Editor React component with language client configuration. It sets up the VSCode API, language client connection (WebSocket), and editor content.

```tsx
import * as vscode from 'vscode';
// Import Monaco Language Client components
import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
import type { MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
import React from 'react';
import ReactDOM from 'react-dom/client';

export const createEditorAndLanguageClient = async () => {
  const languageId = 'mylang';
  const code = '// initial editor content';
  const codeUri = '/workspace/hello.mylang';

  // Monaco VSCode API configuration
  const vscodeApiConfig: MonacoVscodeApiConfig = {
    $type: 'extended',
    viewsConfig: {
      $type: 'EditorService'
    },
    userConfiguration: {
      json: JSON.stringify({
        'workbench.colorTheme': 'Default Dark Modern',
        'editor.wordBasedSuggestions': 'off'
      })
    },
    monacoWorkerFactory: configureDefaultWorkerFactory
  };

  // Language client configuration
  const languageClientConfig: LanguageClientConfig = {
    languageId,
    connection: {
      options: {
        $type: 'WebSocketUrl',
        // at this url the language server for myLang must be reachable
        url: 'ws://localhost:30000/myLangLS'
      }
    },
    clientOptions: {
      documentSelector: [languageId],
      orkspaceFolder: {
        index: 0,
        name: 'workspace',
        uri: vscode.Uri.file('/workspace')
      }
    }
  };

  // editor app / monaco-editor configuration
  const editorAppConfig: EditorAppConfig = {
    codeResources: {
      main: {
        text: code,
        uri: codeUri
      }
    }
  };

  const root = ReactDOM.createRoot(document.getElementById('react-root')!);
  const App = () => {
    return (
      <div style={{ backgroundColor: '#1f1f1f' }}>
        <MonacoEditorReactComp
          vscodeApiConfig={vscodeApiConfig}
          editorAppConfig={editorAppConfig}
          languageClientConfig={languageClientConfig}
          style={{ height: '100%' }}
          onError={(e) => {
            console.error(e);
          }}
        />
      </div>
    );
  };
  root.render(<App />);
};
createEditorAndLanguageClient();

```

--------------------------------

### Client-side WebSocket Connection Handling

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/vscode-ws-jsonrpc/README.md

Sets up a WebSocket connection on the client and listens for incoming messages. Sends a test notification upon successful connection.

```typescript
import { MessageConnection, NotificationType } from 'vscode-jsonrpc';
import { listen } from 'vscode-ws-jsonrpc';

const webSocket = new WebSocket('ws://www.example.com/socketserver');
listen({
  webSocket,
  onConnection: (connection: MessageConnection) => {
    const notification = new rpc.NotificationType<string, void>('testNotification');
    connection.listen();
    connection.sendNotification(notification, 'Hello World');
  }
});
```

--------------------------------

### Migrate LanguageClientConfigs to v10 for LanguageClientManager

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/migration.md

Shows how to configure multiple language clients using LanguageClientConfigs with the LanguageClientManager in v10. The structure remains similar, but it's now used with the manager.

```ts
const lcManager = new LanguageClientManager();
const languageClientConfigs: LanguageClientConfigs = {
  configs: {
    myLang1: {
      // ...
    },
    myLang2: {
      // ...
    }
  }
};

await lcManager.setConfigs(languageClientConfigs);
await lcManager.start();
```

--------------------------------

### Run Statemachine React Client (Worker)

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/ghp_react_statemachine.html

Initializes the Langium statemachine React client and language server, utilizing a worker for the server process. Ensure the 'runStatemachineReact' function is imported from './src/langium/statemachine/main-react.tsx'.

```typescript
import { runStatemachineReact } from './src/langium/statemachine/main-react.tsx';

runStatemachineReact(true);
```

--------------------------------

### Monaco Language Client Architecture Overview (WebSocket)

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/introduction.md

This diagram illustrates the WebSocket communication pattern where the language server runs on a backend and communicates with the Monaco Editor in the browser.

```shell
    Web Browser                        Server
┌─────────────────┐             ┌──────────────────┐
│ Monaco Editor   │             │ Language Server  │
│        ↕        │ ←WebSocket→ │ (Node.js/Python/ │
│ Language Client │             │ Java/etc.)       │
└─────────────────┘             └──────────────────┘
```

--------------------------------

### Run TypeScript Extension Host Worker

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/ghp_tsExtHost.html

Initiates the TypeScript extension host wrapper. Ensure the path to 'clientTs.ts' is correct.

```typescript
import { runTsWrapper } from './src/ts/clientTs.ts';
runTsWrapper();
```

--------------------------------

### Run Clangd Worker

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/clangd.html

Initiates the Clangd language server in a worker environment. Ensure the necessary imports are available.

```typescript
import { runClangdWrapper } from './src/clangd/client/main.ts';
runClangdWrapper();
```

--------------------------------

### Run Groovy Language Client

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/groovy.html

This snippet shows how to import and run the Groovy client function. Ensure the backend service is running before executing this.

```typescript
import { runGroovyClient } from './src/groovy/client/main.ts';

runGroovyClient();
```

--------------------------------

### Run Langium Grammar DSL

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/ghp_langium_extended.html

Imports and runs the Langium Grammar DSL main function. Ensure the path to the main file is correct.

```typescript
import { runLangiumGrammarDsl } from './src/langium/langium-dsl/main.ts';
runLangiumGrammarDsl();
```

--------------------------------

### Environment-Specific Configuration (Development vs. Production)

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/configuration.md

Adapt configuration based on the environment, such as setting log levels and editor behavior like word-based suggestions. Use environment variables to determine the mode.

```typescript
const isDevelopment = process.env.NODE_ENV === 'development';

const config = {
  logLevel: isDevelopment ? LogLevel.Debug : LogLevel.Error,
  userConfiguration: {
    json: JSON.stringify({
      'editor.wordBasedSuggestions': isDevelopment ? 'on' : 'off'
    })
  }
};
```

--------------------------------

### Add Missing License Headers

Source: https://github.com/typefox/monaco-languageclient/blob/main/scripts/addlicense/USAGE.md

Execute this command to automatically add missing license headers to your code files. Available via Docker Compose or an npm script.

```bash
docker compose -f ./scripts/addlicense/docker-compose.yml run --rm addlicense-add
```

```bash
npm run license:add
```

--------------------------------

### Create Web Worker Language Server Client

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/examples.md

This snippet shows how to initialize a language client that runs in a Web Worker. It sets up message readers and writers for communication between the main thread and the worker.

```typescript
import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser';

async function createWebWorkerClient() {
  // Create worker
  const worker = new Worker('./language-server.js', { type: 'module' });

  const reader = new BrowserMessageReader(worker);
  const writer = new BrowserMessageWriter(worker);

  // log every message received from the worker
  reader.listen((message) => {
    console.log('Received message from worker:', message);
  });

  // Configure language client
  const lcWrapper = new LanguageClientWrapper();
  await lcWrapper.init({
    connection: {
      options: {
        $type: 'MessageChannel',
        worker
      },
      messageTransports: { reader, writer }
    },
    clientOptions: {
      documentSelector: ['mydsl']
    }
  });
}
```

--------------------------------

### Run Python React Client

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/react_python.html

Initiates the Python Language Client within a React application. Ensure the necessary import is present.

```typescript
import { runPythonReact } from './src/python/client/reactPython.tsx';

runPythonReact();
```

--------------------------------

### Run TypeScript Extension Host Worker

Source: https://github.com/typefox/monaco-languageclient/blob/main/packages/examples/tsExtHost.html

Imports and runs the TypeScript wrapper for the extension host. This is the entry point for the worker.

```typescript
import { runTsWrapper } from './src/ts/clientTs.ts';

runTsWrapper();
```

--------------------------------

### Configure Direct Web Worker Connection

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/configuration.md

Connect directly to a language server using a Web Worker instance. Ensure the worker script is correctly specified and configured as a module.

```typescript
connection: {
    options: {
        $type: 'WorkerDirect',
        // we suggest to use esm workers (=module)
        worker: new Worker('./language-server.js', { type: 'module' })
    }
}
```

--------------------------------

### Import Monaco Editor API Directly

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/troubleshooting.md

When using libraries from this project, you can import Monaco Editor API directly without proxying.

```javascript
import * as monaco from '@codingame/monaco-vscode-editor-api';
```

--------------------------------

### Configure WebSocket Connection to Language Server

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/configuration.md

Establish a connection to a language server using WebSocket. Specify the server URL for communication.

```typescript
connection: {
    options: {
        $type: 'WebSocketUrl',
        url: 'ws://localhost:3000/languageserver'
    }
}
```

--------------------------------

### Configure Language Server via Worker

Source: https://github.com/typefox/monaco-languageclient/blob/main/docs/guides/configuration.md

Connect to a language server using a Web Worker. Configure the worker URL, type (module recommended), and provide a worker name.

```typescript
connection: {
    options: {
        $type: 'WorkerConfig',
        url: new URL('./language-server-worker.js', window.location.href),
        // we suggest to use esm workers (=module)
        type: 'module',
        workerName: 'LanguageServerWorker'
    }
}
```