#Using and writing plugins

Plugins work at different stages of content processing. Start with slots to change components and interactions, or use render plugins to choose which slots nodes use. Core plugins handle parsing, repairs, and streaming transformations.

#Use one plugin pack

plugins accepts an IPluginItem or an array of them. A plugin pack can contain several lists: slots, renders, remarks, rehypes, repairs, and mappers.

import { Fluxdown } from 'fluxdown';

import { HighlightedPlugin } from './plugins/highlighted';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown plugins={HighlightedPlugin} text={text} />;
}

HighlightedPlugin is a plugin pack object exported by your app. See Slot plugins and Render plugins to declare one.

#Combine plugin packs

Pass the plugin packs you need directly to Fluxdown in an array:

import { Fluxdown } from 'fluxdown';

import { HighlightedPlugin } from './plugins/highlighted';
import { CommentPlugin } from '../plugins/comment';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown plugins={[HighlightedPlugin, CommentPlugin]} text={text} />;
}

#Configure presets

List the preset you want to configure, then supply its options in config, keyed by the plugin’s key. For example, hide an image while its URL is still being generated:

import { IncompleteImageRepairPlugin } from '@fluxdown/core-presets/repair';
import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      plugins={{
        repairs: [IncompleteImageRepairPlugin],
        config: {
          'repair-incomplete-image': { strategy: 'discard' },
        },
      }}
      streaming
      text={text}
    />
  );
}

This example requires pnpm add @fluxdown/core-presets. The default image strategy is placeholder, which displays placeholder content.

config applies to the plugins listed in the same pack. Other presets remain in place. Each plugin guide ends with its built-in plugins: Slot, Render, and the Core plugin guides. See Configuration for the full prop.