Case study
Lightweight Rich Editor
An open-source rich-text editor for Flutter, built on Flutter's own text-editing primitives. It keeps typing, paste, undo and formatting responsive in long documents.
Rebuilding Flutter Rich Text Around Performance
Lightweight Rich Editor is a performance-focused rich-text editor for Flutter, designed around the needs of long-form writing rather than simply reproducing the feature set of a conventional document editor.
The project started from a practical problem: rich-text editing becomes increasingly difficult when documents become large, formatting becomes complex, and operations such as paste, undo/redo, lists, selection, and rendering all have to remain responsive.
Instead of continuing to increase the complexity of an existing editor implementation, we built a lightweight editor engine around Flutter's standard text-editing primitives.
The Problem
Rich-text editors have to coordinate several systems simultaneously:
Text editing
Selection
Formatting
Rendering
Clipboard data
Undo/redo
Document serialization
Search
Lists
Links
Cursor movement
Scrolling
Platform-specific clipboard behaviour
As document size increases, these responsibilities can become increasingly expensive.
Our goal was to build an editor where writing remains the primary operation and internal formatting complexity does not unnecessarily interfere with the editing experience.
The Core Approach
The editor is built on top of Flutter's standard TextField / EditableText foundation rather than introducing a heavyweight document-editing surface.
This provides a familiar foundation for text input, selection, scrolling, and cursor behaviour while allowing the editor to maintain its own rich-text representation and rendering layer.
The result is a deliberately lightweight architecture that separates editing concerns from rendering concerns.
Rich Text Capabilities
The editor supports standard formatting including:
Bold
Italic
Underline
Strikethrough
Inline code
Text colors
Highlights
Font sizes
H1 and H2 headings
Horizontal rules
Bullet lists
Numbered lists
Task lists
Hyperlinks
It also provides whole-document text alignment and direction, including RTL layouts.
Notebook-Oriented Rendering
One of the distinctive parts of the editor is its notebook-style presentation.
The renderer supports:
Horizontal ruled lines
Vertical margin lines
Custom typography
Configurable spacing
Alignment between ruled lines and wrapped text
A particular challenge was keeping notebook lines visually aligned when a paragraph wraps or when a heading has a different height from normal body text.
Rather than treating the ruled background as a simple static decoration, we designed the renderer to account for the actual layout of the document.
Clipboard and Rich Paste
Pasting content into a note editor is more complicated than copying plain text.
The editor supports intelligent handling of:
HTML
Markdown
Native rich clipboard content
The implementation is designed to preserve useful formatting when content is pasted from browsers and other applications while still allowing plain text to remain lightweight.
Native rich clipboard support is implemented across:
Android
iOS
macOS
Windows
Linux
Search and Replace
The editor includes a built-in find-and-replace experience with:
Next result
Previous result
Replace
Replace all
This keeps document manipulation inside the editor rather than requiring external tooling.
Undo and Redo
History management is treated as part of the editing model rather than simply relying on individual text changes.
Undo/redo covers operations such as:
Normal edits
Rich-text changes
Rich pastes
Multi-step editing operations
This becomes especially important when an operation modifies both text and formatting.
Document Serialization
Documents can be represented through an EditorDocument model designed for serialization.
This makes documents suitable for:
Saving locally
Loading later
Database persistence
Application-level synchronization
JSON-based storage
The document representation is intentionally separated from the visual editor.
Configuration
The editor is designed to be reusable rather than tied to one application's visual identity.
Developers can customise the rendering system through:
RichTextRenderThemeRichEditorStyle
This allows applications to control typography, colors, layout, notebook lines, highlights, and other presentation details without modifying the editor engine itself.
Themes can also be changed at runtime without recreating the controller.
Component Architecture
The package exposes both an integrated editor and individual components.
The main building blocks include:
LightweightRichEditorRichTextEditorFormatToolbarFindReplaceBarRichEditorControllerEditorDocumentRichTextRenderThemeRichEditorStyle
This allows developers to either use the complete editor experience or compose individual pieces into their own interface.
Performance Philosophy
Performance is not treated as a final optimisation pass. It is part of the architecture.
The editor was designed around standard Flutter text-editing primitives and tested against documents containing multi-thousand-paragraph content.
The objective is to keep memory usage and rendering overhead controlled while preserving the capabilities expected from a modern rich-text editor.
What We Engineered
Our work covers the editor architecture, editing model, controller layer, formatting system, rendering pipeline, document representation, history handling, clipboard integration, list behaviour, search/replace, styling, serialization, and reusable Flutter API.
The project is also designed as an independent package rather than an editor implementation locked inside a single application.
Outcome
The result is a reusable Flutter rich-text editing engine focused on the intersection of performance, writing experience, configurability, and document structure.
It provides the foundation for applications that need richer editing capabilities without accepting the complexity and performance characteristics of a heavyweight editor implementation.
The package is currently under active development, with APIs still subject to change before the 1.0.0 release.
More work
More from our portfolio.
Phunplan
A Flutter app for discovering local activities, planning outings with friends and booking with activity providers. We built and integrated features across the mobile app, including bookings, maps, payments and notifications, and took it through release on Google Play and the App Store.
Pathveragroup
The corporate site for a UK education group with five practices, from university admissions to scholarships. We built it in Astro, with separate paths for students, universities and employers.
Let's talk
Have something similar in mind?
If your product or system has similar requirements, tell us about it and we'll talk through the approach.