#Plugins

Plugins divide the content pipeline into stages. Start with slots to change components and interactions. Use render plugins to change which slots a node uses. Core plugins handle parsing, repair and streaming transforms.

#Use a plugin pack

plugins accepts an IPluginItem or an array. Each object can contain any combination of slots, renders, remarks, rehypes, repairs and mappers.

Import IPluginItem from @fluxdown/svelte-plugins/typings. To add plugins individually, install @fluxdown/svelte-plugins and import from its plugins/<kebab-case-directory> subpaths.

<script lang="ts">
  import { FluxdownLite } from '@fluxdown/svelte/lite';
  import { CodeShikiPlugin } from '@fluxdown/svelte-plugins/plugins/code-shiki';

  type MessageProps = {
    text: string;
  };

  let { text }: MessageProps = $props();
</script>

<FluxdownLite plugins={CodeShikiPlugin} {text} />

This adds code highlighting to Lite. Pass several packs in an ordered array. At equal priority, later render plugins match first; later slot plugins wrap earlier components through Raw.

#Configure and extend

config supplies options by plugin key and only affects plugins explicitly listed in the same object. See plugin packs for declaration and composition examples.

The plugin matrix lists built-in plugins and the Full/Lite split. Use FluxdownRaw with a complete plugins list to assemble everything yourself.