StellarUI

<stellar-code-editor>

CodeMirror-backed code editing with Stellar code-token theming.

Properties

Preview

Markup

Copy
<stellar-code-editor
  description="Live CodeMirror editor bound through the host value prop."
  label="TypeScript example"
  wrap
>
  type Status = "draft" | "published"

function publish(status: Status) {
	if (status === "draft") {
		return "published"
	}
	return status
}
</stellar-code-editor>

API

Complete props, events, slots, and implementation notes for the shipped CodeMirror editor wrapper.

Props

PropTypeDefaultNotes
disabledbooleanfalse
densitydefault | flushdefault
descriptionstring''
inversebooleanfalse
labelstring''
language-srcstring''ES module URL exporting a CodeMirror extension or factory. Bundled CodeMirror language modules are available under /static/js/stellarui/code-editor/langs/.
diagnosticsstring''JSON diagnostics from a backend validator. Accepts an array or {diagnostics:[...]} with message, severity, and optional from/to or line/column.
placeholderstring''
readonlybooleanfalse
tab-sizenumber2
valuestring''
wrapbooleanfalse

Events

Slots

Notes

  • `value` is the canonical mutable document. Authored text content is only used as the initial value when `value` is empty.
  • Use `density="flush"` or set `--code-editor-padding-block`, `--code-editor-padding-inline`, and `--field-stack-gap` to `0` for a flush readonly code display.
  • Use `data-bind:value` for Datastar so user edits round-trip through the host `value` prop and `input` event.
  • The built-in copy button copies the current editor document, including user edits after the initial render.
  • `tab-size` affects tab characters, not spaces. The docs sample includes real tab characters so the control visibly changes indentation.
  • Leave `language-src` empty for plain text. Set Language Src to an ES module URL when syntax support is needed; the module may export a CodeMirror extension or an extension factory as `default` or `extension`.
  • Language factories may receive the editor's CodeMirror runtime context: `({ EditorState, EditorView, HighlightStyle, StreamLanguage, syntaxHighlighting, tags }) => extension`. Use that context when hand-writing lightweight languages so extensions come from the same runtime as the editor.
  • Bundled CodeMirror 6 language modules live in `web/static/js/stellarui/code-editor/langs/`: `javascript.js`, `typescript.js`, `jsx.js`, `tsx.js`, `json.js`, `html.js`, `css.js`, `markdown.js`, `ron.js`, and `curl.js`. Their source wrappers are in `webcomponents/src/code-editor-langs/langs/`.
  • The language build aliases shared CodeMirror packages back to the editor runtime before bundling `@codemirror/lang-*`, so native features such as folding and indentation can work without loading a second `@codemirror/state`.
  • By default the editor applies the opposite `--code-*` token set locally; `inverse` restores the inherited page token set for normal contrast mode.
  • CodeMirror theme and highlight colors map directly to generated `stellar.css` `--code-*` variables through component-local conversion vars.