syncfusion-vue-markdown-converter

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

Run npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-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-vue-markdown-converter/ (personal) or .claude/skills/syncfusion-vue-markdown-converter/ (project).

by syncfusionFrontend & Design

Implement the Syncfusion Vue Markdown Converter to convert Markdown text into clean HTML. Use this when converting Markdown to HTML in Vue, integrating a live Markdown preview, 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 side-by-side HTML preview.

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

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-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-vue-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 Vue Markdown Converter

The Syncfusion Vue Markdown Converter is a lightweight utility that transforms Markdown-formatted text into clean, semantic HTML. It is typically used alongside the Syncfusion Rich Text Editor (in Markdown mode) to provide a live preview of rendered content.

When to Use This Skill

Convert Markdown text to HTML in a Vue 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 side-by-side Markdown editor and HTML preview layout
Integrate MarkdownConverter.toHtml() with the Syncfusion Rich Text Editor

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Vue CLI / Vite setup and project creation
Installing @syncfusion/ej2-markdown-converter and @syncfusion/ej2-vue-richtexteditor
CSS imports for the material3 theme
Required module injection (MarkdownEditor, Image, Link, Toolbar, Table)
Running the application

Convert Markdown to HTML — toHtml API

📄 Read: references/tohtml-api.md

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 in Vue templates

Configurable Options

📄 Read: references/configurable-options.md

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

📄 Read: references/richtexteditor-integration.md

Splitter-based side-by-side editor and preview layout
Configuring ejs-richtexteditor in Markdown editorMode
Real-time preview using onChange and updateValue()
Toolbar configuration for Markdown editing
MarkdownFormatter for custom Markdown syntax
Custom preview toggle button (fullPreview pattern)
Mobile/device orientation handling with Browser.isDevice

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

2. Import CSS in src/App.vue or src/main.js:

import '@syncfusion/ej2-base/styles/material3.css';
import '@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;

Pattern 2: Live Preview on Keyup

Convert on every keystroke inside a Rich Text Editor textarea:

markDownConversion() {
  const textarea = this.rteObj.contentModule.getEditPanel();
  const previewEl = document.getElementById('html-view');
  previewEl.innerHTML = MarkdownConverter.toHtml(textarea.value);
}

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-vue-markdown-converter skill do?

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

Run npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-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-vue-markdown-converter/ (personal) or .claude/skills/syncfusion-vue-markdown-converter/ (project).

Which AI agents can use syncfusion-vue-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-vue-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-vue-markdown-converter?

It is published by syncfusion in syncfusion/vue-ui-components-skills. It has 62 recorded installs.