A highly customizable rich-text editor for Flutter

  Editor, Text

AppFlowy Editor

About: A highly customizable rich-text editor for Flutter. The AppFlowy Editor project for AppFlowy and beyond.

Key Features

  • Build rich, intuitive editors
  • Design and modify an ever-expanding list of customizable features including
    • block components (such as form input controls, numbered lists, and rich text widgets)
    • shortcut events
    • themes
    • selection menu
    • toolbar menu
  • Test Coverage and ongoing maintenance by AppFlowy’s core team and community of more than 1,000 builders

Getting Started

Add the AppFlowy editor Flutter package to your environment.

flutter pub add appflowy_editor
flutter pub get

Creating Your First Editor

Start by creating a new empty AppFlowyEditor object.

final editorState = EditorState.blank(withInitialText: true); // with an empty paragraph
final editor = AppFlowyEditor(
  editorState: editorState,
);

You can also create an editor from a JSON object in order to configure your initial state. Or you can create an editor from Markdown or Quill Delta.

final json = jsonDecode('YOUR INPUT JSON STRING');
final editorState = EditorState(document: Document.fromJson(json));
final editor = AppFlowyEditor(
  editorState: editorState,
);

Note: The parameters localizationsDelegates need to be assigned in MaterialApp widget

MaterialApp(
  localizationsDelegates: const [
    AppFlowyEditorLocalizations.delegate,
  ]，
);

To get a sense of how the AppFlowy Editor works, run our example:

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

Customizing Your Editor

Customizing theme

Please refer to our documentation on customizing AppFlowy for a detailed discussion about customizing theme.

Customizing Block Components

Please refer to our documentation on customizing AppFlowy for a detailed discussion about customizing components.

Below are some examples of component customizations:

Customizing Shortcut Events

Please refer to our documentation on customizing AppFlowy for a detailed discussion about customizing shortcut events.

Below are some examples of shortcut event customizations:

  • BIUS demonstrates how to make text bold/italic/underline/strikethrough through shortcut keys
  • Need more examples? Check out shortcuts

Migration Guide

Please refer to the migration documentation.

Glossary

Please refer to the API documentation.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Please look at CONTRIBUTING.md for details.

License

All code contributed to the AppFlowy Editor project is dual-licensed, and released under both of the following licenses:

  1. The GNU Affero General Public License Version 3
  2. The Mozilla Public License, Version 2.0 (the “MPL”)

Download source code on GitHub

A highly customizable rich-text editor for Flutter. The AppFlowy Editor project for AppFlowy and beyond.
https://github.com/AppFlowy-IO/appflowy-editor
196 forks.
460 stars.
102 open issues.

Recent commits: