Onykia Docs
The Engine

Monaco

@mudomi/onykia-monaco provides Monaco editor bindings for the engine.

Work in progress The Monaco binding currently supports only edit forwarding and diagnostics. The richer IDE features (syntax highlighting, autocomplete, hover, go-to-definition) that the CodeMirror package ships have not been ported yet

npm install @mudomi/onykia-monaco

monaco-editor is a peer dependency.

Usage

primeFile seeds the engine's VFS with the initial document, then bindTypst attaches the live listeners that keep the engine in sync and surface diagnostics.

import * as monaco from 'monaco-editor';
import { bindTypst, primeFile } from '@mudomi/onykia-monaco';
 
const PATH = '/main.typ';
const INITIAL = '= Hello, Onykia x Monaco\n';
 
// `core` is an already-booted engine (see ./Quickstart).
const model = monaco.editor.createModel(INITIAL, undefined, monaco.Uri.parse(PATH));
const editor = monaco.editor.create(document.getElementById('editor')!, { model });
 
// 1. Seed Core with the starting document (reads the model's current value).
await primeFile(core, model, PATH);
 
// 2. Attach live edit forwarding + diagnostics.
const binding = bindTypst(core, model, PATH);
 
await core.setMain(PATH);
await core.setTarget('svg');
 
// Later, when tearing the editor down:
binding.dispose();

Options

bindTypst(core, model, PATH, {
  forwardEdits: true,     // mirror model changes into core.edit() (default on)
  wireDiagnostics: true,  // subscribe to onDiagnostics and mark the model (default on)
});

Both default to enabled. The returned object's dispose() detaches every listener it installed.

Lower-level entry points

If you don't want the bindTypst wrapper, the individual pieces are exported:

  • forwardEdits(core, model, path) - returns a disposable that mirrors model edits into core.edit().
  • diagnosticsSubscription(core, model, path) - subscribes to onDiagnostics and applies markers; returns an unsubscribe function.
  • applyDiagnostics(...) - apply one diagnostics batch yourself.
  • primeFile(core, model, path, mime?) - create the VFS file from the model's current value before binding (mime defaults to text/x-typst).

Previous

Fonts

Next

Packages

On this page