Examples - AppFlowy Editor

Explore working examples demonstrating various features and use cases of AppFlowy Editor.

Example Application

The AppFlowy Editor repository includes a comprehensive example application with multiple demonstrations.

Running the Examples

Clone the repository and run the example app:

git clone https://github.com/AppFlowy-IO/appflowy-editor.git
cd appflowy-editor/example
flutter pub get
flutter run

The example app automatically loads different demos based on your platform (desktop vs mobile).

Desktop Examples

Basic Editor

Location: example/lib/pages/desktop_editor.dart A full-featured desktop editor with:

Complete toolbar with formatting options
Floating toolbar on text selection
Keyboard shortcuts
Custom editor styling
Block component builders

DesktopEditor(
  editorState: editorState,
  textDirection: TextDirection.ltr,
)

Location: example/lib/pages/fixed_toolbar_editor.dart Demonstrates a fixed toolbar implementation that remains visible at all times, useful for word processor-style applications. Key Features:

Persistent toolbar position
Custom toolbar items
Integration with editor state

Drag to Reorder

Location: example/lib/pages/drag_to_reorder_editor.dart Showcases the block drag-and-drop reordering feature:

Drag blocks to reorder
Visual drop indicators
Auto-scroll during drag
Nested block support

Focus Example

Location: example/lib/pages/focus_example_for_editor.dart Demonstrates focus management:

Multiple editor instances
Focus switching between editors
Header/footer focus handling
Focus state persistence

Auto Expand Editor

Location: example/lib/pages/auto_expand_editor.dart Shows how to create an editor that automatically expands to fit content:

No fixed height
Grows with content
Useful for embedded editors
Minimal scrolling

AutoExpandEditor(
  editorState: EditorState.blank(),
)

Editor List

Location: example/lib/pages/editor_list.dart Demonstrates multiple editors in a scrollable list:

Multiple independent editors
ListView integration
Individual editor states
Performance optimization

Mobile Examples

Mobile Editor

Location: example/lib/pages/mobile_editor.dart Optimized mobile editing experience:

Touch-friendly interface
Mobile toolbar
Gesture handling
Magnifier support
Keyboard management

MobileEditor(
  editorState: editorState,
  editorStyle: customEditorStyle,
)

The mobile example includes:

Floating toolbar with common actions
Color picker
Link editor
Block type selector
Text decoration options

Markdown Examples

Markdown Editor

Location: example/lib/pages/markdown_editor.dart Full markdown editing experience:

Real-time markdown rendering
Syntax highlighting
Import/export markdown
Custom markdown parsers

Animated Markdown

Location: example/lib/pages/animated_markdown_page.dart Smooth transitions between markdown and rich text:

Animated conversions
Live preview
Toggle between modes
Markdown shortcuts

Collaboration Examples

Real-time Collaboration

Location: example/lib/pages/collab_editor.dart Demonstrates real-time collaborative editing:

Multiple users
Operational transformation
Cursor presence
Conflict resolution

This example requires a collaboration server. See the example code for setup instructions.

Offline Collaboration

Location: example/lib/pages/collab_editor_offline.dart Showcases offline-first collaboration:

Local-first editing
Sync when online
Conflict resolution
Uses appflowy_editor_sync_plugin

Collaboration Selection

Location: example/lib/pages/collab_selection_editor.dart Visualizes multiple user selections:

Remote user cursors
Selection highlighting
User presence indicators
Custom colors per user

CollabSelectionEditor(
  // Shows remote selections with different colors
)

Customization Examples

Custom Theme

Location: example/lib/pages/customize_theme_for_editor.dart Complete theme customization:

Custom colors
Typography
Block styling
Component appearance

CustomizeThemeForEditor(
  // Demonstrates custom EditorStyle
)

Auto Complete

Location: example/lib/pages/auto_complete_editor.dart Implements autocomplete functionality:

Mention suggestions (@user)
Hashtag completion (#topic)
Custom completion triggers
Filtered suggestion lists

RTL Support Example

Demonstrates right-to-left language support:

Arabic text example
RTL text direction
Proper cursor behavior
Bidirectional text handling

Usage from example app:

Editor(
  jsonString: 'assets/arabic_example.json',
  textDirection: TextDirection.rtl,
)

Document Import/Export Examples

Loading Documents

Examples of loading different document formats:

From JSON

final jsonString = await rootBundle.loadString('assets/example.json');
final document = Document.fromJson(jsonDecode(jsonString));
final editorState = EditorState(document: document);

From HTML

final htmlString = await rootBundle.loadString('assets/example.html');
final document = htmlToDocument(htmlString);
final editorState = EditorState(document: document);

From Markdown

final markdownString = await rootBundle.loadString('assets/example.md');
final document = markdownToDocument(markdownString);
final editorState = EditorState(document: document);

From Quill Delta

final deltaJson = await rootBundle.loadString('assets/delta.json');
final delta = Delta.fromJson(jsonDecode(deltaJson));
final document = quillDeltaEncoder.convert(delta);
final editorState = EditorState(document: document);

Exporting Documents

Examples show exporting to various formats:

// Export to JSON
final json = jsonEncode(editorState.document.toJson());

// Export to Markdown
final markdown = documentToMarkdown(editorState.document);

// Export to PDF (desktop only)
final pdfMarkdown = documentToMarkdown(editorState.document);
final pdf = await PdfHTMLEncoder().convert(pdfMarkdown);

Performance Examples

Large Document Example

The example app includes a large document test:

// Generate 10,000 paragraph nodes
final nodes = List.generate(
  10000,
  (index) => paragraphNode(text: '$index ${generateRandomString(50)}'),
);
final editorState = EditorState(
  document: Document(root: pageNode(children: nodes)),
);

Demonstrates:

Lazy loading
Scroll performance
Memory management
Rendering optimization

Custom Parser Example

Location: example/lib/pages/markdown/markdown_code_block_parser.dart Shows how to create custom markdown parsers:

class CustomCodeBlockSyntax extends md.BlockSyntax {
  @override
  md.Node? parse(md.BlockParser parser) {
    // Custom parsing logic
  }
}

Code Snippets from Examples

Custom Block Component

final blockComponentBuilders = <String, BlockComponentBuilder>{
  ...standardBlockComponentBuilderMap,
  'custom_block': CustomBlockComponentBuilder(),
};

class CustomBlockComponentBuilder extends BlockComponentBuilder {
  @override
  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
    return CustomBlockWidget(
      key: blockComponentContext.node.key,
      node: blockComponentContext.node,
      configuration: blockComponentContext.configuration,
    );
  }
}

Custom Keyboard Shortcut

final customShortcuts = [
  ...standardCommandShortcutEvents,
  CommandShortcutEvent(
    key: 'Custom shortcut',
    command: 'ctrl+shift+k',
    handler: (editorState) {
      // Custom handler logic
      return KeyEventResult.handled;
    },
  ),
];

Custom Character Shortcut

final customCharacterShortcuts = [
  ...standardCharacterShortcutEvents,
  CharacterShortcutEvent(
    key: 'Custom arrow',
    character: '>',
    handler: (editorState) async {
      // Convert => to arrow symbol
      return true;
    },
  ),
];

Example Assets

The example app includes sample documents:

assets/example.json - Desktop example document
assets/mobile_example.json - Mobile optimized document
assets/arabic_example.json - RTL language example
assets/example.html - HTML import example

Running Specific Examples

To navigate to specific examples in the app:

Run the example application
Tap the menu icon (☰) in the top-left
Select from the categories:
- AppFlowy Editor Demo - Basic editor variations
- Showcases - Feature demonstrations
- Export To X Demo - Export functionality
- Import From X Demo - Import functionality

Building on Examples

Use these examples as starting points:

Copy the example code for features you need
Modify to fit your use case (styling, behavior, etc.)
Extend with custom components specific to your app
Test thoroughly with your data and edge cases

The example app is a great reference for best practices and common patterns. Study the code to understand how different features work together.

Example-Specific Documentation

For detailed documentation on implementing specific features shown in examples:

Customization

Theming and styling guides

Mobile

Mobile-specific features

Plugins

Plugin integration guides

Migration

Upgrading between versions

Guides

​Example Application

​Running the Examples

​Desktop Examples

​Basic Editor

​Fixed Toolbar Editor

​Drag to Reorder

​Focus Example

​Auto Expand Editor

​Editor List

​Mobile Examples

​Mobile Editor

​Mobile Toolbar

​Markdown Examples

​Markdown Editor

​Animated Markdown

​Collaboration Examples

​Real-time Collaboration

​Offline Collaboration

​Collaboration Selection

​Customization Examples

​Custom Theme

​Auto Complete

​RTL Support Example

​Document Import/Export Examples

​Loading Documents

​Exporting Documents

​Performance Examples

​Large Document Example

​Custom Parser Example

​Code Snippets from Examples

​Custom Block Component

​Custom Keyboard Shortcut

​Custom Character Shortcut

​Example Assets

​Running Specific Examples

​Building on Examples

​Example-Specific Documentation

Customization

Mobile

Plugins

Migration

Build docs developers (and LLMs) love

Example Application

Running the Examples

Desktop Examples

Basic Editor

Fixed Toolbar Editor

Drag to Reorder

Focus Example

Auto Expand Editor

Editor List

Mobile Examples

Mobile Editor

Mobile Toolbar

Markdown Examples

Markdown Editor

Animated Markdown

Collaboration Examples

Real-time Collaboration

Offline Collaboration

Collaboration Selection

Customization Examples

Custom Theme

Auto Complete

RTL Support Example

Document Import/Export Examples

Loading Documents

Exporting Documents

Performance Examples

Large Document Example

Custom Parser Example

Code Snippets from Examples

Custom Block Component

Custom Keyboard Shortcut

Custom Character Shortcut

Example Assets

Running Specific Examples

Building on Examples

Example-Specific Documentation