monaco-lsp-bridge

monaco-lsp-bridge

A small, typed bridge that wires a Language Server Protocol (LSP) server to the Monaco editor.
It handles JSON-RPC transport, progress/cancellation, diagnostics → markers, and completion/hover/formatting adapters.

Install

Install the monaco-lsp-bridge library using your preferred package manager:

npm install monaco-lsp-bridge

Quick Start

import * as monaco from 'monaco-editor'
import { LspMonacoClient, LspTransport } from 'monaco-lsp-bridge'

// 1) Create your Monaco editor
const editor = monaco.editor.create(document.getElementById('root')!, {
  value: 'function main() {}',
  language: 'javascript',
})

// 2) Create a transport to your LSP server (e.g. Web Worker)
const worker = new Worker(new URL('./server.worker.js', import.meta.url), { type: 'module' })
const transport = LspTransport.fromWorker(worker)

// 3) Start the client
const client = new LspMonacoClient(transport, {
  languageSelector: { language: 'javascript' }, // or a selector array
  dedicatedServer: true, // sends shutdown/exit on dispose
})
client.connect(monaco, editor)

// (optional) listen to client events
const off = client.onEvent((e) => {
  if (e.type === 'error') console.error(e.error)
})

// Later: dispose
// await client.dispose()

What it does

• Initializes the LSP server and applies reported capabilities.
• Sends didOpen/didChange/didClose matching server sync mode.
• Maps diagnostics → Monaco markers.
• Adapts completion, resolve, hover, and formatting requests.
• Handles progress ($/progress) and cancellation via AbortSignal.

License

MIT Dan Beaven