#React Lynx Markdown renderer quick start

Fluxdown for React Lynx renders Markdown as Lynx text, view and other elements. Built on Core, it provides syntax repair, smooth streaming and replaceable render slots.

#Install

Add the package to an existing React Lynx project:

pnpm add @fluxdown/react-lynx

Full code highlighting on Android requires Lynx 3.8 or later with background-thread WebAssembly support. See code highlighting for its asynchronous initialization and bundled WASM behavior.

The package preserves JSX for your project's @lynx-js/react-rsbuild-plugin to compile. Component imports include the required styles, so there is no separate stylesheet to load.

#Render your first message

import { Fluxdown } from '@fluxdown/react-lynx';

const markdown = `# Hello, Fluxdown

Keep content **easy to read**, even while it is arriving.`;

export default function App() {
  return (
    <scroll-view scroll-orientation="vertical" style={{ height: '100%' }}>
      <Fluxdown style={{ padding: '20px' }} text={markdown} />
    </scroll-view>
  );
}

The component lays out the content; the surrounding page handles scrolling. In a chat list, use it as the message body. Connect navigation and code copying to your app through slot plugins.

#Connect streaming text

<Fluxdown streaming={isStreaming} text={text} />

Always pass the complete text received so far as text. Set streaming to false when the request ends.

#Next steps

• Streaming content: control smoothing and trailing effects.
• Styling: adjust colors, fonts and spacing.
• Plugin matrix: choose Full, Lite or your own set.
• Side-by-side demo: explore static and streaming output in React, Vue, Svelte, Angular, React Native, React Lynx, Vue Lynx, Solid, Taro, and Uni App together.