#Configuration

This page lists the public Fluxdown props. Only text is required at the top level. Import BaseBuildConfig, StreamingConfig, Theme, IPluginItem, and FluxdownRef from fluxdown when you need their types.

#text Required

Type: string

The complete Markdown received so far. When a new chunk arrives, pass the accumulated content rather than only that chunk.

<Fluxdown text="# Hello, Fluxdown" />

#streaming Optional

Type: boolean | StreamingConfig

Default: false

true enables trailing syntax repair, smooth output, and a trailing fade together; false disables all three. Pass an object to control them separately. Fields omitted from that object default to true.

<Fluxdown
  streaming={{
    repairEnding: true,
    smooth: true,
    shad: false,
  }}
  text={text}
/>

See Streaming content for connecting a source and finishing a stream.

#streaming.repairEnding Optional

Type: boolean

Default: true (when streaming is an object)

Repair unfinished syntax at the streaming tail. Set this to false to disable trailing repairs only; build.repair: false disables all repairs.

#streaming.smooth Optional

Type: boolean | SmoothConfig

Default: true (when streaming is an object)

Reveal new content gradually. true uses the built-in spring scheduler and selects an available ticker automatically; false immediately reveals all received content. Pass an object to choose the ticker and scheduler:

<Fluxdown
  streaming={{
    smooth: {
      enabled: true,
      ticker: 'raf',
      scheduler: 'spring',
    },
  }}
  text={text}
/>

#smooth.enabled Optional

Type: boolean

Default: false

Set this to true when using a smooth object to enable progressive output. Disabling it immediately reveals all content received so far.

#smooth.ticker Required

Type: 'raf' | 'interval' | SmoothTickerClass

Choose the clock that drives output: 'raf' follows animation frames, 'interval' uses a timer, and a custom ticker class can provide your own timing.

#smooth.scheduler Required

Type: 'spring' | SmoothSchedulerClass

Determine how much content to reveal on each update. Use 'spring' for the built-in spring scheduler, or pass a custom scheduler class.

Usually, smooth: true is enough. Import SmoothConfig, SmoothTickerClass, and SmoothSchedulerClass from @fluxdown/core-presets/mapper.

#streaming.shad Optional

Type: boolean | ShadConfig

Default: true (when streaming is an object)

Add a fade to newly revealed trailing text. true uses the default effect and false disables it. Pass an object to adjust the number of faded characters and the mask width:

<Fluxdown
  streaming={{
    shad: {
      enabled: true,
      length: 3,
      maskWidth: 18,
    },
  }}
  text={text}
/>

#shad.enabled Optional

Type: boolean

Default: true

Enable the trailing fade.

#shad.length Optional

Type: number

Default: 2

Number of trailing characters included in the fade. Fractions round down; negative and non-finite values become 0.

#shad.maskWidth Optional

Type: number

Default: 15

Fade mask width in pixels. 0 hides the mask, negative values become 0, and non-finite values use the default width.

#build Optional

Type: BaseBuildConfig

Default: {}

Choose Markdown compilation features. Tables, task lists, strikethrough, autolinks, and plain line breaks are available by default. Every field below is optional.

<Fluxdown
  build={{
    tex: true,
    footnote: true,
  }}
  text={text}
/>

HTML in Markdown goes through tag filtering and sanitization. The default allowed tags are span, u, br, em, and a. See Rehype plugins to adjust this behavior.

#build.repair Optional

Type: boolean

Default: true

Enable syntax repair. false disables all repairs; use streaming.repairEnding to control the streaming tail alone.

#build.footnote Optional

Type: boolean

Default: false

Whether to parse footnote syntax and generate references and return links.

#build.tex Optional

Type: boolean

Default: false

Whether to parse inline and display formula syntax. When enabled, the built-in renderer loads formula rendering support.

#build.indentedCode Optional

Type: boolean

Default: false

Whether to parse indented code block syntax. Fenced code blocks work without this option.

#build.setextHeading Optional

Type: boolean

Default: false

Whether to parse headings underlined with === or ---. Headings starting with # are unaffected.

#build.idPrefix Optional

Type: string

Default: generated automatically

Set a namespace for footnote IDs.

You normally do not need idPrefix. If you set it, give each instance on the page a different value so footnote links stay within the right content.

#theme Optional

Type: Theme

Default: 'light'

Three forms are supported:

• 'light' or 'dark': use a built-in theme.
• PartialThemeConfig: override selected tokens in the light theme.
• ['light' | 'dark', PartialThemeConfig]: override tokens in the selected preset.

<Fluxdown
  theme={[
    'dark',
    {
      tokens: {
        colors: { accent: '#82d8cf' },
        typography: { fontSans: 'Inter, sans-serif' },
      },
    },
  ]}
  text={text}
/>

Every group under tokens supports partial overrides:

The full token type is ThemeTokens, also exported from fluxdown. See the styling guide for matching your product's theme.

#plugins Optional

Type: IPluginItem | IPluginItem[]

Default: []

An object provides one plugin pack; an array combines several packs. Each pack can contain these lists:

Each list item can be a plugin or [Plugin, options]. With config, you can keep options out of the individual list entries:

import { CodeHeaderSlotPlugin } from '@fluxdown/react-presets/slot';
import { Fluxdown } from 'fluxdown';

<Fluxdown
  plugins={{
    slots: [CodeHeaderSlotPlugin],
    config: {
      'slot-code-header': { disabled: true },
    },
  }}
  text={text}
/>;

This example disables the default code toolbar. Use disabled: true to disable a plugin. priority controls execution order; lower values run first.

config belongs to a plugin pack and applies to plugins explicitly listed in that pack. Other presets remain in place.

See Using and writing plugins for declaration, composition, and configuration examples.

#patches Optional

Type: IPatchItem<ReactNode>[]

Default: []

Replace selected source text with your own React content, or insert content at a position. Use this to turn mentions or references into interactive elements.

<Fluxdown
  patches={[
    {
      key: 'person-ada',
      range: [7, 11],
      render: () => <a href="/people/ada">@Ada</a>,
    },
  ]}
  text="Hello, @Ada."
/>

#patches[].key Optional

Type: string

Default: undefined

A stable identifier for the patch.

#patches[].range Required

Type: number | [number, number]

A number inserts content at that position. A range replaces text from its start, inclusive, to its end, exclusive.

Positions use source string indices. Keep each range within one content block, without crossing paragraphs or overlapping other ranges.

#patches[].render Required

Type: (text?: string) => ReactNode

Return the inserted or replacement content. Use text when the replacement needs the text it replaces.

#className Optional

Type: string

Default: undefined

A class name added to the outer container, for integrating with your app's styles.

<Fluxdown className="conversation-message" text={text} />

#style Optional

Type: CSSProperties

Default: undefined

React inline styles for the outer container. Use these for width, layout, or spacing relative to the parent:

<Fluxdown
  style={{
    maxWidth: '72ch',
    marginInline: 'auto',
  }}
  text={text}
/>

Use theme for content typography and plugins for components and interactions.

#ref Optional

Type: Ref<FluxdownRef>

Default: undefined

A reactive handle to the rendered output. FluxdownRef is IReadableClosure<ReactNode[]>; its value provides the current content and subscriptions. It is not a DOM element.

import type { FluxdownRef } from 'fluxdown';

import { Fluxdown } from 'fluxdown';
import { useRef } from 'react';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  const content = useRef<FluxdownRef>(null);

  return <Fluxdown ref={content} text={text} />;
}

Ordinary rendering does not need a ref. Fluxdown manages the handle's lifetime; unsubscribe from any subscriptions you create.