Onykia Docs
The Engine

Monaco

@mudomi/onykia-monaco is minimal: edit forwarding + diagnostics + priming. No highlight, autocomplete, hover, or definition - those live only in the CodeMirror binding for now.

npm install @mudomi/onykia-monaco

monaco-editor is a peer dependency.

Usage

primeFile seeds the engine's VFS with the model's current text, 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 the engine with the model's current text
await primeFile(core, model, PATH);
 
// 2. attach live listeners (edits -> core.edit, diagnostics -> markers)
const { dispose } = bindTypst(core, model, PATH);
 
await core.setMain(PATH);
await core.setTarget('svg');
 
// later, when tearing the editor down:
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 pieces are exported:

  • forwardEdits(core, model, path) - returns a disposable that mirrors model edits into core.edit().
  • primeFile(core, model, path, mime?) - create the VFS file from the model's current value before binding (mime defaults to text/x-typst).

Rendering/export is identical to everything else - see Rendering.

Previous

CodeMirror

Next

Fonts

On this page