tui.editor: Open Source Documentation & Knowledge Base

What is tui.editor?

TOAST UI Editor (tui.editor) is an MIT-licensed, TypeScript Markdown and WYSIWYG editor that follows the CommonMark and GFM specifications and is aimed at frontend developers who need to embed Markdown authoring and rich-text editing in a web application.

What it is

TOAST UI Editor is a browser-side editor component published on npm as @toast-ui/editor, a plain JavaScript package, alongside React and Vue wrapper components (@toast-ui/react-editor and @toast-ui/vue-editor) and a jQuery plugin path reflected in its topic list. It is written in TypeScript under the MIT licence, developed by NHN Cloud as part of the TOAST UI family, and it lives in the frontend JavaScript ecosystem rather than on a server: it renders inside a page and hands back Markdown or HTML.

The concrete problem it solves is the split between producing Markdown and editing it. The README frames the choice as "production of Markdown or maybe to just edit the Markdown", and the editor answers both with a Markdown mode and a WYSIWYG mode that can be switched at any point in time. Rather than maintaining a raw text area next to a separate preview renderer, an application gets a single component with live preview, scroll sync and syntax highlighting, and the output conforms to CommonMark and GFM so documents open wherever those specifications are supported.

Key capabilities

Markdown mode and WYSIWYG mode in one component, switchable at any point in time.
Conformance with both CommonMark and GFM (GitHub Flavored Markdown).
Live Preview of rendered HTML while editing, Scroll Sync between the Markdown and preview panes, and Syntax Highlight that surfaces broken Markdown syntax.
WYSIWYG table editing through a context menu for adding or deleting columns and rows and arranging text inside cells.
A Custom Block Editor for editing custom block areas.
Optional plugins published as separate packages: @toast-ui/editor-plugin-chart, @toast-ui/editor-plugin-uml, @toast-ui/editor-plugin-code-syntax-highlight, @toast-ui/editor-plugin-color-syntax and @toast-ui/editor-plugin-table-merged-cell.
Framework wrappers for plain JavaScript, React and Vue, plus jQuery plugin support indicated by the topic list.

Who uses it and how

React and Vue application teams can mount the wrapper packages instead of hand-rolling a textarea-plus-preview arrangement.
Pages built on jQuery can adopt the editor through the jQuery plugin path named in the topics.
Documentation and knowledge-base frontends in this category can enable chart and UML rendering through the dedicated plugins so diagrams appear inside authored documents.
Teams serving both writers who prefer WYSIWYG and engineers who want raw Markdown can share one component and switch modes rather than standardising on a single workflow.

Getting started

Install from npm using @toast-ui/editor for the plain JavaScript component, or @toast-ui/react-editor and @toast-ui/vue-editor for the framework wrappers, adding plugins such as @toast-ui/editor-plugin-chart as separate packages. The project homepage is http://ui.toast.com/tui-editor.

How it compares

The facts provided name no comparable editor and no list of paid products that this project replaces, so on the available evidence it stands alone in this registry. What those facts do establish as its distinguishing axes are an MIT licence, a client-side component distributed on npm with React, Vue and jQuery entry points, and dual Markdown and WYSIWYG modes built on CommonMark and GFM.

When to use it — and when not to

Because the package is a frontend component only, the adopting team must supply everything behind it: persistence, file uploads and any publishing pipeline remain the application's responsibility, and there is no database, storage layer or SMTP service bundled to operate. Teams looking for a complete hosted documentation platform or a server-side Markdown pipeline should not pick it. The repository also carries 643 open issues, so a busy tracker should be expected, and the README material available here leaves the "Used By" and browser-support sections truncated.

project readme (upstream, from github) — read inline

GFM Markdown and WYSIWYG Editor - Productive and Extensible

📦 Packages

TOAST UI Editor

Name	Description
`@toast-ui/editor`	Plain JavaScript component

TOAST UI Editor's Wrappers

Name	Description
`@toast-ui/react-editor`	React wrapper component
`@toast-ui/vue-editor`	Vue wrapper component

TOAST UI Editor's Plugins

Name	Description
`@toast-ui/editor-plugin-chart`	Plugin to render chart
`@toast-ui/editor-plugin-code-syntax-highlight`	Plugin to highlight code syntax
`@toast-ui/editor-plugin-color-syntax`	Plugin to color editing text
`@toast-ui/editor-plugin-table-merged-cell`	Plugin to merge table columns
`@toast-ui/editor-plugin-uml`	Plugin to render UML

🤖 Why TOAST UI Editor?

TOAST UI Editor provides Markdown mode and WYSIWYG mode. Depending on the type of use you want like production of Markdown or maybe to just edit the Markdown. The TOAST UI Editor can be helpful for both the usage. It offers Markdown mode and WYSIWYG mode, which can be switched any point in time.

Productive Markdown Mode

markdown

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, which is the Markdown mostly used. TOAST UI Editor follows both CommonMark and GFM specifications. Write documents with ease using productive tools provided by TOAST UI Editor and you can easily open the produced document wherever the specifications are supported.

Live Preview : Edit Markdown while keeping an eye on the rendered HTML. Your edits will be applied immediately.
Scroll Sync : Synchronous scrolling between Markdown and Preview. You don't need to scroll through each one separately.
Syntax Highlight : You can check broken Markdown syntax immediately.

Easy WYSIWYG Mode

wysiwyg

Table : Through the context menu of the table, you can add or delete columns or rows of the table, and you can also arrange text in cells.
Custom Block Editor : The custom block area can be edited through the internal editor.
Copy and Paste : Paste anything from browser, screenshot, excel, powerpoint, etc.

UI

Toolbar : Through the toolbar, you can style or add elements to the document you are editing.
Dark Theme : You can use the dark theme.

Use of Various Extended Functions - Plugins

plugin

CommonMark and GFM are great, but we often need more abstraction. The TOAST UI Editor comes with powerful Plugins in compliance with the Markdown syntax.

Five basic plugins are provided as follows, and can be downloaded and used with npm.

chart : A code block marked as a 'chart' will render TOAST UI Chart.
code-syntax-highlight : Highlight the code block area corresponding to the language provided by Prism.js.
color-syntax : Using TOAST UI ColorPicker, you can change the color of the editing text with the GUI.
table-merged-cell : You can merge columns of the table header and body area.
uml : A code block marked as an 'uml' will render UML diagrams.

🎨 Features

Viewer : Supports a mode to display only markdown data without an editing area.
Internationalization (i18n) : Supports English, Dutch, Korean, Japanese, Chinese, Spanish, German, Russian, French, Ukrainian, Turkish, Finnish, Czech, Arabic, Polish, Galician, Swedish, Italian, Norwegian, Croatian + language and you can extend.
Widget : This feature allows you to configure the rules that replaces the string matching to a specific RegExp with the widget node.
Custom Block : Nodes not supported by Markdown can be defined through custom block. You can display the node what you want through writing the parsing logic with custom block.

🐾 Examples

Here are more examples and play with TOAST UI Editor!

🌏 Browser Support

Chrome	Internet Explorer	Edge	Safari	Firefox
Yes	11+	Yes	Yes	Yes

🔧 Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork main branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check if there are any errors.

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor

TOAST UI Editor uses npm workspace, so you need to set the environment based on npm7. If subversion is used, dependencies must be installed by moving direct paths per package.

Develop

You can see your code reflected as soon as you save the code by running a server. Don't miss adding test cases and then make green rights.

Run snowpack-dev-server

snowpack allows you to run a development server without bundling.

$ npm run serve editor

Run webpack-dev-server

If testing of legacy browsers is required, the development server can still be run using a webpack.

$ npm run serve:ie editor

Run test

$ npm test editor

Pull Request

Before uploading your PR, run test one last time to check if there are any errors. If it has no errors, commit and then push it!

For more information on PR's steps, please see links in the Contributing section.

💬 Contributing

🍞 TOAST UI Family

🚀 Used By

📜 License

Frequently asked questions

Is tui.editor free to use?

tui.editor is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does tui.editor do?

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

What is tui.editor written in?

tui.editor is primarily written in TypeScript. Its source is publicly available at https://github.com/nhn/tui.editor, and it has 17,985 GitHub stars.