animated_streaming_markdown 0.3.2

Flutter markdown streaming package for Android/iOS/macOS/Linux/Windows (web is not supported).

[animated_streaming_markdown logo]

animated_streaming_markdown

Streaming Markdown parser + renderer for Flutter, optimized for incremental append flows.
Explore the docs »

View Demo · Report Bug · Request Feature

[animated_streaming_markdown Gemini streaming Markdown demo]

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Documentation
5. Roadmap
6. Contributing
7. License
8. Contact
9. Acknowledgments

About The Project

animated_streaming_markdown provides 2 main layers:

• Parser: MarkdownStreamParser for typed replace/append requests
• Renderer: AnimatedStreamingMarkdown for block rendering + token reveal animations

It is designed for chat-like or streaming text interfaces where markdown arrives progressively and needs stable UI updates.

(back to top)

Built With

• 
• 
• 

(back to top)

Getting Started

Prerequisites

• Flutter >=3.0.0
• Dart SDK >=2.17.0 <4.0.0
• Native toolchain for your target platform (Android/iOS/macOS/Linux/Windows)

Installation

1. Add dependency:

   dependencies:
    animated_streaming_markdown: ^0.3.2
   

2. Install packages:

   flutter pub get
   

(back to top)

Usage

1) Start parser worker and stream markdown

final parser = MarkdownStreamParser();
await parser.start();

final setResult = await parser.replace('# Hello');

final appendResult = await parser.append('\n\nStreaming **markdown** chunk...');

2) Render blocks with AnimatedStreamingMarkdown

AnimatedStreamingMarkdown(
  blocks: appendResult.blocks,
  asSliver: true,
  tokenStaggerDelay: const Duration(milliseconds: 180),
  tokenAnimationDuration: const Duration(milliseconds: 240),
  enableSelection: true,
  tokenAnimationBuilder: (
    BuildContext context,
    AnimatedMarkdownToken token,
  ) {
    final t = Curves.easeOutCubic.transform(token.value);
    return Transform.translate(
      offset: Offset(0, (1 - t) * 8),
      child: Opacity(opacity: t, child: token.child),
    );
  },
);

3) Important APIs

• MarkdownStreamParser.start()
• MarkdownStreamParser.replace(markdown)
• MarkdownStreamParser.append(chunk)
• MarkdownStreamParser.parse(operation, text)
• MarkdownStreamParser.dispose()
• AnimatedStreamingMarkdown(...)
  • blocks
  • asSliver
  • tokenStaggerDelay
  • tokenAnimationDuration / tokenAnimationDurationFactor
  • tokenAnimationBuilder
  • onTokenDelay
  • enableSelection
  • blockBuilder

For a complete integration sample, check example/lib/src/demos/markdown_cases_demo.dart.

Documentation

• Package page
• API reference
• Example app
• Migration guide: 0.2.x to 0.3.x

The documentation site is built with Docusaurus from docs/ and deployed to GitHub Pages by Deploy Documentation.

Run the docs site locally:

cd website
npm ci
npm run start

Build the static site:

cd website
npm run build

Migration notes for 0.3.0

0.3.0 keeps the 0.2.x API available, but the preferred names now describe the package behavior more directly:

0.2.x name	0.3.x preferred name
StreamingMarkdownParseWorker	MarkdownStreamParser
request(op: 'set', ...)	replace(markdown)
request(op: 'append', ...)	append(chunk)
StreamingMarkdownParseResult.renderNodes	MarkdownParseResult.blocks
StreamingMarkdownRenderView	AnimatedStreamingMarkdown
nodes	blocks
sliver	asSliver
tokenArrivalDelay	tokenStaggerDelay
tokenFadeInDuration	tokenAnimationDuration
tokenFadeInRelativeToDelay	tokenAnimationDurationFactor
allowUnclosedInlineDelimiters	allowIncompleteInlineSyntax
enableTextSelection	enableSelection
customBlockBuilder	blockBuilder
markdownTheme	theme

(back to top)

Roadmap

• Done: Incremental parser worker (replace / append)
• Done: Streaming renderer for markdown block nodes
• Done: Per-token custom animation builder API
• Done: Example with multiple animation presets
• Done: Docusaurus documentation site for samnn.dev
• Planned: Convenience constructors and helper functions
• Planned: Code block copy and LaTeX support research
• Planned: Richer copy modes and improved multi-content drag selection
• Planned: More parser/renderer benchmark scenarios

See the open issues for proposed features and known issues.

(back to top)

Contributing

Contributions are welcome.

1. Fork the project
2. Create your branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m "Add your feature")
4. Push branch (git push origin feature/your-feature)
5. Open a Pull Request

See CONTRIBUTING.md for local setup, repository layout, and quality gates.

(back to top)

License

Distributed under the Apache-2.0 License. See LICENSE for details.

(back to top)

Contact

• Documentation: https://pub.dev/documentation/animated_streaming_markdown/latest/
• Repository: https://github.com/samnn152/streaming-markdown
• Issues: https://github.com/samnn152/streaming-markdown/issues

(back to top)

Acknowledgments

• Tree-sitter
• tree-sitter-markdown
• Flutter

(back to top)