@fsegurai/ngx-codemirror

@fsegurai/ngx-codemirror brings CodeMirror 6 to Angular as three standalone, signal-based components:

• ngx-code-editor - a code editor.
• ngx-code-diff-editor - a side-by-side diff editor (MergeView).
• ngx-code-unified-diff-editor - a unified diff editor (unifiedMergeView).

They work with Signal Forms, reactive forms and ngModel, and are zoneless and SSR-safe. Themes and extensions can be registered once with provideCodeEditor() and loaded lazily.

Table of contents

• Installation
• Compatibility
• Quick start
• Configuration
• Themes
• Extensions
• Convenience inputs
• Errors
• Programmatic API
• Components API
• Migrating from 21.x
• Demo application
• License

Installation

Install the library with its CodeMirror peer dependencies:

npm install @fsegurai/ngx-codemirror codemirror @codemirror/autocomplete @codemirror/commands @codemirror/language @codemirror/lint @codemirror/merge @codemirror/search @codemirror/state @codemirror/view

@angular/common, @angular/core and @angular/forms (^22) are peer dependencies too. For syntax highlighting, add the language descriptions you need, for example all of them with:

npm install @codemirror/language-data

Compatibility

Since 21.x the library is zoneless (provideZonelessChangeDetection()) and does not require Zone.js.

Quick start

Import the standalone component and bind its value with the forms API you use:

import { Component, signal } from '@angular/core';
import { FormField, form } from '@angular/forms/signals';
import { languages } from '@codemirror/language-data';
import { CodeEditorComponent } from '@fsegurai/ngx-codemirror';

@Component({
  selector: 'app-root',
  imports: [CodeEditorComponent, FormField],
  template: `
    <ngx-code-editor
      [formField]="editorForm.code"
      language="javascript"
      [languages]="languages"
      theme="dark"
      [lineWrapping]="true" />
  `,
})
export class AppComponent {
  protected readonly languages = languages;
  protected readonly model = signal({ code: 'const answer = 42;' });
  protected readonly editorForm = form(this.model);
}

The same component works with every forms API:

language is looked up by name or alias in languages: pass both, or set languages once in provideCodeEditor(). Without any languages, the editor emits a language-not-found error.

Configuration

provideCodeEditor(options, ...features) sets the default inputs of every editor of an injector. Use it in the application providers, a route's providers or a component's providers; a nested call merges over its ancestors.

import { ApplicationConfig } from '@angular/core';
import { languages } from '@codemirror/language-data';
import { provideCodeEditor, withExtensionPresets, withExtensions, withThemes } from '@fsegurai/ngx-codemirror';

export const appConfig: ApplicationConfig = {
  providers: [
    provideCodeEditor(
      { theme: 'auto', setup: 'basic', lineWrapping: true, languages },
      withThemes(
        { nord: () => import('@fsegurai/codemirror-theme-bundle').then((m) => m.nord) },
        { light: 'light', dark: 'nord' },
      ),
      withExtensions([myExtension]),
      withExtensionPresets({ vim: () => import('@replit/codemirror-vim').then((m) => m.vim()) }),
    ),
  ],
};

Precedence, lowest first: built-in defaults, providers (a nested one over its parent), instance inputs. An undefined value never overrides. The options are those of the inputs (theme, setup, placeholder, indentWithTab, indentUnit, lineWrapping, highlightWhitespace, languages, the convenience inputs and presets), plus global extensions.

Themes

The theme input (and the theme option) accepts:

To switch every editor at once (for example from an app light/dark toggle), use CodeEditorThemeService. Editors with their own theme input keep it.

inject(CodeEditorThemeService).set('nord'); // undefined goes back to the provider's theme

Precedence, highest first: the instance theme input, CodeEditorThemeService, the theme of provideCodeEditor(), 'light'. An unknown name emits invalid-theme and keeps the current theme.

Extensions

Extensions can be eager (Extension) or lazy (() => Promise<Extension>, loaded once and shared by every editor).

withExtensions([
  EditorView.lineWrapping,
  () => import('@replit/codemirror-indentation-markers').then((m) => m.indentationMarkers()),
]);

A failed lazy load emits extension-load-failed and keeps the extensions already applied.

Convenience inputs

Common CodeMirror features have their own inputs, so they need no extension code. With setup="basic" the boolean ones default to on; with another setup they default to off. An explicit value always wins.

<ngx-code-editor [formField]="f.code" [lineNumbers]="false" [tabSize]="2" [lint]="{ source: myLinter, gutter: true }" />

Errors

Every component emits error with a CodeEditorError (discriminated by code) instead of throwing, and keeps its current state. In development mode the error is also logged as a [ngx-codemirror] warning.

onError(error: CodeEditorError): void {
  if (error.code === ERROR_LANGUAGE_NOT_FOUND) console.warn(error.message, error.available);
}

Programmatic API

Get the component with viewChild() and use its signals and methods:

private readonly editor = viewChild.required(CodeEditorComponent);

format(): void {
  const code = this.editor().getValue();
  this.editor().setValue(prettify(code)); // emits valueChange once
  this.editor().focus();
}

Views are created after the first render (afterNextRender), so view() is undefined on the server and before ready emits.

Components API

Shared inputs

All three components take these inputs, plus the convenience inputs.

Shared outputs: touch (on blur, marks a bound field touched) and error (CodeEditorError).

ngx-code-editor

ngx-code-diff-editor

ngx-code-unified-diff-editor

It takes the inputs and outputs of ngx-code-editor (value is the modified document), plus:

<ngx-code-unified-diff-editor [(original)]="original" [(value)]="modified" language="typescript" [languages]="languages" />

Migrating from 21.x

22.0.0 contains breaking changes. Check each item; the CHANGELOG lists them all.

1. Minimum versions: Angular ^22 (including @angular/forms), TypeScript 6.0, Node.js >=24.15 for the workspace tooling.

2. New peer dependencies: install @codemirror/autocomplete, @codemirror/commands, @codemirror/language, @codemirror/lint, @codemirror/merge, @codemirror/search, @codemirror/state, @codemirror/view and codemirror (see Installation). @codemirror/language-data is no longer installed by the library.

3. CodeEditorModule is removed: import CodeEditorComponent, CodeDiffEditorComponent or CodeUnifiedDiffEditorComponent directly.

4. Forms: the components implement Signal Forms FormValueControl instead of ControlValueAccessor (NG_VALUE_ACCESSOR is gone). [formField], formControlName, [formControl] and [(ngModel)] keep working. Code calling writeValue(), registerOnChange(), registerOnTouched() or setDisabledState() must set value or disabled instead.

5. Renamed outputs (they clashed with native DOM events):

   Component	21.x	22.x
   editor	(change)	(valueChange)
   editor	(focus) / (blur)	(focused) / (blurred)
   diff editor	(originalFocus) / (originalBlur)	(originalFocused) / (originalBlurred)
   diff editor	(modifiedFocus) / (modifiedBlur)	(modifiedFocused) / (modifiedBlurred)

6. value is a model() and only user edits emit valueChange. disabled is an input: [(disabled)] and (disabledChange) are gone, and a disabled editor is also read-only. focus is now a method.

7. Errors are emitted, not logged: handle the new error output. An unknown language, a failed language load, an unknown theme name and an invalid indentUnit emit error and keep the current state; console output is a dev-mode warning only.

8. Inputs default to undefined so provideCodeEditor() can supply them; the effective defaults are unchanged. Code reading the input signals directly now sees undefined when unset.

9. setup="basic" no longer includes line numbers, fold gutter, active line, search and autocompletion directly: they are the convenience inputs, on by default with 'basic'. The resulting editor is equivalent; set an input to false to remove that part.

10. Theme accepts 'dark', 'auto' and registered names; an unknown string emits invalid-theme instead of being passed to CodeMirror. indentUnit is number | string.

Demo application

To see the components in action, check out the demo.

To set up the demo locally:

git clone https://github.com/fsegurai/ngx-codemirror.git
cd ngx-codemirror
bun install
bun start

This serves the application at http://localhost:4200.

License

Licensed under MIT.