Askr
UI & Components

Monaco Editor

Use monaco editor with the current published Askr packages.

  • @askrjs/monaco0.0.2

How to use monaco editor

Monaco Editor should use the standard themed surface unless the application is deliberately implementing its own design system on top of @askrjs/ui.

  1. Import the themed component from @askrjs/themes/components; use @askrjs/ui directly only when building a custom visual system.
  2. Keep monaco editor labels, state, and application actions visible at the call site instead of styling internal DOM nodes.
  3. Verify keyboard behavior, focus movement or return, disabled state, and both standard themes.
import { MonacoEditor } from '@askrjs/monaco';

<MonacoEditor
  value={source()}
  language="typescript"
  onChange={(value) => source.set(value ?? '')}
  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.