markdown_editor_live 0.1.1

A simple WYSIWYG markdown editor widget for Flutter

Markdown Editor Live for Flutter

A Flutter widget that provides a WYSIWYG-style markdown editing experience with live syntax highlighting (similar to Obsidian or Typora). Markdown syntax is displayed only on the line you're currently editing, and on other lines, the formatted result is shown directly.

Features

• Live WYSIWYG Editing — Syntax markers (like **, #, etc.) are hidden except on the line you're currently editing
• Syntax Highlighting — Visual distinction for headers, bold, italic, code, and more
• Auto-Continuing Lists — Press Enter on a list item to automatically add the next bullet or number
• Tab Support — Tab key inserts indentation; supports both soft tabs (spaces) and hard tabs
• Multi-line Selection Indent — Select multiple lines and press Tab to indent them all
• Customizable Styling — Pass your own TextStyle and InputDecoration

Currently Supported Markdown Syntax

Element	Syntax
Headers (H1–H6)	# Header through ###### H6
Bold	**text** or __text__
Italic	*text* or _text_
Strikethrough	~~text~~
Inline code	`code`
Code blocks	``` code ```
Unordered lists	- item, * item, + item
Ordered lists	1. item, 2. item
Thematic breaks	---, ***, ___

Getting Started

Add the package to your pubspec.yaml:

dependencies:
  markdown_editor_live: ^0.1.0

Then run:

flutter pub get

Usage

Basic Example

import 'package:flutter/material.dart';
import 'package:markdown_editor_live/markdown_editor_live.dart';

class MyEditor extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MarkdownEditor(
      initialValue: '# Hello World\n\nThis is **bold** and *italic*.',
      onChanged: (text) {
        print('Content: $text');
      },
    );
  }
}

With Custom Styling

MarkdownEditor(
  initialValue: '# Styled Editor',
  onChanged: (text) => setState(() => _content = text),
  style: const TextStyle(
    fontSize: 16,
    fontFamily: 'Roboto',
    height: 1.5,
  ),
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Start typing markdown...',
  ),
)

Tab Configuration

Control how the Tab key behaves:

MarkdownEditor(
  initialValue: 'Press Tab to indent!',
  useSoftTabs: true,   // Use spaces instead of \t (default: true)
  tabWidth: 4,         // Number of spaces per tab (default: 2)
)

API Reference

MarkdownEditor

Property	Type	Default	Description
initialValue	String?	null	Initial markdown content
onChanged	ValueChanged<String>?	null	Callback when content changes
style	TextStyle?	null	Text style for the editor
decoration	InputDecoration?	null	Input decoration for the TextField
useSoftTabs	bool	true	Use spaces instead of tab characters
tabWidth	int	2	Number of spaces per soft tab

MarkdownEditingController

For advanced use cases, you can use MarkdownEditingController directly with a standard TextField:

final controller = MarkdownEditingController(text: '# My Content');

TextField(
  controller: controller,
  maxLines: null,
)

Example App

Check out the example directory for a complete demo application showing the editor in action with a side-by-side raw text preview.

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

License

This project is licensed under the BSD-3-Clause License — see the LICENSE file for details.

Created by Janek