Skip to content

TOAST UI Editor

A Markdown editor in the browser with a WYSIWYG mode and a Markdown mode you can switch between.nhn/tui.editor

Stars
18k
Forks
1.9k
Licence
MIT
Language
TypeScript
Last update
2.3 years ago
Type
Library

This repository is archived and no longer maintained.

What it is

TOAST UI Editor is a JavaScript component you add to a web page so people can write formatted text. It offers a Markdown mode, where you type Markdown syntax with a live preview, and a WYSIWYG mode, where you edit the rendered document directly. The README says it follows the CommonMark and GFM Markdown specifications and supports plugins for charts, UML diagrams, code highlighting, and colored text. The repository is archived, so it is no longer actively maintained.

  • Add a rich text and Markdown editing box to a web app's content form
  • Show Markdown documents in read-only mode using the Viewer feature
  • Render a chart from a code block marked as 'chart' inside a document
  • Render UML diagrams from a code block marked as 'uml'
  • Let users paste content from a browser, screenshot, Excel, or PowerPoint into the editor

Great for

  • Web developers who want an embeddable Markdown editor in their own site or app
  • Teams with an existing jQuery, React, or Vue front end who want a ready-made editor component
  • Projects that need chart or UML blocks inside Markdown documents
  • Developers who want the option to switch between Markdown and visual editing

Not ideal for

  • Anyone needing active maintenance or new security fixes, because the repository is archived with its last push on 2024-08-01
  • People who only need a standalone desktop app rather than a component for a web page
  • Projects that need a browser support matrix beyond what the README lists, since it only mentions Chrome, Edge, Safari, Firefox, and IE 11+

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js and npm (the README mentions npm for installing packages, but no version is stated)

    Install the editor package from npm

    npm install @toast-ui/editor
  2. 2

    Run it

    • Install the package with npm in your web project
    • Import or include the editor in your page as described in the project's documentation
    • Create an editor instance on an element in your page
    • Open the page in a browser to see the editor
  3. 3

    Get the most out of it

    • Add the chart plugin (@toast-ui/editor-plugin-chart) to render charts from code blocks
    • Add the uml plugin (@toast-ui/editor-plugin-uml) to render UML diagrams
    • Use the code-syntax-highlight plugin for Prism.js-based code highlighting
    • Use the Viewer mode to display Markdown without an editing area
    • Use the i18n feature to add or change interface languages

Downloads

Strengths

  • Supports both Markdown and WYSIWYG editing, and you can switch between them at any time
  • Follows the CommonMark and GFM Markdown specifications
  • Has a plugin system with five basic plugins installable through npm

Trade-offs

  • The repository is archived, so there will be no further updates from the maintainers as shown in the metadata
  • The README is truncated and gives limited detail on setup and configuration

How it compares

ProjectStarsTypeLevelUpdatedBest for
tui.editor (this)18kLibraryintermediate2.3 years agoWeb developers who want an embeddable Markdown editor in their own site or app
tiptap38.9kLibraryintermediate4 days agoDevelopers building a custom text editor into a web product
editor.md14.3kLibrarybeginner2.5 years agoWeb developers who want a Markdown input box inside their own site or admin panel
vditor11.4kLibraryintermediate19 days agoDevelopers who want to embed a Markdown editor in a web app
milkdown12kLibraryadvanced4 days agoDevelopers adding a rich markdown editing box to a web app
turndown11.5kLibrarybeginner19 days agoDevelopers who need to convert HTML content, such as web pages or rich text editor output, into Markdown

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.