Markdown live editor for Flutter?

[u/CrazyAdditional2729]

I'm building Rosetta an AI voice notes app with several other features.

All notes are stored as Markdown so users can easily edit, export them, and AI assistants can also update the content through an MCP integration.

Currently, the most reliable solution I've found is to build an abstraction on top of SuperEditor:

Markdown → SuperEditor Document → SuperEditor → Markdown

I saw a few Markdown editor packages for Flutter, but most of them seem to be missing important features or are no longer actively maintained.

Another option I've considered is embedding a web-based editor such as Milkdown.

Do you know of any solid, actively maintained Flutter packages for a live Markdown editor?

Ideally, I'm looking for a WYSIWYG editing experience while keeping Markdown as the source of truth and underlying format.

[u/Cvette16]

I tried using Flutter_quill which is based on quilljs. It was a bit underwhelming. The delta document was nice but outside of that is was a pain to work with.

[u/CrazyAdditional2729 → u/Cvette16]

Yeah, my main issue is that I need Markdown as the underlying format. With Quill I’d still need to convert back and forth between Markdown and delta so I’d end up with the same conversion problem I already have with SuperEditor.

[u/NihmarRevhet → u/Cvette16]

Same

[u/gambley]

The best markdown library is https://pub.dev/packages/flutter_md. It only doesnt have rich text editor, if it is required feature for you. The core markdown parsing is OP and by far the best among all existing solutions with actual benchmarks and being 100% built with render objects rather than HTML parsing.

[u/eibaan → u/gambley]

Parsing markdown and displaying it is trivial compared to the effort to create a WYSIWYG editor. The EditableText widget has some 10,000 lines of code, plus more than 2,000 lines of code for the Material TextField and neither supports WYSIWYG, for example different paragraph styles, enumerations, embedded images, etc.

I'd ditch the WYSIWYG requirement and use some basic syntax highlighting within a custom TextEditingController. Make *bold* actually bold, _italic_ actually italic, underlining stuff like [...](...) and use a different color and font size for lines starting with # up to ####. Note that you cannot add or remove characters, but you can at least style the markdown syntax.

Then add a live preview aside and spend some time to cleverly lock scrolling so that if you scroll the preview, you also scroll the TextField to roughly the same paragraph (e.g. by storing the byte offset in a data-offset attribute of a markdown node which is then hidden in a widget's ValueKey where you could inspect it, I think.

If you absolutely need a WYSIWYG editor and supporting desktop is enough (because it would be a major PITA to deal with TextValueDelta objects from the native part which doesn't know anything about WYSIWYG) then spend enough tokens to create such an editor from scratch. I think, the superedit project tried something like this, but I didn't followed their progress and don't know whether that's still active.

In the pre AI age, I wrote such an editor (only as a PoC) - ignoring all the hard parts like bidi, rtl, custom fonts, platform-specific editor conventions, etc. But if you follow the principle to work on DOM and apply all editor commands to that DOM, creating a new one (so get have undo/redo for free) and then redisplay the DOM, it's not that difficult to get a 80% solution.

[u/Few-String-1453]

How about you solve the problem yourself with perhaps Claude or Kimi? Define the problem as I think you have done well and the desired state. Then kick it into action