Customize / Default components

Default components

The 22 renderers GptMarkdown uses before you replace anything. Open a component to see its Markdown input, a labeled visual preview, and the exact style, builder, and callback surface it exposes.

Style objects change appearance. Builders replace structure. Start with a style object to retain package behavior, then use a builder only when the rendered widget itself must change. Read the customization guide

Card previews are illustrative HTML representations. Exact rendering follows your Flutter theme and target platform.

22 components shown

Previews are illustrative HTML; Flutter output follows your theme and platform.

Structure

Heading

block

Release notes

The important part

Renders ATX headings from H1 through H6, including the optional H1 divider.

HTagOpen

Structure

Paragraph break

block

First paragraph carries the thought.

Second paragraph begins with breathing room.

Normalizes a run of blank lines into the paragraph spacing used by the renderer.

NewLinesOpen

Structure

Indented text

block

A short indented note with room to breathe.

Preserves leading-space indentation for indented prose and recursively renders the remaining Markdown.

IndentMdOpen

Structure

Block quote

block
A useful detail from the model.
It can span more than one line.

Renders one or more quoted lines as a padded quote block with a leading bar.

BlockQuoteOpen

Structure

Horizontal rule

block

Before the break

After the break

Renders a Markdown divider as a themed horizontal rule.

HrLineOpen

Lists & controls

Unordered list

block
  • Focus on the answer
  • Keep the source link
  • Preserve context

Renders dash or asterisk list items with the package bullet and spacing rules.

UnOrderedListOpen

Lists & controls

Ordered list

block
  1. Fetch the response
  2. Render the Markdown
  3. Handle link taps

Renders numbered list items while keeping their marker separate from the Markdown child.

OrderedListOpen

Lists & controls

Task checkbox

block

Parse the response

Save the conversation

Renders checked and unchecked task-list items from Markdown source.

CheckBoxMdOpen

Lists & controls

Radio option

block

Use the package default

Replace the component

Renders selected and unselected radio-style options from compact Markdown syntax.

RadioButtonMdOpen

Code & math

Fenced code block

block
dartcopy

final answer = await model.generate();

Renders fenced code with optional language labeling, highlighting, and a copy affordance.

CodeBlockMdOpen

Code & math

Display LaTeX

both
01x² dx = 13

Renders display math enclosed by \[ and \] as a standalone math widget.

LatexMathMultiLineOpen

Code & math

Inline LaTeX

inline
01x² dx = 13

Renders an inline TeX expression within surrounding prose.

LatexMathOpen

Data & citations

Table

both
ModelStatus
GPT MarkdownReady
StreamLive

Renders GFM-style pipe tables with parsed header alignment and horizontal overflow support.

TableMdOpen

Links & media

Markdown link

inline

Read the package guide.

https://gptmarkdown.com

Renders a labeled Markdown link and delegates destination handling to your app.

ATagMdOpen

Links & media

Autolink

inline

Read the package guide.

https://gptmarkdown.com

Turns bare URLs, www hosts, email addresses, and angle-bracket URLs into links.

AutolinkMdOpen

Links & media

Image

inline

Renders Markdown images, with optional dimensions parsed from the alt label.

ImageMdOpen

Inline text

Bold text

inline

Make the important part easier to scan.

A little emphasis helps.

A replaced option.

Renders double-asterisk emphasis as a bold inline span.

BoldMdOpen

Inline text

Italic text

inline

Make the important part easier to scan.

A little emphasis helps.

A replaced option.

Renders single-asterisk emphasis as an italic inline span.

ItalicMdOpen

Inline text

Strikethrough

inline

Make the important part easier to scan.

A little emphasis helps.

A replaced option.

Renders double-tilde text as a struck-through inline span.

StrikeMdOpen

Inline text

Underline

inline

Make the important part easier to scan.

A little emphasis helps.

A replaced option.

Renders the supported HTML underline tag as an underlined inline span.

UnderLineMdOpen

Inline text

Inline code

inline

Pass styleSheet to customize a renderer.

Renders single-backtick code as a selectable, baseline-aligned code chip.

HighlightedTextOpen

Data & citations

Source tag

inline

The model cites its source 1.

Renders numeric citation tags as compact, tappable source chips.

SourceTagOpen

Adding a new syntax?

This catalog describes the built-ins. For an app-specific block, inline span, mention, emoji, or token, prepend your component or InlinePattern and retain the default lists.

Build a custom component