flutter_monaco_editor #

A complete Flutter wrapper for Monaco Editor (the editor that powers VS Code) with full API parity across Web, Android, iOS, macOS, Windows, and Linux.

▶ Try the live demo → #

No install required — the example gallery (9 demos covering every API surface) is deployed to GitHub Pages straight from this repo. Check out the editor, diff view, IntelliSense, custom themes, and the transparent-background showcase right in your browser.

Status #

Early development. Core API + most language features are in place. See PLAN.md and CHANGELOG.md.

Installation #

dependencies:
  flutter_monaco_editor: ^0.5.0

No per-platform registration — one import, one widget:

import 'package:flutter_monaco_editor/flutter_monaco_editor.dart';

MonacoEditor(
  initialValue: 'void main() {}',
  language: 'dart',
)

Platform support #

Monaco's JavaScript API is identical regardless of hosting — one Dart API, one shared JS bridge, picked per platform automatically.

Shared native requirement — loopback HTTP #

On every native platform (mobile + desktop), Monaco's assets are served over an in-process HTTP server on 127.0.0.1:<auto-port>. The alternative — loading from file:// — breaks Monaco's diff-compute Web Worker on Android (blocked importScripts) and WebKitGTK on Linux (cross-origin restrictions). Loopback HTTP fixes both cleanly.

This means each platform needs a small amount of configuration to allow localhost traffic:

Android setup #

1. Add the INTERNET permission to android/app/src/main/AndroidManifest.xml:

   <uses-permission android:name="android.permission.INTERNET"/>
   

2. Create android/app/src/main/res/xml/network_security_config.xml:

   <?xml version="1.0" encoding="utf-8"?>
   <network-security-config>
       <domain-config cleartextTrafficPermitted="true">
           <domain includeSubdomains="false">127.0.0.1</domain>
           <domain includeSubdomains="false">localhost</domain>
       </domain-config>
   </network-security-config>
   

3. Reference it from the <application> tag:

   <application
       ...
       android:networkSecurityConfig="@xml/network_security_config">
   

See example/android/ for a working reference.

iOS setup #

Add to ios/Runner/Info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>

macOS setup #

Same as iOS — add NSAllowsLocalNetworking to macos/Runner/Info.plist.

Linux setup #

Install the system WebKitGTK dev headers (package name varies by distro):

# Debian/Ubuntu
sudo apt install libwebkit2gtk-4.1-dev
# Fedora
sudo dnf install webkit2gtk4.1-devel
# Arch
sudo pacman -S webkit2gtk-4.1

Also wrap FlView in a GtkOverlay in linux/runner/my_application.cc (required by webview_all's Linux backend). See example/linux/runner/my_application.cc for the exact edit.

Windows setup #

Windows 10/11 ship WebView2 automatically. No additional setup needed.

Running the example locally #

cd example
flutter pub get
flutter run -d chrome     # or: -d linux, -d macos, -d android, ...

Eight demos in a sidebar gallery cover the API:

• Basic — minimal editor + theme / read-only toggles
• Languages — 10 languages with syntax highlighting
• Options — live sliders / toggles for font, word-wrap, minimap, cursor style
• Diagnostics — error/warning/info markers + decorations + gutter glyphs
• Actions & Commands — custom actions, keybindings, context-menu entries
• IntelliSense — Dart-side completion + hover providers
• Diff Editor — side-by-side / inline
• Custom Themes — MonacoThemes.defineTheme with Catppuccin / Tokyo Night presets + MonacoTheme.fromFlutterTheme helper
• Custom Background — MonacoEditor(transparent: true) + MonacoTheme.transparent() over a Flutter gradient

API tour #

final controller = MonacoController(
  initialValue: 'void main() {}',
  language: 'dart',
  options: MonacoEditorOptions(
    fontSize: 14,
    wordWrap: MonacoWordWrap.on,
    minimap: MonacoMinimapOptions(enabled: true),
    bracketPairColorization: true,
  ),
);

// Position + selection + content streams
controller.onDidChangeContent.listen(print);
controller.onDidChangeCursorPosition.listen((pos) => print('$pos'));

// Decorations + markers
await controller.setModelMarkers(
  [MonacoMarker(range: ..., severity: MonacoMarkerSeverity.error, message: '...')],
);

// Actions + keybindings
await controller.addAction(MonacoAction(
  id: 'app.save',
  label: 'Save',
  keybindings: [MonacoKeyMod.ctrlCmd | MonacoKeyCode.keyS],
  run: (_) => save(controller.value),
));

// Language providers (global, per language id)
await MonacoLanguages.registerCompletionProvider('dart', MyCompletionProvider());
await MonacoLanguages.registerHoverProvider('dart', MyHoverProvider());

// Custom themes
await MonacoThemes.defineTheme('my-theme',
  MonacoTheme.fromFlutterTheme(Theme.of(context)));
await MonacoThemes.setTheme('my-theme');

// Diff editor
MonacoDiffEditor(
  original: originalSource,
  modified: modifiedSource,
  language: 'dart',
  renderSideBySide: true,
)

Contributing #

See CONTRIBUTING.md.

License #

MIT. Monaco Editor is bundled under its MIT license — see LICENSE and assets/ThirdPartyNotices.txt.