Monaco editor — Integration
The editor behind VS Code, embedded inside a maud-ui shell. File header, toolbar, language dropdown, and status bar are all plain maud-ui primitives wrapping the Monaco instance. The editor theme auto-syncs with <html data-theme> so toggling the gallery theme flips Monaco too.
src/routes/auth.rs
Loading Monaco from CDN…
Output
// Click Run to see output here.Usage — drop Monaco into any maud-ui page
// In your <head>:
// <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs/editor/editor.main.css">
// <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs/loader.min.js"></script>
//
// In your body (where you want the editor):
html! {
div class="mui-integration mui-integration--monaco" {
div class="mui-integration__header" {
div class="mui-integration__filepath" { "src/main.rs" }
div class="mui-integration__toolbar" {
(button::render(button::Props {
label: "Format".into(),
variant: button::Variant::Outline,
size: button::Size::Sm,
..Default::default()
}))
}
}
div class="mui-integration__editor" id="editor" {}
}
}
// Then bootstrap Monaco (matches --mui-* theme tokens automatically):
// require.config({ paths: { vs: 'https://cdn.jsdelivr.net/.../min/vs' } });
// require(['vs/editor/editor.main'], () => {
// monaco.editor.defineTheme('maud-ui-dark', { base: 'vs-dark', ... });
// monaco.editor.create(document.getElementById('editor'), {
// value: '// your code here',
// language: 'rust',
// theme: 'maud-ui-dark',
// fontFamily: 'var(--mui-font-mono)',
// minimap: { enabled: false },
// automaticLayout: true,
// });
// });