A highly customizable rich-text editor for Flutter

Discord • Twitter

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.

shell
flutter pub add appflowy_editor
flutter pub get

Creating Your First Editor

Start by creating a new empty AppFlowyEditor object:

dart
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 to configure your initial state or create one from Markdown or Quill Delta:

dart
final json = jsonDecode(YOUR_INPUT_JSON_STRING);
final editorState = EditorState(document: Document.fromJson(json));
final editor = AppFlowyEditor(  
    editorState: editorState,
);

Note: The localizationsDelegates need to be assigned in the MaterialApp widget.

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

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

shell
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.

See further examples of how AppFlowy customizes the theme.

Customizing Block Components

Refer to our documentation for a detailed discussion about customizing components.

Examples of component customizations include:

• Todo List Block Component – extends new styles based on existing rich text components.
• Divider Block Component – demonstrates how to extend a new block component and render it.

Customizing Shortcut Events

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

Examples of shortcut event customizations include:

• BIUS – demonstrates how to make text bold, italic, underline, and strikethrough through shortcut keys.

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, released under both the following licenses:

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

See LICENSE for more information.

Troubleshooting

If you encounter any issues while setting up or using the AppFlowy Editor, consider the following troubleshooting steps:

• Ensure that you have the latest version of Flutter and Dart installed.
• Check the console for any error messages during startup or when running your editor, as they may provide clues to what went wrong.
• Refer to the official documentation for setup instructions to ensure that no steps have been missed.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.