syncfusion-react-markdown-converter

Q: How do I install syncfusion-react-markdown-converter?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-markdown-converter in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-markdown-converter/ (personal) or .claude/skills/syncfusion-react-markdown-converter/ (project).

by syncfusionFrontend & Design

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.toHtml() and MarkdownConverterOptions. This skill covers the @syncfusion/ej2-markdown-converter package and Markdown Editor integration with HTML preview in React applications.

Installs: 649
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-markdown-converter

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-react-markdown-converter automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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:

npm install @syncfusion/ej2-markdown-converter
npm install @syncfusion/ej2-react-richtexteditor

2. Import CSS in src/styles.css:

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material3.css';

3. Convert Markdown to HTML:

import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';

const markdown = '# Hello World\nThis is **Markdown** text.';
const html = MarkdownConverter.toHtml(markdown);
console.log(html);
// Output: <h1>Hello World</h1><p>This is <strong>Markdown</strong> text.</p>

Common Patterns

Pattern 1: Standalone Conversion (No Editor)

When you only need to convert a Markdown string to HTML without an editor UI:

import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';

const html = MarkdownConverter.toHtml(markdownString);
document.getElementById('preview')!.innerHTML = html as string;

Pattern 2: Live Preview on Keyup

Convert on every keystroke inside a Rich Text Editor textarea:

const markdownConversion = () => {
  if (mdsource?.classList.contains('e-active')) {
    const htmlPreview = rteObj.element.querySelector('#' + rteObj.getID() + 'html-view') as HTMLElement;
    htmlPreview.innerHTML = MarkdownConverter.toHtml(
      (rteObj.contentModule.getEditPanel() as HTMLTextAreaElement).value
    ) as string;
  }
};

Pattern 3: Conversion with Options

Disable GFM and enable line-break conversion:

const html = MarkdownConverter.toHtml(markdownString, {
  gfm: false,
  lineBreak: true
});

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 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

FAQ

What does the syncfusion-react-markdown-converter skill do?

How do I install syncfusion-react-markdown-converter?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-markdown-converter in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-markdown-converter/ (personal) or .claude/skills/syncfusion-react-markdown-converter/ (project).

Which AI agents can use syncfusion-react-markdown-converter?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-react-markdown-converter safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-react-markdown-converter?

It is published by syncfusion in syncfusion/react-ui-components-skills. It has 649 recorded installs.