HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Code EditorView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorAn editor for a file of code, drawn by a code editor you connect.ExperimentalSince 0.216.0InputsUsageimport'@fusion.dev/helix/code-editor'import'@fusion.dev/helix-headless/code-editor'Preview
API ReferenceRoothelix-code-editorAn editor for a file of code, drawn by a code editor you connect.
PropTypeDescriptioncontrolsLabelstringDefault"Editor controls"The name of the header's toolbar, read by screen readers.defaultValuestringDefault""The value the control starts with. A form reset returns it to this value,
and to the value attribute where this one is not written, as a native
control resets to the value it declares.diagnosticLabelstringDefault"Line {line}: {message}"How one problem in the list reads. {line} is its line and {message} what it says.diagnosticsreadonlyEditorDiagnostic[]Default[]The problems in the text, each underlined and listed under the editor.diagnosticsLabelstringDefault"Problems"The list of problems' name.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.engineEditorEngineWhat draws the editor, such as codeMirrorEngine() from
@fusion.dev/helix-editor. Absent, the editor is a plain text field.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.fillbooleanDefaultfalseCovers the container instead of taking a height of its own, for an
editor that fills a pane. The container needs a position, such as
position: relative.findCloseLabelstringDefault"Close find"The name of the find bar's Close button.findControlsLabelstringDefault"Find controls"The name of the find bar's toolbar, read by screen readers.findInvalidLabelstringDefault"Not a valid regular expression"What the find bar says when its regular expression cannot be read.findLabelstringDefault"Find"The name of the Find button and the find bar's field.findMatchCaseLabelstringDefault"Match case"The name of the option that finds only the same case.findNextLabelstringDefault"Next match"The name of the button that selects the next match.findPreviousLabelstringDefault"Previous match"The name of the button that selects the previous match.findRegexLabelstringDefault"Use regular expression"The name of the option that reads the search as a regular expression.findReplaceLabelstringDefault"Find and replace"The name of the button that shows the replace field under the find field.findWholeWordLabelstringDefault"Match whole word"The name of the option that finds only whole words.hintstringDefault""Help text shown under the control. A validation message replaces it.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.languagestringDefault""The language to highlight, such as ts, css, md or rust. Empty is plain text.lineNumbersbooleanDefaultfalseDraws each line's number beside it, in an engine.matchesLabelstringDefault"{count, plural, =0 {No matches} one {{index} of # match} other {{index} of # matches}}"What the find bar says of its matches. {index} is the selected match,
counting from 1, and {count} how many there are.namestringDefault""The name the control's value is submitted under.placeholderstringDefault""Shown while the editor is empty.positionLabelstringDefault"Line {line}, column {column}"Where the caret is, in the status line. {line} and {column} count from 1.problemsLabelstringDefault"{count, plural, =0 {No problems} one {# problem} other {# problems}}"How many problems there are, in the status line. {count} is the number.readOnlybooleanDefaultfalseLets the reader select and copy, and not change, the text.replaceAllLabelstringDefault"Replace all"The name of the button that replaces every match.replaceLabelstringDefault"Replace"The name of the button that replaces the selected match.replaceWithLabelstringDefault"Replace with"The name of the field the replacement is typed in.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.rowsnumberDefault8How many lines tall the plain field is before it scrolls, without an engine.separation"outlined"|"plain"How the frame stands off the page. Unset, it is outlined. plain draws
no edge or corners, for a pane that draws its own.valuestringThe control's current value, which its form submits.valueMissingMessagestringThe message shown when the field is required and empty.wrapbooleanDefaultfalseWraps long lines to the editor's width, in place of scrolling sideways.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionactionsThe page's own controls in the header, such as Run or Format, before the built-in ones.hintHelp under the editor, in place of hint.labelThe editor's name in the header, such as a file name, in place of label.
EventTypeDescriptionchangeEventThe reader finished an edit and focus left the code, in the engine or the plain field.helix-before-changeHelixBeforeChangeEventThe text is about to change. Cancelable: cancel it to keep the current text.inputEventFired after the text changes.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidMoves focus to the control, as focusing a native control does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestValue(next: string) => booleanRequests a new value, and returns whether the change was applied.select(from: number, to: unknown) => voidSelects a range of the code and puts the caret there, in the engine or the plain field.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.
PartDescriptionbodyThe box the code is drawn in, between the header and the problems.controlThe <textarea> the editor is without an engine, and that keeps its validity with one.controlsThe toolbar in the header: the page's actions, then Find.controls-toolbarThe box inside the header's toolbar that lays its buttons out.diagnosticOne problem in the list, a button that moves the caret to it.diagnostic-dangerA problem whose tone is danger, beside diagnostic.diagnostic-iconThe mark of a problem's tone, before its words.diagnostic-infoA problem whose tone is info, beside diagnostic.diagnostic-warningA problem whose tone is warning, beside diagnostic.diagnosticsThe list of problems under the code, while there are any.feedbackThe message that says what is wrong.fieldThe frame around the header, the code, the problems and the status line.findThe button in the header that opens the find bar.find-barThe find bar under the header, while it is open.find-buttonThe Find button's inner button.find-closeThe button that closes the find bar.find-close-buttonThe close button's inner button.find-close-liveThe close button's live region, which speaks while the button is pending.find-close-spinnerThe ring the close button turns while it is pending.find-close-textThe box the close button's icon sits in.find-controlsThe find bar's toolbar of options and moves.find-controls-toolbarThe box inside the find bar's toolbar that lays its buttons out.find-countWhich match is selected, of how many.find-fieldThe field the search is typed in.find-liveThe Find button's live region, which speaks while the button is pending.find-match-caseThe option that finds only the same case. Pressed while it applies.find-match-case-buttonThe match case button's inner button.find-match-case-liveThe match case button's live region, which speaks while the button is pending.find-match-case-spinnerThe ring the match case button turns while it is pending.find-match-case-textThe box the match case button's icon sits in.find-nextThe button that selects the next match.find-next-buttonThe next match button's inner button.find-next-liveThe next match button's live region, which speaks while the button is pending.find-next-spinnerThe ring the next match button turns while it is pending.find-next-textThe box the next match button's icon sits in.find-previousThe button that selects the previous match.find-previous-buttonThe previous match button's inner button.find-previous-liveThe previous match button's live region, which speaks while the button is pending.find-previous-spinnerThe ring the previous match button turns while it is pending.find-previous-textThe box the previous match button's icon sits in.find-regexThe option that reads the search as a regular expression. Pressed while it applies.find-regex-buttonThe regular expression button's inner button.find-regex-liveThe regular expression button's live region, which speaks while the button is pending.find-regex-spinnerThe ring the regular expression button turns while it is pending.find-regex-textThe box the regular expression button's icon sits in.find-replaceThe button that shows the replace field under the find field. Expanded while it shows.find-replace-buttonThe find and replace button's inner button.find-replace-liveThe find and replace button's live region, which speaks while the button is pending.find-replace-spinnerThe ring the find and replace button turns while it is pending.find-replace-textThe box the find and replace button's icon sits in.find-spinnerThe ring the Find button turns while it is pending.find-textThe box the Find button's icon sits in.find-whole-wordThe option that finds only whole words. Pressed while it applies.find-whole-word-buttonThe whole word button's inner button.find-whole-word-liveThe whole word button's live region, which speaks while the button is pending.find-whole-word-spinnerThe ring the whole word button turns while it is pending.find-whole-word-textThe box the whole word button's icon sits in.headerThe strip above the code: the name, the language, and the controls.hintHelp under the editor, while nothing is wrong.labelThe editor's name in the header.languageThe language's name in the header.positionThe caret's line and column, in the status line.problem-countHow many problems there are, in the status line.replaceThe button that replaces the selected match.replace-allThe button that replaces every match.replace-all-buttonThe Replace all button's inner button.replace-all-liveThe Replace all button's live region, which speaks while the button is pending.replace-all-spinnerThe ring the Replace all button turns while it is pending.replace-all-textThe box the Replace all button's words sit in.replace-buttonThe Replace button's inner button.replace-fieldThe field the replacement is typed in.replace-liveThe Replace button's live region, which speaks while the button is pending.replace-spinnerThe ring the Replace button turns while it is pending.replace-textThe box the Replace button's words sit in.statusThe strip under the code.viewWhere an engine draws, while one is connected.
CSS PropertyDescription--code-editor-background-colorThe ground the code is drawn on. Defaults to the page's background.--code-editor-block-sizeThe frame's height, as a length: 24rem unless set. Ignored with fill, where the container decides it.--code-editor-border-colorThe frame's edge and the lines between its strips.--code-editor-font-sizeThe code's size. Defaults to text-sm.--code-editor-header-background-colorThe fill of the header, the find bar, and the status line.--code-editor-radiusThe frame's corner radius.
Custom stateDescriptionconnectedAn engine draws the editor.find-openThe find bar is open.invalidThe editor has an error to show, from required or your feedback.replace-openThe replace field shows under the find field.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-code-editorAn editor for a file of code, drawn by a code editor you connect.
PropTypeDescriptioncontrolsLabelstringDefault"Editor controls"The name of the header's toolbar, read by screen readers.defaultValuestringDefault""The value the control starts with. A form reset returns it to this value,
and to the value attribute where this one is not written, as a native
control resets to the value it declares.diagnosticLabelstringDefault"Line {line}: {message}"How one problem in the list reads. {line} is its line and {message} what it says.diagnosticsreadonlyEditorDiagnostic[]Default[]The problems in the text, each underlined and listed under the editor.diagnosticsLabelstringDefault"Problems"The list of problems' name.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.engineEditorEngineWhat draws the editor, such as codeMirrorEngine() from
@fusion.dev/helix-editor. Absent, the editor is a plain text field.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.findCloseLabelstringDefault"Close find"The name of the find bar's Close button.findControlsLabelstringDefault"Find controls"The name of the find bar's toolbar, read by screen readers.findInvalidLabelstringDefault"Not a valid regular expression"What the find bar says when its regular expression cannot be read.findLabelstringDefault"Find"The name of the Find button and the find bar's field.findMatchCaseLabelstringDefault"Match case"The name of the option that finds only the same case.findNextLabelstringDefault"Next match"The name of the button that selects the next match.findPreviousLabelstringDefault"Previous match"The name of the button that selects the previous match.findRegexLabelstringDefault"Use regular expression"The name of the option that reads the search as a regular expression.findReplaceLabelstringDefault"Find and replace"The name of the button that shows the replace field under the find field.findWholeWordLabelstringDefault"Match whole word"The name of the option that finds only whole words.hintstringDefault""Help text shown under the control. A validation message replaces it.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.languagestringDefault""The language to highlight, such as ts, css, md or rust. Empty is plain text.lineNumbersbooleanDefaultfalseDraws each line's number beside it, in an engine.matchesLabelstringDefault"{count, plural, =0 {No matches} one {{index} of # match} other {{index} of # matches}}"What the find bar says of its matches. {index} is the selected match,
counting from 1, and {count} how many there are.namestringDefault""The name the control's value is submitted under.placeholderstringDefault""Shown while the editor is empty.positionLabelstringDefault"Line {line}, column {column}"Where the caret is, in the status line. {line} and {column} count from 1.problemsLabelstringDefault"{count, plural, =0 {No problems} one {# problem} other {# problems}}"How many problems there are, in the status line. {count} is the number.readOnlybooleanDefaultfalseLets the reader select and copy, and not change, the text.replaceAllLabelstringDefault"Replace all"The name of the button that replaces every match.replaceLabelstringDefault"Replace"The name of the button that replaces the selected match.replaceWithLabelstringDefault"Replace with"The name of the field the replacement is typed in.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.rowsnumberDefault8How many lines tall the plain field is before it scrolls, without an engine.valuestringThe control's current value, which its form submits.valueMissingMessagestringThe message shown when the field is required and empty.wrapbooleanDefaultfalseWraps long lines to the editor's width, in place of scrolling sideways.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionactionsThe page's own controls in the header, such as Run or Format, before the built-in ones.hintHelp under the editor, in place of hint.labelThe editor's name in the header, such as a file name, in place of label.
EventTypeDescriptionchangeEventThe reader finished an edit and focus left the code, in the engine or the plain field.helix-before-changeHelixBeforeChangeEventThe text is about to change. Cancelable: cancel it to keep the current text.inputEventFired after the text changes.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidPuts the caret in the editor, as a label pointing at it would.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestValue(next: string) => booleanRequests a new value, and returns whether the change was applied.select(from: number, to: unknown) => voidSelects a range of the code and puts the caret there, in the engine or the plain field.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.
PartDescriptionbodyThe box the code is drawn in, between the header and the problems.controlThe <textarea> the editor is without an engine, and that keeps its validity with one.controlsThe toolbar in the header: the page's actions, then Find.controls-toolbarThe box inside the header's toolbar that lays its buttons out.diagnosticOne problem in the list, a button that moves the caret to it.diagnostic-dangerA problem whose tone is danger, beside diagnostic.diagnostic-iconThe mark of a problem's tone, before its words.diagnostic-infoA problem whose tone is info, beside diagnostic.diagnostic-warningA problem whose tone is warning, beside diagnostic.diagnosticsThe list of problems under the code, while there are any.feedbackThe message that says what is wrong.fieldThe frame around the header, the code, the problems and the status line.findThe button in the header that opens the find bar.find-barThe find bar under the header, while it is open.find-buttonThe Find button's inner button.find-closeThe button that closes the find bar.find-close-buttonThe close button's inner button.find-close-liveThe close button's live region, which speaks while the button is pending.find-close-spinnerThe ring the close button turns while it is pending.find-close-textThe box the close button's icon sits in.find-controlsThe find bar's toolbar of options and moves.find-controls-toolbarThe box inside the find bar's toolbar that lays its buttons out.find-countWhich match is selected, of how many.find-fieldThe field the search is typed in.find-liveThe Find button's live region, which speaks while the button is pending.find-match-caseThe option that finds only the same case. Pressed while it applies.find-match-case-buttonThe match case button's inner button.find-match-case-liveThe match case button's live region, which speaks while the button is pending.find-match-case-spinnerThe ring the match case button turns while it is pending.find-match-case-textThe box the match case button's icon sits in.find-nextThe button that selects the next match.find-next-buttonThe next match button's inner button.find-next-liveThe next match button's live region, which speaks while the button is pending.find-next-spinnerThe ring the next match button turns while it is pending.find-next-textThe box the next match button's icon sits in.find-previousThe button that selects the previous match.find-previous-buttonThe previous match button's inner button.find-previous-liveThe previous match button's live region, which speaks while the button is pending.find-previous-spinnerThe ring the previous match button turns while it is pending.find-previous-textThe box the previous match button's icon sits in.find-regexThe option that reads the search as a regular expression. Pressed while it applies.find-regex-buttonThe regular expression button's inner button.find-regex-liveThe regular expression button's live region, which speaks while the button is pending.find-regex-spinnerThe ring the regular expression button turns while it is pending.find-regex-textThe box the regular expression button's icon sits in.find-replaceThe button that shows the replace field under the find field. Expanded while it shows.find-replace-buttonThe find and replace button's inner button.find-replace-liveThe find and replace button's live region, which speaks while the button is pending.find-replace-spinnerThe ring the find and replace button turns while it is pending.find-replace-textThe box the find and replace button's icon sits in.find-spinnerThe ring the Find button turns while it is pending.find-textThe box the Find button's icon sits in.find-whole-wordThe option that finds only whole words. Pressed while it applies.find-whole-word-buttonThe whole word button's inner button.find-whole-word-liveThe whole word button's live region, which speaks while the button is pending.find-whole-word-spinnerThe ring the whole word button turns while it is pending.find-whole-word-textThe box the whole word button's icon sits in.headerThe strip above the code: the name, the language, and the controls.hintHelp under the editor, while nothing is wrong.labelThe editor's name in the header.languageThe language's name in the header.positionThe caret's line and column, in the status line.problem-countHow many problems there are, in the status line.replaceThe button that replaces the selected match.replace-allThe button that replaces every match.replace-all-buttonThe Replace all button's inner button.replace-all-liveThe Replace all button's live region, which speaks while the button is pending.replace-all-spinnerThe ring the Replace all button turns while it is pending.replace-all-textThe box the Replace all button's words sit in.replace-buttonThe Replace button's inner button.replace-fieldThe field the replacement is typed in.replace-liveThe Replace button's live region, which speaks while the button is pending.replace-spinnerThe ring the Replace button turns while it is pending.replace-textThe box the Replace button's words sit in.statusThe strip under the code.viewWhere an engine draws, while one is connected.
Custom stateDescriptionconnectedAn engine draws the editor.find-openThe find bar is open.invalidThe editor has an error to show, from required or your feedback.replace-openThe replace field shows under the find field.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionFillAn editor that fills one side of a split pane, under fill.PlainThe editor with no engine connected: a text field in the code face, with the same header, find bar and status line.PreviewA file of TypeScript drawn by CodeMirror, with its problems listed under it and a page action in the header.PreviewA file of TypeScript drawn by CodeMirror, with its problems listed under it and a page action in the header.