flutter_monaco library

A Flutter plugin for integrating the Monaco Editor into Flutter applications.

Flutter Monaco provides a full-featured code editor powered by the same engine that drives Visual Studio Code. It supports syntax highlighting for 100+ languages, multiple themes, and a comprehensive API for editor manipulation.

Features

  • 100+ Language Support - Syntax highlighting for all major programming languages
  • Multiple Themes - VS Light, VS Dark, High Contrast themes
  • Rich API - Full programmatic control over the editor
  • Multi-Editor Support - Run multiple independent editor instances
  • Cross-Platform - Works on Android, iOS, macOS, Windows, and Web

Quick Start

import 'package:flutter_monaco/flutter_monaco.dart';

// Simple usage with the widget
MonacoEditor(
  options: EditorOptions(
    language: MonacoLanguage.javascript,
    theme: MonacoTheme.vsDark,
  ),
)

// Advanced usage with controller
final controller = await MonacoController.create(
  options: EditorOptions(
    language: MonacoLanguage.python,
    fontSize: 16,
  ),
);

await controller.setValue('print("Hello, World!")');
final content = await controller.getValue();

Platform Support

  • ✅ Android (5.0+)
  • ✅ iOS (11.0+)
  • ✅ macOS (10.13+)
  • ✅ Windows (10 version 1809+)
  • ✅ Web (supported)
  • ❌ Linux (not supported)

Additional Resources

Classes

CompletionItem
Represents a suggestion item for code completion.
CompletionList
A list of completion items to be returned to the editor.
CompletionRequest
Represents a request for completion items from the editor.
DecorationOptions
Defines options for applying decorations to text in the editor.
EditOperation
Represents a single text edit operation to be applied to the editor.
EditorOptions
Options for configuring the Monaco Editor behavior and appearance.
EditorState
A snapshot of the editor's complete state.
FindMatch
Represents a single match found during a find operation.
FindOptions
Defines options for programmatic find operations.
JsonDiagnosticsOptions
Configures Monaco's JSON language diagnostics and schema validation.
JsonDiagnosticsSchema
Associates a JSON Schema with a set of Monaco model-URI patterns.
LiveStats
A snapshot of live statistics from the editor.
MarkerData
Represents a marker, such as a warning or error, displayed in the editor.
MonacoAction
Pre-built Monaco editor action identifiers.
MonacoAssets
Manages Monaco Editor assets across all platforms.
MonacoConstants
Unified constants for the Monaco editor
MonacoController
Manages the lifecycle and interaction with a Monaco Editor instance.
MonacoEditor
A widget that renders a Monaco Editor instance.
MonacoEditorTheme
Inherited styling for MonacoEditor's built-in Flutter chrome.
MonacoEditorThemeData
Visual configuration for MonacoEditor's built-in loading, error, and status-bar chrome.
MonacoFocusGuard
A tiny, no-UI helper that reasserts Monaco focus on common desktop events.
MonacoOverlayBoundary
Marks a Flutter widget subtree as a static overlay above Monaco on Web.
MonacoRouteObserver
A specialized RouteObserver for applications using Monaco Editor.
MonacoScaffold
Drop-in `Scaffold` replacement that automatically protects common static overlay slots from iframe-backed Monaco editors on Web.
MonacoThemeDefinition
A typed Dart representation of Monaco's IStandaloneThemeData.
MonacoThemeRule
A single token color rule inside a MonacoThemeDefinition.
Position
Represents a position in the editor, using 1-based indexing for lines and columns.
Range
Represents a range in the editor, defined by a start and end Position.
RelatedInformation
Represents related information for a MarkerData, allowing navigation to other parts of the code.

Enums

AutoClosingBehavior
Defines the automatic closing behavior for brackets and quotes.
CompletionItemKind
Defines the kind of a CompletionItem for icon and sorting purposes.
CursorBlinking
Defines the animation style of the editor's cursor.
CursorStyle
Defines the visual style of the editor's cursor.
DiagnosticsSeverity
Severity levels for Monaco's JSON language diagnostics.
InsertTextRule
Defines rules for how the insertText of a CompletionItem is handled.
MarkerSeverity
Defines the severity levels for markers (diagnostics) in the editor.
MonacoFont
A collection of common font families for the Monaco editor.
MonacoLanguage
Defines the programming languages supported by the Monaco Editor for syntax highlighting and other language-specific features.
MonacoTheme
Type-safe enums for Monaco Editor configuration Provides compile-time safety while maintaining backward compatibility Defines the color themes available in the Monaco Editor.
RenderWhitespace
Defines how whitespace characters are rendered in the editor.

Exceptions / Errors

MonacoJavaScriptException
Exception thrown when a typed Monaco JavaScript bridge call fails.