Kenresoft Technologies Ltd
Discuss a projectLog in
Back to Portfolio

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.

Lightweight Rich Editor
TechnologyFlutterRich Text EditorOpen SourceText EditingNotebook ViewClipboard IntegrationCross PlatformMobile DevelopmentSoftware Architecture

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:

  • RichTextRenderTheme

  • RichEditorStyle

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:

  • LightweightRichEditor

  • RichTextEditor

  • FormatToolbar

  • FindReplaceBar

  • RichEditorController

  • EditorDocument

  • RichTextRenderTheme

  • RichEditorStyle

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.

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.