CodeMirror for Flutter #

A native Dart/Flutter port of CodeMirror 6 - the versatile code editor.

⚠️ Work in Progress: This is an early-stage port. See PORT.md for implementation status.

Features #

• Native performance - No JavaScript bridge, pure Dart/Flutter
• Syntax highlighting - Built-in support for JavaScript, TypeScript, JSON, Markdown, HTML, CSS
• Autocomplete - Configurable completion with keyboard navigation
• Code folding - Collapse/expand code blocks
• Multiple cursors - Edit multiple locations simultaneously
• Bracket matching - Automatic bracket highlighting and closing
• Search & replace - Find and replace with regex support
• Customizable themes - Full control over syntax colors and editor styling

Installation #

dependencies:
  codemirror_flutter: ^0.1.0
  # Optional: Bundle JetBrains Mono Nerd Fonts (recommended)
  codemirror_fonts: ^0.1.0 

Fonts #

This package uses JetBrains Mono by default. To make it look right, you have two options:

1. Recommended: Add codemirror_fonts dependency. The editor will automatically use it.
2. Manual: Add your own font to your app's pubspec.yaml and configure your theme to use it.

Usage #

import 'package:codemirror_flutter/codemirror.dart';
import 'package:flutter/material.dart';

class MyEditor extends StatefulWidget {
  @override
  State<MyEditor> createState() => _MyEditorState();
}

class _MyEditorState extends State<MyEditor> {
  late EditorState _state;

  @override
  void initState() {
    super.initState();
    ensureStateInitialized();
    ensureLanguageInitialized();
    
    _state = EditorState.create(EditorStateConfig(
      doc: 'const hello = "world";',
      extensions: ExtensionList([
        javascript(),
        basicSetup,
      ]),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return EditorView(
      state: _state,
      onStateChanged: (state) => setState(() => _state = state),
    );
  }
}

Architecture #

The editor is organized into three main layers:

1. Text Layer (lib/src/text/) #

B-tree based immutable document storage with O(log n) operations.

2. State Layer (lib/src/state/) #

Immutable editor state with transaction-based updates:

• EditorState - Immutable state container
• Transaction - Describes state changes
• Facet - Extension aggregation points
• StateField - Persistent state slots

3. View Layer (lib/src/view/) #

Flutter widgets for rendering and input:

• EditorView - Main editor widget
• Uses EditableText as base for text input
• Custom rendering for decorations and gutters

Related Packages #

• lezer - Incremental parser powering syntax highlighting

License #

MIT License - see LICENSE for details.

Based on CodeMirror 6 by Marijn Haverbeke.