TOAST UI Editor

TOAST UI Editor is a rich-text editing component that gives web applications a single editor with two synchronized modes: a raw Markdown editor and a WYSIWYG editor, both backed by the same document model so switching between them never loses formatting. It targets GitHub Flavored Markdown (GFM) out of the box and extends it with first-party plugins for embedding charts, colored syntax, UML diagrams, and merged table cells, making it a common choice for CMSs, documentation tools, issue trackers, and note-taking apps that need Markdown authoring without asking end users to write Markdown by hand.

Under the hood, the Markdown side is powered by NHN’s own @toast-ui/toastmark parser and the WYSIWYG side by ProseMirror, with a bidirectional convertor layer keeping both representations in sync on every keystroke. The library ships as a monorepo containing the core editor, a viewer-only build, official React and Vue wrapper packages, and a plugin API that exposes ProseMirror’s state, view, and model primitives directly to plugin authors, so third-party extensions can hook as deeply into the editor as the first-party ones do.

What You Get

• A single editor instance with synchronized Markdown and WYSIWYG modes, switchable at runtime without losing content
• GitHub Flavored Markdown (GFM) parsing and rendering via the bundled @toast-ui/toastmark parser
• A live preview pane in Markdown mode with tab or side-by-side layout and cursor-synced scrolling
• Official plugins for charts, colored syntax highlighting, UML/sequence diagrams, and merged table cells
• Official React (@toast-ui/react-editor) and Vue (@toast-ui/vue-editor) wrapper components alongside the vanilla-JS core
• Built-in HTML sanitization via DOMPurify with a configurable tag/attribute whitelist for safe custom rendering
• An i18n layer with community-maintained language packs and a public API for adding new locales
• A public plugin API exposing ProseMirror’s state, view, model, keymap, and inputrules modules for deep customization

Common Use Cases

• Adding Markdown-based content authoring to a CMS or blogging platform without requiring writers to know Markdown syntax
• Building internal documentation or wiki tools that need both a raw Markdown source view and a WYSIWYG view for the same document
• Embedding a comment or issue-description editor in project-management and ticketing tools that store content as Markdown
• Extending note-taking or knowledge-base apps with diagram, chart, or table-merging capabilities via the plugin system

Under The Hood

Architecture The editor is organized around a ToastUIEditorCore class (src/editorCore.ts) that owns two independent sub-editors — a MarkdownEditor wrapping the ToastMark parser and a WysiwygEditor wrapping ProseMirror — plus a Convertor that translates between the two document representations whenever the user switches modes or types in either one. A CommandManager dispatches named commands (bold, heading, table operations, etc.) to whichever sub-editor is active, an EventEmitter fans out lifecycle and content-change events to consumers and plugins, and a QueryManager exposes read-only state queries. Plugins receive a context object carrying live references to ProseMirror’s state/view/model/keymap/inputrules submodules, so a plugin can register its own ProseMirror plugins, input rules, and keymaps rather than being limited to a narrow extension surface — this is what lets first-party plugins like the chart and UML renderers integrate as deeply as core functionality does.

Tech Stack The core package is written in TypeScript and depends directly on prosemirror-state, prosemirror-view, prosemirror-model, prosemirror-commands, prosemirror-keymap, prosemirror-inputrules, and prosemirror-history for the WYSIWYG engine, dompurify for HTML sanitization, and NHN’s own @toast-ui/toastmark for GFM Markdown parsing. The repo is a Lerna-managed monorepo (lerna.json) with the editor core under apps/editor, framework wrappers under apps/react-editor and apps/vue-editor, and standalone plugin packages under plugins/. Builds run through Rollup (ESM output) and Webpack (UMD/CDN bundles), with a custom banner generator for versioned CDN releases; the CDN distribution is a first-class output alongside the npm package.

Code Quality The editor core has an extensive Jest unit-test suite (26+ spec files under src/__test__) covering the sanitizer, convertor, event emitter, DOM helpers, and the public editor API, run under jest-environment-jsdom with a shared base config across the monorepo’s packages. TypeScript is used throughout with path-mapped imports (@/*, @t/*) and a dedicated check-types CI workflow independent of the test workflow; ESLint runs as its own CI job. Public API surfaces and options are documented with structured JSDoc blocks feeding an auto-generated API doc site, rather than relying on separate hand-written docs staying in sync with the code.

What Makes It Unique Most Markdown editors either commit to a single editing surface (raw text with a preview pane) or a single rich-text model; TOAST UI Editor instead keeps a genuine dual document model — Markdown AST and ProseMirror document — synchronized live, so users get faithful round-tripping between modes rather than a one-way “convert on save” approach. Combined with a plugin API that hands plugin authors direct access to the underlying ProseMirror primitives instead of a narrower sanctioned extension surface, it occupies a middle ground between lightweight Markdown-preview widgets and full rich-text frameworks, while still shipping as a dependency-light, framework-agnostic core with official wrappers layered on top rather than being framework-native from the ground up.