syncfusion-javascript-markdown-converter

Syncfusion TypeScript Markdown Converter

The Syncfusion TypeScript Markdown Converter (@syncfusion/ej2-markdown-converter) is a lightweight utility that transforms Markdown text into clean, semantic HTML. It supports all common Markdown elements — headings, lists, tables, links, images, and inline styles — and integrates seamlessly with the Syncfusion Rich Text Editor for live editing and preview workflows.

---

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installing the @syncfusion/ej2-markdown-converter package
• Importing MarkdownConverter into a TypeScript project
• Running a basic Markdown-to-HTML conversion
• Required CSS and theme setup

toHtml API

📄 Read: references/tohtml-api.md

• toHtml method signature and parameters
• Supported Markdown elements (headings, lists, tables, links, images, inline styles)
• Return value and usage patterns
• Simple conversion code examples

Configurable Options

📄 Read: references/configurable-options.md

• MarkdownConverterOptions interface
• async — asynchronous conversion for large content
• gfm — GitHub Flavored Markdown support
• lineBreak — single line breaks as <br> elements
• silence — suppress errors on invalid Markdown
• When and why to use each option

Rich Text Editor Integration

📄 Read: references/richtexteditor-integration.md

• Combining @syncfusion/ej2-richtexteditor with @syncfusion/ej2-markdown-converter
• Setting editorMode: 'Markdown' on the RTE
• Live preview on keyup using toHtml
• Full preview toggle pattern
• Side-by-side Splitter layout
• Toolbar configuration for Markdown mode

---

Quick Start

Install the package and run a minimal conversion:

npm install @syncfusion/ej2-markdown-converter

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

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

---

Common Patterns

Convert with all options enabled

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

const html = MarkdownConverter.toHtml(markdownContent, {
  async: true,      // Non-blocking for large content
  gfm: true,        // GitHub Flavored Markdown
  lineBreak: true,  // Treat single newlines as <br>
  silence: true     // Suppress parse errors
});

Live preview on user input

textArea.addEventListener('keyup', () => {
  previewElement.innerHTML = MarkdownConverter.toHtml(textArea.value) as string;
});

Integrate with Syncfusion RTE in Markdown mode

import { RichTextEditor, MarkdownEditor, Toolbar } from '@syncfusion/ej2-richtexteditor';
import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';
RichTextEditor.Inject(MarkdownEditor, Toolbar);

const rte = new RichTextEditor({
  editorMode: 'Markdown',
  height: '400px'
});
rte.appendTo('#editor');

---

Key Props

Option	Type	Default	Purpose
async	boolean	false	Async conversion for large payloads
gfm	boolean	true	GitHub Flavored Markdown support
lineBreak	boolean	false	Single newlines → <br>
silence	boolean	false	Skip invalid Markdown instead of throwing

---

Common Use Cases

• Static content rendering — Convert user-authored Markdown from a textarea or API into HTML for display
• Live editor preview — Pair with Syncfusion RTE in Markdown mode for real-time HTML preview
• Side-by-side editing — Use Syncfusion Splitter to show editor and rendered HTML simultaneously
• CMS / documentation tools — Process Markdown stored in databases or files before rendering in the browser