Implement the Syncfusion Markdown Converter in React to convert Markdown text into clean HTML. Use this when converting Markdown to HTML in React, integrating a live Markdown preview with the Rich Text Editor in Markdown mode, configuring GFM or line break options, or working with MarkdownConverter.

Implementing Syncfusion React Markdown Converter The Syncfusion Markdown Converter is a lightweight utility that transforms Markdown formatted text into clean, semantic HTML. It is typically used alongside the Syncfusion React Rich Text Editor ( RichTextEditorComponent ) in Markdown editing mode to provide a live preview of rendered content. When to Use This Skill Convert Markdown text to HTML in a React application Display a live preview of Markdown content as the user types Configure conversion behavior (GFM support, line breaks, async mode, error suppression) Build a Markdown editor with HTML preview using RichTextEditorComponent in Markdown mode Integrate MarkdownConverter.toHtml() with the Syncfusion React Rich Text Editor Documentation and Navigation Guide Getting Started React setup and project creation (Vite / CRA) Installing @syncfusion/ej2 markdown converter and @syncfusion/ej2 react richtexteditor CSS imports for the material3 theme Module injection ( MarkdownEditor , Toolbar , Image , Link , Table ) Running the application Convert Markdown to HTML — toHtml API MarkdownConverter.toHtml() method signature Basic usage example (standalone, no editor required) Supported Markdown elements (headings, lists, tables, links, images, inline styles) Using the return value with dangerouslySetInnerHTML Configurable Options MarkdownConverterOptions interface async — asynchronous conversion for large content gfm — GitHub Flavored Markdown support (default: true) lineBreak — convert single line breaks to <br (default: false) silence — suppress errors on invalid Markdown (default: false) Full example passing options to toHtml() Rich Text Editor Integration Markdown mode with editorMode="Markdown" Live preview using created , change , and actionComplete events Toolbar configuration for Markdown editing MarkdownFormatter for custom Markdown syntax Custom preview toggle button (full preview pattern) Full working example with preview toggle Quick Start Install packages and wire up the converter in three steps: 1. Install packages: 2. Import CSS in src/styles.css : 3. Convert Markdown to HTML: Common Patterns Pattern 1: Standalone Conversion (No Editor) When you only need to convert a Markdown string to HTML without an editor UI: Pattern 2: Live Preview on Keyup Convert on every keystroke inside a Rich Text Editor textarea: Pattern 3: Conversion with Options Disable GFM and enable line break conversion: Pattern 4: Side by Side Preview with Splitter For a full editor + preview experience, use the Syncfusion Splitter component alongside the Rich Text Editor in Markdown mode. The preview pane is updated via updateValue() on every change event. 📄 Read: [references/richtexteditor integration.md](references/richtexteditor integration.md) for the full implementation. Key Props / API API Type Default Purpose MarkdownConverter.toHtml(content, options?) static method — Converts Markdown string to HTML options.async boolean false Async conversion for large content options.gfm boolean true GitHub Flavored Markdown support options.lineBreak boolean false Single line breaks → <br options.silence boolean false Suppress errors on invalid Markdown

syncfusion-react-markdown-converter