whatisgithub

What is tui.editor?

nhn/tui.editor — explained in plain English

Analysis updated 2026-06-24

17,945TypeScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

TOAST UI Editor is a drop-in Markdown editor component for web apps, with live preview, a WYSIWYG mode, and plugins for charts, UML and code highlighting.

Mindmap

mindmap
  root((TOAST UI Editor))
    What it does
      Markdown editing
      WYSIWYG mode
      Live preview
    Tech stack
      TypeScript
      JavaScript
      React wrapper
      Vue wrapper
    Plugins
      Charts
      UML diagrams
      Code highlight
      Color picker
    Use cases
      Docs sites
      Note apps
      CMS editors
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Embed a Markdown editor with live preview into a docs or CMS site.

USE CASE 2

Give non-technical users a WYSIWYG mode that hides Markdown symbols.

USE CASE 3

Build a note-taking app that supports GitHub-flavored Markdown.

USE CASE 4

Add charts, UML diagrams or syntax-highlighted code blocks to user posts via the plugin system.

What is it built with?

TypeScriptJavaScriptReactVue

How does it compare?

nhn/tui.editorbluesky-social/social-appmlc-ai/web-llm
Stars17,94517,95217,967
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardmoderate
Complexity2/54/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Install via npm into a JS/TS project, React and Vue wrappers exist for framework integration.

License is not stated in the explanation.

So what is it?

TOAST UI Editor is a text editor component you can embed in a web application to let users write and edit content using Markdown. Markdown is a lightweight way of formatting text using simple symbols, for example, putting asterisks around a word makes it bold, that gets converted into formatted HTML when displayed. The editor supports two modes you can switch between at any time. Markdown mode shows the raw Markdown syntax alongside a live preview of how it will look when rendered, with scroll synchronization so both sides stay in step. WYSIWYG mode (What You See Is What You Get) hides the Markdown symbols and shows the formatted result directly, letting users edit in a more word-processor-like environment. It follows the CommonMark and GFM (GitHub Flavored Markdown) specifications, meaning documents written here will display correctly wherever those standards are supported. The editor ships with a plugin system that extends what Markdown can express. Included plugins let you render charts from data in code blocks, display UML diagrams (flowcharts and sequence diagrams), highlight code syntax in multiple programming languages, apply text colors using a color picker, and merge table cells. The editor also supports internationalization, it comes with translations for many languages, and has a dark theme option. The core component is written in TypeScript and plain JavaScript, with wrapper packages available for React and Vue, making it straightforward to drop into most modern front-end projects. You would use this if you are building a documentation site, a content management tool, a note-taking app, or any web product where users need rich text editing with Markdown support.

Copy-paste prompts

Prompt 1
Show me the minimum HTML + JS to drop TOAST UI Editor onto a page with both Markdown and WYSIWYG modes.
Prompt 2
Wrap TOAST UI Editor in a React component called <MarkdownEditor /> with a value prop and an onChange callback.
Prompt 3
Enable the chart and UML plugins for TOAST UI Editor in a Vue 3 project and show a sample chart code block.
Prompt 4
Switch TOAST UI Editor to dark theme and Korean locale, and persist the user's choice in localStorage.
Prompt 5
Add a custom toolbar button to TOAST UI Editor that inserts a templated 'TODO' Markdown block at the cursor.

Frequently asked questions

What is tui.editor?

TOAST UI Editor is a drop-in Markdown editor component for web apps, with live preview, a WYSIWYG mode, and plugins for charts, UML and code highlighting.

What language is tui.editor written in?

Mainly TypeScript. The stack also includes TypeScript, JavaScript, React.

What license does tui.editor use?

License is not stated in the explanation.

How hard is tui.editor to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is tui.editor for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.