@monaco-editor/react (^4.7.0) on top of monaco-editor (^0.55.1) — the same editor VS Code uses. We mount it on every surface that hands the operator a raw config: registries, YAML config files, flow JSON imports.

Where it lives in src/

Why Monaco (not CodeMirror or a plain textarea)

• YAML linting. Schemas validate as the operator types — bad indentation, unknown keys, type mismatches are surfaced inline.
• JSON tooling. The Node-RED flow import wizard needs schema validation against the flow shape; Monaco's JSON mode supports it out of box.
• Familiar. Operators who use VS Code get the same keybindings — cmd-shift-p, multi-cursor, find/replace.

Bundle cost

Monaco is big (the worker bundles dominate). We mitigate by:

• Loading via @monaco-editor/react's default lazy loader (CDN by default). For air-gapped deploys, the loader is pointed at a self-hosted copy.
• Mounting Monaco only on routes that need it. The main dashboard never imports it.
• Code-splitting at the route level — Next.js dynamic import for YamlEditor when the editor is opt-in (e.g. an "Advanced" tab).

Theme

Monaco runs in a dark theme that matches the dashboard tokens (see Tailwind v4). The theme is registered once on first mount; subsequent mounts reuse it.

What Monaco is not used for

• Inline single-field edits. Use a plain <input> or <textarea> — Monaco is for multi-line configs.
• The docs site. This site is fumadocs MDX, not Monaco-rendered prose.

See also

• Temple Archives — configuration tab
• Fleet — registry editor consumer