[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3786":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":39,"readmeContent":40,"aiSummary":41,"trendingCount":16,"starSnapshotCount":16,"syncStatus":42,"lastSyncTime":43,"discoverSource":44},3786,"tui.editor","nhn\u002Ftui.editor","nhn","🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.","http:\u002F\u002Fui.toast.com\u002Ftui-editor",null,"TypeScript",17972,1846,222,574,0,1,8,36,5,44.8,"MIT License",false,"master",true,[27,28,29,30,31,32,33,34,35,36,37,38],"chart","commonmark","documentation","editor","frontend","gfm","html","jquery","jquery-plugin","markdown","uml","wysiwyg","2026-06-12 02:00:54","# ![TOAST UI Editor](https:\u002F\u002Fuicdn.toast.com\u002Ftoastui\u002Fimg\u002Ftui-editor-bi.png)\n\n> GFM  Markdown and WYSIWYG Editor - Productive and Extensible\n\n[![github release version](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fv\u002Frelease\u002Fnhn\u002Ftui.editor.svg?include_prereleases)](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Freleases\u002Flatest) [![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@toast-ui\u002Feditor.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@toast-ui\u002Feditor) [![license](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fnhn\u002Ftui.editor.svg)](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Fblob\u002Fmaster\u002FLICENSE) [![PRs welcome](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPRs-welcome-ff69b4.svg)](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Fissues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) [![code with hearth by NHN Cloud](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F%3C%2F%3E%20with%20%E2%99%A5%20by-NHN_Cloud-ff1414.svg)](https:\u002F\u002Fgithub.com\u002Fnhn)\n\n\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F37766175\u002F121809054-446bac80-cc96-11eb-9139-08c6d9ad2d88.png\" \u002F>\n\n\n## 🚩 Table of Contents\n\n- [Packages](#-packages)\n- [Why TOAST UI Editor?](#-why-toast-ui-editor)\n- [Features](#-features)\n- [Examples](#-examples)\n- [Browser Support](#-browser-support)\n- [Pull Request Steps](#-pull-request-steps)\n- [Contributing](#-contributing)\n- [TOAST UI Family](#-toast-ui-family)\n- [Used By](#-used-by)\n- [License](#-license)\n\n\n## 📦 Packages\n\n### TOAST UI Editor\n\n| Name | Description |\n| --- | --- |\n| [`@toast-ui\u002Feditor`](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fapps\u002Feditor) | Plain JavaScript component |\n\n### TOAST UI Editor's Wrappers\n\n| Name | Description |\n| --- | --- |\n| [`@toast-ui\u002Freact-editor`](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fapps\u002Freact-editor) | [React](https:\u002F\u002Freactjs.org\u002F) wrapper component |\n| [`@toast-ui\u002Fvue-editor`](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fapps\u002Fvue-editor) | [Vue](https:\u002F\u002Fvuejs.org\u002F) wrapper component |\n\n### TOAST UI Editor's Plugins\n\n| Name | Description |\n| --- | --- |\n| [`@toast-ui\u002Feditor-plugin-chart`](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fplugins\u002Fchart) | Plugin to render chart |\n| [`@toast-ui\u002Feditor-plugin-code-syntax-highlight`](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fplugins\u002Fcode-syntax-highlight) | Plugin to highlight code syntax |\n| [`@toast-ui\u002Feditor-plugin-color-syntax`](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fplugins\u002Fcolor-syntax) | Plugin to color editing text |\n| [`@toast-ui\u002Feditor-plugin-table-merged-cell`](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fplugins\u002Ftable-merged-cell) | Plugin to merge table columns |\n| [`@toast-ui\u002Feditor-plugin-uml`](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fplugins\u002Fuml) | Plugin to render UML |\n\n\n## 🤖 Why TOAST UI Editor?\n\nTOAST 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.\n\n### Productive Markdown Mode\n\n![markdown](https:\u002F\u002Fuser-images.githubusercontent.com\u002F37766175\u002F121464762-71e2fc80-c9ef-11eb-9a0a-7b06e08d3ccb.png)\n\n**CommonMark + GFM Specifications**\n\nToday *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*](http:\u002F\u002Fcommonmark.org\u002F) and [*GFM*](https:\u002F\u002Fgithub.github.com\u002Fgfm\u002F) 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.\n\n* **Live Preview** : Edit Markdown while keeping an eye on the rendered HTML. Your edits will be applied immediately.\n* **Scroll Sync** : Synchronous scrolling between Markdown and Preview. You don't need to scroll through each one separately.\n* **Syntax Highlight** : You can check broken Markdown syntax immediately.\n\n### Easy WYSIWYG Mode\n\n![wysiwyg](https:\u002F\u002Fuser-images.githubusercontent.com\u002F37766175\u002F121808381-251f5000-cc93-11eb-8c47-4f5a809de2b3.png)\n\n* **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.\n* **Custom Block Editor** : The custom block area can be edited through the internal editor.\n* **Copy and Paste** : Paste anything from browser, screenshot, excel, powerpoint, etc.\n\n### UI\n* **Toolbar** : Through the toolbar, you can style or add elements to the document you are editing.\n![UI](https:\u002F\u002Fuser-images.githubusercontent.com\u002F37766175\u002F121808231-767b0f80-cc92-11eb-82a0-433123746982.png)\n\n* **Dark Theme** : You can use the dark theme.\n![UI](https:\u002F\u002Fuser-images.githubusercontent.com\u002F37766175\u002F121808649-8136a400-cc94-11eb-8674-812e170ccab5.png)\n\n### Use of Various Extended Functions - Plugins\n\n![plugin](https:\u002F\u002Fuser-images.githubusercontent.com\u002F37766175\u002F121808323-d8d41000-cc92-11eb-9117-b92a435c9b43.png)\n\nCommonMark and GFM are great, but we often need more abstraction. The TOAST UI Editor comes with powerful **Plugins** in compliance with the Markdown syntax.\n\n**Five basic plugins** are provided as follows, and can be downloaded and used with npm.\n\n* [**`chart`**](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fplugins\u002Fchart) : A code block marked as a 'chart' will render [TOAST UI Chart](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.chart).\n* [**`code-syntax-highlight`**](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fplugins\u002Fcode-syntax-highlight) : Highlight the code block area corresponding to the language provided by [Prism.js](https:\u002F\u002Fprismjs.com\u002F).\n* [**`color-syntax`**](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fplugins\u002Fcolor-syntax) : \nUsing [TOAST UI ColorPicker](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.color-picker), you can change the color of the editing text with the GUI.\n* [**`table-merged-cell`**](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fplugins\u002Ftable-merged-cell) : \nYou can merge columns of the table header and body area.\n* [**`uml`**](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fplugins\u002Fuml) : A code block marked as an 'uml' will render [UML diagrams](http:\u002F\u002Fplantuml.com\u002Fscreenshot).\n\n## 🎨 Features\n\n* [Viewer](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fdocs\u002Fen\u002Fviewer.md) : Supports a mode to display only markdown data without an editing area.\n* [Internationalization (i18n)](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fdocs\u002Fen\u002Fi18n.md) : 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.\n* [Widget](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fdocs\u002Fen\u002Fwidget.md) : This feature allows you to configure the rules that replaces the string matching to a specific `RegExp` with the widget node.\n* [Custom Block](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002Fdocs\u002Fen\u002Fcustom-block.md) : 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.\n\n## 🐾 Examples\n\n* [Basic](https:\u002F\u002Fnhn.github.io\u002Ftui.editor\u002Flatest\u002Ftutorial-example01-editor-basic)\n* [Viewer](https:\u002F\u002Fnhn.github.io\u002Ftui.editor\u002Flatest\u002Ftutorial-example04-viewer)\n* [Using All Plugins](https:\u002F\u002Fnhn.github.io\u002Ftui.editor\u002Flatest\u002Ftutorial-example12-editor-with-all-plugins)\n* [Creating the User's Plugin](https:\u002F\u002Fnhn.github.io\u002Ftui.editor\u002Flatest\u002Ftutorial-example13-creating-plugin)\n* [Customizing the Toobar Buttons](https:\u002F\u002Fnhn.github.io\u002Ftui.editor\u002Flatest\u002Ftutorial-example15-customizing-toolbar-buttons)\n* [Internationalization (i18n)](https:\u002F\u002Fnhn.github.io\u002Ftui.editor\u002Flatest\u002Ftutorial-example16-i18n)\n\nHere are more [examples](https:\u002F\u002Fnhn.github.io\u002Ftui.editor\u002Flatest\u002Ftutorial-example01-editor-basic) and play with TOAST UI Editor!\n\n\n## 🌏 Browser Support\n\n| \u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F1215767\u002F34348387-a2e64588-ea4d-11e7-8267-a43365103afe.png\" alt=\"Chrome\" width=\"16px\" height=\"16px\" \u002F> Chrome | \u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F1215767\u002F34348590-250b3ca2-ea4f-11e7-9efb-da953359321f.png\" alt=\"IE\" width=\"16px\" height=\"16px\" \u002F> Internet Explorer | \u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F1215767\u002F34348380-93e77ae8-ea4d-11e7-8696-9a989ddbbbf5.png\" alt=\"Edge\" width=\"16px\" height=\"16px\" \u002F> Edge | \u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F1215767\u002F34348394-a981f892-ea4d-11e7-9156-d128d58386b9.png\" alt=\"Safari\" width=\"16px\" height=\"16px\" \u002F> Safari | \u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F1215767\u002F34348383-9e7ed492-ea4d-11e7-910c-03b39d52f496.png\" alt=\"Firefox\" width=\"16px\" height=\"16px\" \u002F> Firefox |\n| :---------: | :---------: | :---------: | :---------: | :---------: |\n| Yes | 11+ | Yes | Yes | Yes |\n\n\n## 🔧 Pull Request Steps\n\nTOAST 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.\n\n### Setup\n\nFork `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.\n\n```sh\n$ git clone https:\u002F\u002Fgithub.com\u002F{your-personal-repo}\u002Ftui.editor.git\n$ npm install\n$ npm run build toastmark\n$ npm run test editor\n```\n\n> TOAST UI Editor uses [npm workspace](https:\u002F\u002Fdocs.npmjs.com\u002Fcli\u002Fv7\u002Fusing-npm\u002Fworkspaces\u002F), so you need to set the environment based on [npm7](https:\u002F\u002Fgithub.blog\u002F2021-02-02-npm-7-is-now-generally-available\u002F). If subversion is used, dependencies must be installed by moving direct paths per package.\n\n### Develop\n\nYou 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.\n\n#### Run snowpack-dev-server\n[snowpack](https:\u002F\u002Fwww.snowpack.dev\u002F) allows you to run a development server without bundling.\n\n``` sh\n$ npm run serve editor\n```\n\n#### Run webpack-dev-server\nIf testing of legacy browsers is required, the development server can still be run using a [webpack](https:\u002F\u002Fwebpack.js.org\u002F).\n\n``` sh\n$ npm run serve:ie editor\n```\n\n#### Run test\n\n``` sh\n$ npm test editor\n```\n\n### Pull Request\n\nBefore 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!\n\nFor more information on PR's steps, please see links in the Contributing section.\n\n## 💬 Contributing\n\n* [Code of Conduct](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Fblob\u002Fmaster\u002FCODE_OF_CONDUCT.md)\n* [Contributing Guideline](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md)\n* [Commit Convention](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Fblob\u002Fmaster\u002Fdocs\u002FCOMMIT_MESSAGE_CONVENTION.md)\n* [Issue Guidelines](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Ftree\u002Fmaster\u002F.github\u002FISSUE_TEMPLATE)\n\n\n## 🍞 TOAST UI Family\n\n- [TOAST UI Calendar](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.calendar)\n- [TOAST UI Chart](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.chart)\n- [TOAST UI Grid](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.grid)\n- [TOAST UI Image Editor](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.image-editor)\n- [TOAST UI Components](https:\u002F\u002Fgithub.com\u002Fnhn)\n\n\n## 🚀 Used By\n\n* [NHN Dooray! - Collaboration Service (Project, Messenger, Mail, Calendar, Drive, Wiki, Contacts)](https:\u002F\u002Fdooray.com)\n* [UNOTES - Visual Studio Code Extension](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ryanmcalister.Unotes)\n\n\n## 📜 License\n\nThis software is licensed under the [MIT](https:\u002F\u002Fgithub.com\u002Fnhn\u002Ftui.editor\u002Fblob\u002Fmaster\u002FLICENSE) © [NHN Cloud](https:\u002F\u002Fgithub.com\u002Fnhn).\n","TOAST UI Editor 是一个支持Markdown和所见即所得（WYSIWYG）模式的编辑器，遵循GFM标准并可扩展图表与UML功能。其核心功能包括双模式编辑、代码高亮、表格单元格合并等，通过丰富的插件系统增强了编辑体验。该编辑器采用TypeScript编写，确保了良好的类型安全性和维护性。适用于需要高质量文档编辑功能的场景，如技术博客撰写、项目文档管理以及在线教育平台内容创建等。MIT许可证下开源，社区活跃，易于集成到各种前端项目中。",2,"2026-06-11 02:56:16","top_language"]