flutter_quill_kit 0.1.0

A modular rich text editor for Flutter built on the Quill Delta format — a lean core with opt-in add-ons, a declarative toolbar, and a stateless viewer.

flutter_quill_kit

A modular rich text editor for Flutter built on the Quill Delta document format — a lean, extensible core with opt-in feature add-ons, a declarative toolbar, and a stateless read-only viewer.

Note: flutter_quill_kit is an independent project. It is not a fork of, nor affiliated with, the flutter_quill package. It speaks the same Delta document format, so documents created with other Quill-based editors load unchanged (see the migration guide below).

Why another Quill editor?

• Pick only what you need. Every feature — bold, lists, links, media — is an EditorExtension. Register the ones you want; a plain-text-only editor carries no media, clipboard, or converter dependencies.
• A real viewer. QuillKitViewer is a stateless widget that renders a Delta with no controller, focus node, or input machinery — cheap enough for lists and previews.
• Declarative toolbar. Toolbar items are contributed by extensions and rendered in the order you choose — no fixed layout, no boolean flags.
• No global state. Registries and services are per-editor-instance, so multiple editors on one screen never interfere.
• Delta-compatible. Documents round-trip losslessly through the standard Quill Delta JSON format — unknown attributes and embeds are preserved.

Installation

flutter pub add flutter_quill_kit

Runs on Android, iOS, web, macOS, Windows and Linux. The core depends only on Flutter and dart_quill_delta — no platform channels, no plugins.

Quick start

import 'package:flutter_quill_kit/flutter_quill_kit.dart';

final controller = QuillKitController(
  document: Document.fromJson(deltaOps), // e.g. jsonDecode(stored) as List
  extensions: QuillKitExtensions.standard(),
);

// In your widget tree:
Column(
  children: [
    QuillKitToolbar(controller: controller),
    Expanded(child: QuillKitEditor(controller: controller)),
  ],
);

A complete four-page demo app (editor, stateless viewer, live Delta ↔ Markdown conversion, and a custom third-party extension) lives in example/.

Supported formats

Kind	Formats
Inline	bold, italic, underline, strikethrough, inline code, subscript/superscript, small, font family, font size (presets + numeric), text color, background color, link
Block	headers h1–h6, alignment (left/center/right/justify), text direction (LTR/RTL as separate toggles), ordered list, bullet list, checklist, blockquote, code block (optional line numbers), indent, line height
Embeds	image, video (via flutter_quill_kit_media), any custom type via EmbedRenderer

Editing niceties: undo/redo with history grouping, keyboard shortcuts, markdown-style typing autoformat (# , 1. , **bold**, ...), URL auto-linking, placeholder text, read-only mode with tappable checklists, and a selection context menu.

Extensions

Everything beyond plain text editing is an EditorExtension — including the built-in formats, which keeps the extension API honest: anything the built-ins can do, third-party packages can do. Presets bundle the built-ins:

Preset	Contains
QuillKitExtensions.basic()	undo/redo, bold, italic, underline, strikethrough, inline code, sub/superscript, small (+ markdown character shortcuts)
QuillKitExtensions.standard()	basic() + headers, blockquote, code block, ordered/bullet/check lists, indent, alignment, text direction, links (+ their typing shortcuts)
QuillKitExtensions.full()	standard() + text/background color pickers and the line-height dropdown

Mix and match freely — presets return fresh instances, and custom extensions register exactly like built-ins:

final controller = QuillKitController(
  extensions: [
    ...QuillKitExtensions.standard(),
    MediaExtension(), // from package:flutter_quill_kit_media
    MyCustomExtension(),
  ],
);

An extension can contribute attribute specs, edit rules, embed renderers, toolbar items, keyboard shortcuts, and typing shortcuts, and can register services (clipboard, link launcher) on the per-editor EditorScope. See example/lib/custom_extensions.dart for a complete working extension in ~50 lines.

The toolbar renders whatever the controller's extensions contribute — or an explicit list for full manual control:

QuillKitToolbar(
  controller: controller,
  items: [
    ...QuillKitToolbarItems.history(),
    ...QuillKitToolbarItems.inline(),
    ...QuillKitToolbarItems.link(),
  ],
);

Stateless viewer

Read-only display needs none of the editor's machinery. QuillKitViewer is a plain StatelessWidget — no controller, no FocusNode, no IME client — which makes it cheap enough for chat messages, previews, and list items:

QuillKitViewer(
  document: Document.fromJson(deltaOps),
  selectable: true,                       // native selection + copy
  onTapLink: (url) => launchMyUrl(url),   // links stay tappable
  onCheckboxTap: (line, checked) {},      // interactive checklists (optional)
);

QuillKitViewer.fromDelta(...) and QuillKitViewer.fromJson(...) cover one-shot rendering straight from stored data.

Theming

Styling resolves from the ambient Material theme, overridable per subtree with a (possibly partial) QuillKitThemeData:

QuillKitTheme(
  data: const QuillKitThemeData(
    link: TextStyle(color: Colors.teal),
    blockquote: TextBlockStyle(
      decoration: BoxDecoration(
        border: Border(left: BorderSide(width: 4, color: Colors.teal)),
      ),
    ),
  ),
  child: QuillKitEditor(controller: controller),
);

Fields left null fall back to defaults derived from Theme.of(context), so light/dark mode works out of the box. The editor and the viewer resolve styles through the same code path — a Delta looks identical in both.

Storing documents

A document is plain Quill Delta JSON, so it stores as a string in any database or API:

// Save
final json = jsonEncode(controller.document.toJson());

// Load
final controller = QuillKitController(
  document: Document.fromJson(jsonDecode(json) as List<dynamic>),
  extensions: QuillKitExtensions.standard(),
);

Attributes and embed types this package doesn't recognize are preserved through a load/save cycle rather than dropped, so documents written by other Quill-based editors survive editing here.

Packages

Package	What it adds
flutter_quill_kit	Core editor, viewer, toolbar, all text formats
flutter_quill_kit_media	Image & video embeds and insert buttons
flutter_quill_kit_markdown	Delta ↔ Markdown conversion (pure Dart)
flutter_quill_kit_clipboard	Rich HTML/image clipboard: paste from Google Docs/Word, copy as HTML

Focused imports

The core exposes narrow entrypoints so non-widget code can stay lean:

import 'package:flutter_quill_kit/document.dart'; // pure-Dart model, server-safe
import 'package:flutter_quill_kit/editor.dart';   // editor + viewer widgets
import 'package:flutter_quill_kit/toolbar.dart';  // declarative toolbar

Migrating from flutter_quill

Your stored documents need no migration — the Delta JSON format is identical. API mapping:

flutter_quill	flutter_quill_kit
QuillController	QuillKitController
QuillEditor	QuillKitEditor
QuillSimpleToolbar	QuillKitToolbar
read-only QuillEditor	QuillKitViewer (stateless)
EmbedBuilder	EmbedRenderer via an EditorExtension

Toolbar buttons map to QuillKitToolbarItems entries, and read-only QuillEditor usages become QuillKitViewer, which drops the controller and focus node entirely.

Contributing

Issues and pull requests are welcome on GitHub. Planned work is listed in ROADMAP.md.

License

MIT — see LICENSE.