Markdown WYSIWYG Editor | GFM Standard + Chart & UML Extensible

TOAST UI Editor is planning a major update to version 3 for 2021. tui.editor is a powerful, expandable, full-featured, multi-language WYSIWYG Markdown Editor that can be implemented in JavaScript or jQuery.

🤖 Why the TOAST UI Editor?

TOAST UI Editor offers Markdown Mode and WYSIWYG Mode. Depending on what kind of use you want like markdown production or maybe just markdown editing. TOAST UI Editor can be useful for both uses. It offers Markdown mode and WYSIWYG mode, which can be switched at any time.

CommonMark + GFM specifications

Today CommonMark is the de facto Markdown standard. GFM (GitHub Flavored Markdown) is another popular specification based on CommonMark – maintained by GitHub, and it’s the most used markdown. The TOAST UI Editor follows CommonMark and GFM specifications. Easily write documents with the productivity tools provided by TOAST UI Editor and you can easily open the resulting document wherever specifications are supported.

  • Live Preview: Edit Markdown with Display HTML Monitoring. Your adjustments will be applied immediately.
  • Scroll sync: Simultaneous scrolling between Markdown and Preview. You don’t need to scroll through each one separately.
  • Auto indent: The cursor will always be where you want it.
  • Syntax highlighting: You can check out broken Markdown syntax right away.

More features:

  • CommonMark specification and GitHub Flavored Markdown.
  • Useful extensions: color picker, schema, UML, table merge
  • It’s easy to create your own accessories.
  • Simple and WYSIWYG modes.
  • Live HTML preview with simultaneous scrolling support.
  • Highlight fitting.
  • Allows setting content programmatically.
  • The Vanilla JavaScript version is available here.

How to make use of it:

1. Install the tui.editor by way of package deal managers.

$ npm install @toast-ui/editor @toast-ui/jquery-editor --save

2. Include the tui.editor’s information after jQuery library.

<!-- Core Stylesheet -->
<link rel="stylesheet" href="[email protected]/dist/toastui-editor.css" />
<link rel="stylesheet" href="[email protected]/dist/toastui-editor-viewer.css" />
<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- jQuery Wrapper -->
<script src="[email protected]/dist/toastui-jquery-editor.js"></script>
<script src="[email protected]/dist/toastui-jquery-editor-viewer.js"></script>

3. Create a container element during which you need to render the WYSIWYG Markdown Editor.

<div id="example"></div>

4. Call the function to render a primary WYSIWYG Markdown Editor.


5. All attainable choices & capabilities to customize the WYSIWYG Markdown Editor.

  previewStyle: 'tab',
  initialEditType: 'markdown',
  height: '300px',
  minHeight: '200px',
  language: 'en_US',
  useDefaultHTMLSanitizer: true,
  useCommandShortcut: true,
  codeBlockLanguages: CodeBlockManager.getHighlightJSLanguages(),
  usageStatistics: true,
  toolbarItems: [
  hideModeSwitch: false,
  customConvertor: null

Extensible WYSIWYG Markdown Editor, TOAST UI Editor Plugin/Github

See Demo And Download

Official Website(nhn): Click Here

This superior jQuery/javascript plugin is developed by nhn. For extra Advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…