# nhn/tui.editor

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/nhn-tui-editor).**

17,980 stars · 1,848 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/nhn/tui.editor
- Homepage: http://ui.toast.com/tui-editor
- awesome-repositories: https://awesome-repositories.com/repository/nhn-tui-editor.md

## Topics

`chart` `commonmark` `documentation` `editor` `frontend` `gfm` `html` `jquery` `jquery-plugin` `markdown` `uml` `wysiwyg`

## Description

This project is a web-based rich text editor designed for markdown content authoring. It provides a dual-mode interface that synchronizes raw markdown syntax with a visual WYSIWYG editing experience, allowing users to toggle between modes while maintaining a consistent document state.

The editor distinguishes itself through a modular architecture that supports custom content blocks and plugin extensions. This system enables the integration of specialized features such as code syntax highlighting, chart rendering, diagram generation, and complex table formatting. It also includes a live preview mode that coordinates the vertical scroll position between raw input and rendered output for real-time feedback.

Beyond core editing, the project offers a read-only viewer mode for displaying formatted content and supports interface localization for global accessibility. It is built to be embedded into web applications through specialized wrapper components that facilitate integration with various frontend frameworks.

## Tags

### Content Management & Publishing

- [Markdown Editors](https://awesome-repositories.com/f/content-management-publishing/markdown-editors.md) — Delivers a dual-mode text editor that synchronizes raw markdown syntax with a visual interface for real-time document creation.
- [Markdown-Based Content Authoring](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-authoring-tools/markdown-based-content-authoring/markdown-based-content-authoring.md) — Provides a dual-mode interface for creating and editing structured markdown documents with real-time visual feedback.
- [Markdown Abstract Syntax Trees](https://awesome-repositories.com/f/content-management-publishing/content-processing-transformation/document-processing-conversion/document-processing/format-specific-parsers/markdown-abstract-syntax-trees.md) — Parses raw markdown text into structured tree representations to enable consistent document manipulation and rendering.

### User Interface & Experience

- [Rich Text Editors](https://awesome-repositories.com/f/user-interface-experience/rich-text-editors.md) — Implements a modular rich text editing interface supporting custom content blocks, plugins, and live previewing.
- [Content Block Editors](https://awesome-repositories.com/f/user-interface-experience/content-block-editors.md) — Allows defining unique document nodes and parsing rules for specialized content types beyond standard markdown. ([source](https://cdn.jsdelivr.net/gh/nhn/tui.editor@master/README.md))
- [Read-Only Data Views](https://awesome-repositories.com/f/user-interface-experience/read-only-data-views.md) — Includes a dedicated viewer mode for displaying formatted content without interactive editing tools. ([source](https://cdn.jsdelivr.net/gh/nhn/tui.editor@master/README.md))
- [Scroll Event Handlers](https://awesome-repositories.com/f/user-interface-experience/scroll-event-handlers.md) — Coordinates vertical scroll positions between raw input and rendered output panes for real-time feedback.

### Development Tools & Productivity

- [Plugin Systems](https://awesome-repositories.com/f/development-tools-productivity/plugin-systems.md) — Extends core functionality through a modular plugin system for features like syntax highlighting and diagram rendering. ([source](https://cdn.jsdelivr.net/gh/nhn/tui.editor@master/README.md))
- [Text Editing Modes](https://awesome-repositories.com/f/development-tools-productivity/text-editing-modes.md) — Provides a synchronized dual-mode interface for toggling between raw markdown and visual WYSIWYG editing. ([source](http://ui.toast.com/tui-editor))

### Software Engineering & Architecture

- [Plugin-Based Architectures](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures.md) — Supports a modular hook system for injecting custom rendering logic and document nodes into the core.
- [Document Formatting Frameworks](https://awesome-repositories.com/f/software-engineering-architecture/document-formatting-frameworks.md) — Supports specialized content types like diagrams and charts through an extensible document formatting architecture.

### Web Development

- [Live Preview Systems](https://awesome-repositories.com/f/web-development/live-preview-systems.md) — Visualizes rendered output alongside raw markdown with synchronized scrolling for real-time formatting feedback. ([source](http://ui.toast.com/tui-editor))
- [Framework Plugins](https://awesome-repositories.com/f/web-development/framework-plugins.md) — Ships as a web-based editing tool with framework-specific integration plugins and read-only viewer modes.
- [Frontend Frameworks](https://awesome-repositories.com/f/web-development/frontend-frameworks.md) — Integrates rich text editing capabilities into web applications using framework-specific wrapper components. ([source](https://cdn.jsdelivr.net/gh/nhn/tui.editor@master/README.md))
- [State Synchronization Handlers](https://awesome-repositories.com/f/web-development/state-update-handlers/state-synchronization-handlers.md) — Maintains a single internal document model that synchronizes state between raw markdown and visual editing interfaces.
- [Virtual DOM Reconciliation](https://awesome-repositories.com/f/web-development/virtual-dom-reconciliation.md) — Updates the visual editing interface by calculating minimal changes between the document model and the rendered view.
- [Framework UI Wrappers](https://awesome-repositories.com/f/web-development/framework-ui-wrappers.md) — Provides framework-specific adapters to integrate the editor into modern component-based web applications.
- [User Interface Localization](https://awesome-repositories.com/f/web-development/internationalization-localization/core-localization-frameworks/user-interface-localization.md) — Supports interface localization to enable language support for a global user base. ([source](https://cdn.jsdelivr.net/gh/nhn/tui.editor@master/README.md))