Llmrender
a 10kb Markdown+LaTeX renderer for React
Last verified:
What is Llmrender?
LLMRender is a fully featured Markdown renderer for React specifically designed to handle LLM (Large Language Model) output. It renders everything from README files to streaming LLM responses in a single component, supporting LaTeX math rendering, syntax highlighting for 30+ languages, and GitHub Flavored Markdown features including tables, task lists, strikethrough, and callouts like [!NOTE], [!TIP], and [!WARNING].
The tool is streaming-safe, meaning it can handle tokens arriving mid-sentence without buffering, flicker, or crashes. It parses LaTeX and renders browser-native MathML for fractions, roots, matrices, Greek letters, sums, integrals, and accents. Security is built-in by default: javascript: and data: URLs are neutralized, raw HTML is ignored unless opted in, and there is no dangerouslySetInnerHTML anywhere. The bundle size is under 12kb with zero dependencies, making it significantly lighter than alternatives like react-markdown (340 KB full size) or markdown-it (436 KB).
LLMRender is for React developers building AI chat applications, documentation viewers, README renderers, or any interface that displays LLM-generated Markdown content. It supports four ready-made themes (light, dark, adaptive, and high-contrast), exposes theme colors as CSS variables for custom styling, and allows plugging in custom highlighters via the highlight prop. The package has 500+ tests with 99.9% coverage, ensuring reliability for production use.
Llmrender pricing
Pricing model: Freemium
The website does not mention any pricing, paid plans, or free tier. LLMRender appears to be an open-source npm package available via npm install llmrender with no subscription or licensing costs indicated.
Llmrender pros
- Under 12kb bundle size with 0 dependencies
- LaTeX math rendering with native MathML output
- 30+ programming languages highlighted out of the box
- Streaming-safe rendering for token-by-token LLM output
- GitHub Flavored Markdown support including tables and task lists
- Built-in security with no dangerouslySetInnerHTML
- Four ready-made themes: light, dark, adaptive, high-contrast
Llmrender cons
- Only works with React, not other frameworks
- Raw HTML must be explicitly opted in to use
- No built-in support for custom plugins beyond highlight prop
- Adaptive theme requires prefers-color-scheme support
- Higher contrast theme may look different from expected
- MathML may not render in older browsers without fallback
- No TypeScript definitions mentioned in documentation
- Custom styling requires manual CSS variable usage
- No SSR-specific optimization documented
- Limited documentation on advanced configuration options
Frequently asked questions about Llmrender
What is LLMRender?
LLMRender is a fully featured Markdown renderer for React that handles everything from README files to streaming LLM output in one component. It supports LaTeX math rendering, syntax highlighting for 30+ languages, GitHub Flavored Markdown, and is streaming-safe with under 12kb bundle size and 0 dependencies.
How do I install LLMRender?
Install LLMRender using npm with the command: npm install llmrender. After installation, import it as: import Markdown from 'llmrender'; and use it as <Markdown>{text}</Markdown>.
Does LLMRender support LaTeX math?
Yes, LLMRender parses LaTeX and renders browser-native MathML. It supports inline $…$ and display … … syntax for fractions, roots, matrices, Greek letters, sums, integrals, and accents. The output is crisp at any zoom level and accessible to screen readers.
How many programming languages are highlighted?
LLMRender supports 30+ languages out of the box without installing highlight.js or Prism. Supported languages include JavaScript, TypeScript, Python, Rust, Go, SQL, CSS, HTML, shell, diff, and many more. Fenced code blocks come out colored automatically.
Is LLMRender safe with untrusted content?
Yes, LLMRender is safe by default. javascript: and data: URLs are neutralized, raw HTML is ignored unless you opt in via the rawHtml prop, and even when enabled it goes through a strict tag and attribute allowlist. There is no dangerouslySetInnerHTML anywhere, and links with target=_blank get rel=noopener noreferrer.
How does streaming work in LLMRender?
LLMRender is designed for streaming output where tokens arrive mid-sentence. You can re-render with the text you have so far on every chunk without buffering, flicker, or crashes. Unclosed code fences render as code while streaming, and unclosed $$ math blocks render as math gracefully.
What themes does LLMRender offer?
LLMRender offers four ready-made themes: light, dark, adaptive (follows prefers-color-scheme), and high-contrast (WCAG AAA). Themes are importable as CSS files like llmrender/themes/adaptive.css, and theme colors are exposed as --llmrender-* CSS variables for custom styling.
How does LLMRender compare to react-markdown?
LLMRender is significantly smaller: 12 KB full size (gzip) versus react-markdown's 340 KB full size. LLMRender has built-in math and highlighting, while react-markdown requires adding +74.6 KB for math and +508 KB for highlighting. LLMRender also has 0 dependencies compared to react-markdown's dependency chain.
Can I use my own syntax highlighter?
Yes, you can pass any function to the highlight prop to plug in your own highlighter like Prism.js in three lines. The example shows: <Markdown highlight={(code, lang) => <SyntaxHighlighter language={lang}>{code}</SyntaxHighlighter>}>{text}</Markdown>.
What GitHub Flavored Markdown features are supported?
LLMRender renders all GitHub Flavored Markdown: tables with column alignment, task lists with checkboxes, strikethrough, autolinks, and callouts like [!NOTE], [!TIP], [!WARNING] that render with icons and colors. Headings get ids and anchor links for deep-linking, plus nested lists, blockquotes, and ruby annotations for East-Asian text.