#SolidJS Markdown renderer quick start

Fluxdown renders Markdown in Solid applications. Static content and streaming messages share the same component, with themes and plugins for changing its presentation.

#Install

pnpm add @fluxdown/solid

Use it in a Solid .tsx component:

import { Fluxdown } from '@fluxdown/solid';

export function Article() {
  return <Fluxdown text={'# Hello, Fluxdown\n\nGive words room to unfold.'} />;
}

The browser entry loads the component styles. For server rendering, import @fluxdown/solid/styles.css in your application entry so the initial page uses the same styles.

#Receive streaming content

Pass the complete text received so far to text. Enable streaming while the response is arriving, then set it to false when it ends:

import { Fluxdown } from '@fluxdown/solid';

type MessageProps = {
  text: string;

  pending: boolean;
};

export function Message(props: MessageProps) {
  return <Fluxdown text={props.text} streaming={props.pending} />;
}

Read changing values through props or a signal accessor in JSX. Solid tracks those reads and updates the existing content. Your application handles the request and message state; Fluxdown handles the Markdown.

#Choose a preset

Full uses Shiki for code, KaTeX with a MathJax fallback for formulas, and Pele for diagrams. Set build={{ tex: true }} when you want to parse formula syntax.

See the plugin matrix for the complete list. Continue with streaming content to adjust the output pace, or the styling guide to change its appearance.