# Monaco Editor

> Monaco Editor: anatomy, keyboard behavior, state, and theming in Askr.

Source: [https://askrjs.com/docs/integrations/monaco-editor](https://askrjs.com/docs/integrations/monaco-editor)

Status: stable. Packages: @askrjs/monaco.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Example

```tsx
import { MonacoEditor } from '@askrjs/monaco';

// MonacoEditorProps has no onChange — subscribe to edits through onMount
// and the real Monaco editor instance it hands you instead.
<MonacoEditor
  value={source()}
  language="typescript"
  onMount={(editor) => {
    editor.onDidChangeModelContent(() => setSource(editor.getValue()));
  }}
  options={{ minimap: { enabled: false } }}
/>
```

## Lazy loading

By default, MonacoEditor calls its built-in loader to fetch monaco-editor on demand, so the editor's dependency weight stays out of your initial bundle. Supply a loadMonaco function if you need to control the fetch — say, loading from a CDN or a pinned local build — or pass an already-imported namespace through the monaco prop to skip lazy loading entirely and mount synchronously.

## Editor ownership

MonacoEditor renders a plain div (JSX.IntrinsicElements['div'] minus children and ref) and forwards editorRef and monacoRef so you can reach the live IStandaloneCodeEditor instance and the monaco namespace once mounted. beforeMount, onMount, onUnmount, and onError give you lifecycle hooks around Monaco's own initialization, so you configure languages, themes, or providers directly against Monaco rather than through a wrapper API.

## Models and disposal

Pass an external model (an ITextModel) when you want to own creation and disposal yourself — useful for tabs, diff views, or anything sharing a model across editors. If you don't pass one, the wrapper manages a model from value, defaultValue, language, and path for you. path values need to be unique per model; reuse monaco.editor.getModel(uri) to intentionally share one instead of creating a duplicate.

## SSR fallback

MonacoEditor depends on Monaco's browser runtime, so it has nothing useful to render on the server beyond its container div — there is no server-side text or DOM fallback baked into the wrapper. Wrap it in whatever loading UI or client-only gate your app uses for other browser-only widgets, and mount it after hydration.

## Documentation navigation

[Previous](https://askrjs.com/docs/integrations/index.md) | [Next](https://askrjs.com/docs/integrations/icons-and-logos/index.md)