#Taro Markdown renderer quick start

Use Fluxdown in a Taro React project to render Markdown with Taro components. Parsing, streaming and plugin configuration follow the same API as the React renderer.

#Install

pnpm add @fluxdown/taro @tarojs/components-react@4.3.1

Use Taro 4.3 with React 18, matching your app’s Taro React integration. Keep the @tarojs/* packages in your app on the same version.

Import the component styles in your app's global style entry:

import '@fluxdown/taro/styles.css';

#Render your first message

import { Fluxdown } from '@fluxdown/taro';
import { View } from '@tarojs/components';

const markdown = `# Hello, Fluxdown

Keep **streaming content** easy to read.`;

export default function Article() {
  return (
    <View>
      <Fluxdown text={markdown} />
    </View>
  );
}

Build the page with your project's usual Taro command, such as taro build --type h5 or taro build --type weapp.

#Taro 4.3.1 H5 builds

Enable Taro's official React-compatible components to keep H5 animations continuous as text updates. For Webpack 5 production builds, also disable quoted property names so the minifier preserves JavaScript private methods in dependencies:

import { defineConfig } from '@tarojs/cli';

export default defineConfig({
  h5: {
    useHtmlComponents: true,
  },
  terser: {
    config: {
      output: { quote_keys: false },
    },
  },
});

#Connect streaming text

Pass the complete text received so far, and use the request status to control streaming:

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

type MessageProps = {
  text: string;
  pending: boolean;
};

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

Set pending to false when the request ends. Fluxdown finishes any remaining smooth output before removing the trailing effect.

#Choose a component

The plugin matrix lists the capabilities included in each preset.

#Next steps

• Streaming content: receive text and choose a trailing effect.
• Styling guide: adjust themes, typography and spacing.
• Configuration: all props and their defaults.
• Using and writing plugins: customize components and interactions.