Infinitix-LLC/gpt_markdown

gpt_markdown logo

gpt_markdown

The Flutter renderer for AI output.

Production-grade Markdown and LaTeX rendering for streaming Flutter AI interfaces.
Render rich assistant replies, math, code, tables, citations, images, and custom inline UI in one widget.

Pub Version Pub Likes Pub Points BSD-3-Clause license

🌐 Website · 📖 Documentation · 🎮 Live Playground · 📦 pub.dev

---

✨ Why gpt_markdown?

• Built for AI output — Markdown, LaTeX, code blocks, tables, citations, images, task lists, and mixed rich content in one response.
• Streaming that stays fast — settled segments are reused while the live tail updates. At 12 KB, each update is 31× faster than in 1.2.1—or 74× faster with the lazy sliver. See the benchmarks.
• Production-level control — style sheets, Flutter theme extensions, component builders, callbacks, and custom components.
• Extensible inline UI — add @mentions, #channels, :emoji:, issue references, and product-specific syntax without forking the renderer.
• Designed for real-world edge cases — RTL, text scaling, selection, malformed Markdown, autolinks, nested content, reduced motion, Flutter web, and WASM.

🧩 Everything AI output needs

	Rendering		Production experience		Extensibility
📝	Rich Markdown	⚡	Adaptive streaming	🎨	Component style sheet
∑	Inline and block LaTeX	🚀	Lazy sliver rendering	🧱	Structural builders
💻	Syntax-highlighted code	♿	Selection and text scaling	🏷️	Mentions, channels, and emoji
📊	Tables and aligned columns	🌍	RTL, web, and WASM	🧩	Custom components and scopes
🔗	Links, autolinks, and images	🌓	Theme-aware rendering	👆	Interaction callbacks
☑️	Lists, tasks, and citations	🛡️	Graceful malformed input	📱	Custom URL schemes

🖼️ What it renders

Every image is one GptMarkdown widget with no styling applied — the defaults, in a dark theme. Click any of them for full size.

Rich text rendered by gpt_markdown Rich text Headings, emphasis, lists, quotes, rules, autolinks.	LaTeX rendered by gpt_markdown LaTeX Inline and display equations, on the text baseline.	Tables rendered by gpt_markdown Tables Per-column alignment, Markdown inside cells.
Code rendered by gpt_markdown Code Syntax highlighting, language labels, and copy controls.	Task lists rendered by gpt_markdown Task lists Checkboxes, ordered and nested lists, citation tags.	Inline patterns rendered by gpt_markdown Inline patterns Mentions, channels, shortcodes. #2959 stays text.

🛠️ Quick start

flutter pub add gpt_markdown

import 'package:gpt_markdown/gpt_markdown.dart';

GptMarkdown(
  reply,
  onLinkTap: (url, title) => openUrl(url),
)

The widget sizes itself to its content. Place it inside your preferred scrollable chat or document surface.

⚡ Streaming AI responses

Rebuild GptMarkdown with the complete text received so far. Settled segments are reused while the changing tail updates.

GptMarkdown(
  streamedReply,
  animation: GptMarkdownAnimation.fade,
  blockAnimation: GptMarkdownBlockAnimation.fadeIn,
  isStreaming: stillGenerating,
  charactersPerSecond: 300,
)

The reveal adapts to incoming text, finishes when generation ends, and respects reduced-motion settings. See the streaming guide for animation modes and configuration.

For long responses and documents, use SliverGptMarkdown inside a CustomScrollView. It creates spans and widgets only for the segments requested by the viewport, including its cache extent. The regular GptMarkdown widget is cheaper for short content and remains the option for character reveal. See the rendering architecture guide.

📝 Markdown, LaTeX, and rich AI output

GptMarkdown(
  r'''
## Revenue forecast

Projected growth: **18%**.

\[
R_{next} = R_{current} \times (1 + 0.18)
\]

- [x] Validate the assumptions
- [ ] Review the final forecast

Sources: [1] [2]
  ''',
  onSourceTagTap: (source) => openSource(source),
)

Use \( ... \) for inline LaTeX and \[ ... \] for block equations. Enable dollar-sign syntax with useDollarSignsForLatex: true. Code fences include syntax highlighting, language labels, and copy controls.

Wrap the renderer with SelectionArea when selectable output is needed:

SelectionArea(
  child: GptMarkdown(reply),
)

🎨 Make it match your product

Use style objects for appearance and builders when you need to replace structure.

GptMarkdown(
  reply,
  styleSheet: const GptMarkdownStyleSheet(
    blockQuote: BlockQuoteStyle(
      barWidth: 4,
      barColor: Colors.indigo,
    ),
    inlineCode: InlineCodeStyle(
      fontFamily: 'GeistMono',
      borderRadius: Radius.circular(6),
    ),
    codeBlock: CodeBlockStyle(
      borderRadius: Radius.circular(12),
      showCopyButton: true,
    ),
    table: TableStyle(
      cellPadding: EdgeInsets.all(10),
    ),
  ),
  onCodeCopy: (code) => trackCopy(code),
  onImageTap: (url) => openImage(url),
)

Set styles app-wide with GptMarkdownThemeData. Use builders such as codeBuilder, tableBuilder, and imageBuilder to replace components, or span-based builders for links, citations, and inline code. See customization.

🏷️ App-specific inline UI

Render mentions, channels, emoji, issue references, and other product syntax alongside Markdown:

GptMarkdown(
  reply,
  inlinePatterns: [
    InlinePattern.prefixed(
      prefix: '#',
      knownNames: channelNames,
      builder: (context, match, style) => WidgetSpan(
        alignment: PlaceholderAlignment.baseline,
        baseline: TextBaseline.alphabetic,
        child: ChannelChip(
          name: match.group(0)!.substring(1),
        ),
      ),
    ),
  ],
)

Only known channel names are matched, longest-first. Patterns exclude link labels by default; unrecognized tokens such as #2959 remain text.

Use blockComponents for custom blocks and inlineDirectives for payloads the parser must leave untouched. See custom components.

Upgrading? Passing components or inlineComponents, even an empty list, selects the deprecated legacy parser. Replace them to use the new pipeline. See the migration guide and changelog.

🔗 Autolinks

Bare URLs, www. hosts, emails, and angle autolinks work automatically. Add custom schemes with autolinkSchemes: const {'myapp'}, or disable autolinking with autolink: false. Explicit [label](url) links still work. See inline syntax.

📚 Documentation

Guide	Covers
Getting started	Installation, syntax, taps, LaTeX, RTL, and selection
Customization	Style classes, themes, builders, and callbacks
Streaming	Pacing, performance, accessibility, and limitations
Rendering architecture	Extension registration, lazy rendering, and performance policies
Inline syntax	Autolinks, mentions, channels, and scopes
Custom components	Block and inline extensions
GptMarkdown options	Every constructor option and default
Benchmarks	Methodology, results, and limitations
Migration	What each release changes, newest first

Built by Val

gpt_markdown is the open-source rendering foundation of Val, the live visual layer for AI agents.

Building an AI product that needs richer output than a text box? Request early access to Val.

💬 Community

Issues and pull requests are welcome on GitHub. If the package helps your project, consider giving it a like on pub.dev or a star on GitHub.

📄 License

BSD 3-Clause — see LICENSE.