Spike: Evaluate embedded code editor

[lornakelly]

Description

Evaluation of the embedded code editor for the text pane. Compare editor options like Monaco, CodeMirror 6 etc. Add findings to the ticket and recommend one to the team and community for review.

Motivation

The editor choice is an open ADR question and the wrong choice is expensive to reverse because the VS Code extension reuses the same engine

Proposed Implementation

No response

Definition of Done

• Implementation: Fully implemented according to the Serverless Workflow spec.
• Unit Tests: Comprehensive unit tests are included and passing.
• Integration Tests: Verified within the monorepo and target environments (Web/VS Code).
• Documentation: Updated README.md, ADRs, or official docs.
• Performance: No significant regression in editor responsiveness.
• Accessibility: UI changes comply with accessibility standards.

[lornakelly]

Ruled out:
Reviewed Ace, CodeMirror 5, and Sandpack - Ace and CodeMirror 5 are old editors. Sandpack is a runnable code playground, not a schema-validated authoring editor - so none are eligible.

Currently under review - Monaco and CodeMirror6

[lornakelly]

Monaco vs. CodeMirror 6

Dimension	Monaco	CodeMirror 6
Governance / longevity	Microsoft-backed, large team, powers VS Code. Broad contributor base	Effectively a single maintainer (Marijn Haverbeke). Longevity depends on one person - unacceptable risk for a CNCF project meant to last.
Source hosting / contribution	On GitHub - standard PR/issue workflow the team and community already use.	Moved off GitHub (April 2026) to a self-hosted forge. You can contribute, but higher friction, less community reach.
Bundle size	Heavier - pulls in every language mode (~4 MB / ~1 MB gzip) by default. Potential mitigation: trim to YAML/JSON-only imports.	Lighter, modular by design - you compose only what you need.
Embeddability / Shadow DOM	Proven in the spike in React and LitElement.	Designed to be embeddable; fewer shadow-DOM surprises out of the box.
Schema-driven authoring (validation, autocomplete, IntelliSense)	Rich provider API, mature.	Capable, but more assembly required.
Custom language service path	monaco-languageclient is mature and widely used.	Newer so less mature and battle tested.
Familiarity	VS Code = same engine; low learning curve for contributors.	Moderate.

Recommendation: Monaco

See the spike: text-editor-spike repo. Monaco renders, styles, and autocompletes inside a shadow root in both a React host and a LitElement host.

There was a question about Monaco working in the Shadow DOM but now that is settled (implemented and working in the spike above), CodeMirror is really a one-person project that we will depend on, for a CNCF project, going with something Microsoft-backed and on GitHub feels like the safer bet.

[cheryl7114]

Monaco definitely looks like the better choice. Thank you for the detailed comparison Lorna

[kumaradityaraj]

I will also lean towards Monaco seeing the comparison above.

[fantonangeli]

@lornakelly your Monaco + Lit example is a great one to ensure the functionalities are working well.
I also +1 for Monaco editor which I think is more IDE ready option

[lornakelly]

Confirmed with community and team that Monaco is the agreed choice