@sigx/monaco-editor

Pluggable Monaco editor wrapper for sigx, with a fast dev experience.

📚 Documentation

Full guides, API reference and live examples → https://sigx.dev/monaco/

Why

Monaco is large enough that letting Vite pre-bundle it costs many seconds on every cold start. This package ships a pre-built, self-contained Monaco bundle (monaco.min.js + workers) and a Vite plugin that intercepts every monaco-editor import so the bundler never touches Monaco at all. Monaco is loaded into the page via a <script> tag at runtime.

Install

pnpm add @sigx/monaco-editor monaco-editor

A taste

import { component, signal } from 'sigx';
import { MonacoEditor } from '@sigx/monaco-editor';

export const Editor = component(({ signal }) => {
    const state = signal({ code: 'console.log("hi")', language: 'typescript' });

    return () => (
        <MonacoEditor
            value={state.code}
            language={state.language}
            theme="vs-dark"
            onChange={(v) => state.code = v}
        />
    );
});

Two-way binding (model)

Instead of pairing value with onChange, bind the editor content with sigx's two-way model directive — edits flow straight back into your state:

<MonacoEditor model={() => state.code} language="typescript" />

When model is supplied it is the source of truth and takes precedence over value. onChange still fires if you also pass it.

The Vite plugin, loader configuration, language packs, Shiki theming and the full API are documented at https://sigx.dev/monaco/.

Part of SignalX

• sigx — the reactive core.
• @sigx/vite — the Vite integration.
• @sigx/live-code — runnable code examples.

Browse the whole ecosystem at https://sigx.dev.

License

MIT