SSR + hydration (zero flash)
This markdown was highlighted with Shiki on the server via renderMarkdownEditor from modern-monaco-svelte/ssr, then hydrated by <LazyMonacoEditor html={...}>. Because this demo is fully prerendered
(adapter-static), that "server render" only ever happens once, at build time —
there's no live request for it to read a color-scheme hint from, so it falls back to dark (same
as modern-monaco's own default). View source — not the rendered DOM in devtools — to see the
pre-highlighted markup that was baked into this static page.
Client-side lazy mode
No html prop this time — the editor's markup and JavaScript load only once this
component mounts in the browser, with no server step at all. It has no explicit theme, so it picks light or dark from the system preference at mount.
Trade-off vs MonacoEditor
Both editors above are <LazyMonacoEditor>, a thin wrapper over modern-monaco's own <monaco-editor> custom element, rather than a full Monaco instance booted
eagerly like MonacoEditor/MarkdownEditor elsewhere in this demo. That's
the appeal — smaller upfront JavaScript, and editors off-screen don't pay to load — but it's a
real trade-off: with no editor instance to hold onto, there's no bind:value, and no
way to switch themes after mount (only the system preference at load time). That limitation lives
upstream in modern-monaco, not in this wrapper.