2025 में कौन-सा rich text editor framework चुनना चाहिए?

xguru · 2025-02-10T10:21:01+09:00

आजकल ऐप्स में अनिवार्य rich text editor (WYSIWYG) का उपयोग Linear, Notion, Google Docs जैसी सेवाओं में आम है Liveblocks ने पिछले 1 साल में कई लोकप्रिय editors का विश्लेषण किया और हर editor के फायदे-नुकसान को समझकर संक्षेप में व्यवस्थित किया editors को मोटे तौर पर दो प्रकारों में बाँटा जा सकता है: ‘core-type’ और ‘battery-included’ अगर सिर्फ एक साधारण editor चाहिए, तो हल्का विकल्प चुनें; और अगर जटिल तथा collaboration features वाला editor बनाना है, तो अधिक extensible विकल्प पर विचार करें कुल मिलाकर सबसे संतुलित विकल्प Tiptap माना गया, क्योंकि इसमें खूब features हैं लेकिन यह जरूरत से ज्यादा prescriptive नहीं है सहयोग हम (Liveblocks) collaboration features पर फोकस करते रहे हैं, और अधिकांश editors में Yjs नाम की CRDT library के जरिए real-time collaboration लागू किया जा सकता है Yjs इस्तेमाल करते समय documents को store करने और real-time connection बनाए रखने के लिए backend service की जरूरत होती है Liveblocks कई Yjs-सपोर्टेड editors में इस्तेमाल की जा सकने वाली general Yjs backend service देता है, और Tiptap·Lexical के लिए integrated solution भी देता है कुछ editors अपनी खुद की OT(Operational Transform) आधारित solution या closed-source cloud service का उपयोग भी करते हैं शुरू करने से पहले ध्यान देने वाली बातें Draft.js जैसे maintenance बंद हो चुके editors, बहुत छोटे community वाले editors, या private-source editors (जैसे Froala) को शामिल नहीं किया गया accessibility (a11y) के लिए अधिकांश editors में कुछ न कुछ अतिरिक्त काम करना पड़ता है, इसलिए हर editor के docs देखें Tiptap यह ProseMirror के ऊपर चलने वाला editor है, जो ProseMirror की जटिलता को abstract करके बेहतर developer experience देता है इसका अधिकांश हिस्सा MIT license के तहत उपलब्ध है, और Tiptap Cloud या Liveblocks जैसी सेवाओं से real-time collaboration features तुरंत इस्तेमाल किए जा सकते हैं इसमें features बहुत हैं, लेकिन इसकी tree-shakable संरचना के कारण core bundle size को Quill·Slate·Lexical से छोटा रखा जा सकता है विस्तार Tiptap को simple node, mark, command और extension आसानी से जोड़ने के लिए डिज़ाइन किया गया है जरूरत पड़ने पर मौजूदा extensions के behavior को override करके मनचाहे तरीके से customize किया जा सकता है कुछ “pro” extensions paid रूप में उपलब्ध हैं उन्नत customization कुछ स्थितियों में ProseMirror की संरचना को सीधे संभालना पड़ सकता है command chain जैसी Tiptap-विशिष्ट abstractions की आदत डालने में थोड़ा समय लग सकता है इसका data model schema-आधारित है; अधिकतर चीजें auto-generate हो जाती हैं, लेकिन advanced features में schema को सीधे संभालना पड़ सकता है सीमाएँ (Drawbacks) ProseMirror docs और Tiptap docs के बीच बार-बार जाना पड़ता है, जिससे guidelines भ्रमित कर सकती हैं accessibility (a11y) से जुड़ी बातें काफी हद तक implementer पर निर्भर रहती हैं transaction के दौरान document state को अनावश्यक रूप से traverse करने पर performance घट सकती है server-side बदलाव सिर्फ Tiptap के साथ server side पर document manipulate करना आसान नहीं है इसके लिए सीधे ProseMirror का उपयोग करना या JSON document को सीधे modify करना पड़ सकता है Liveblocks, ProseMirror documents को बदलना आसान बनाने के लिए एक library भी देता है real-time collaboration Tiptap में Yjs के जरिए real-time collaboration देने वाला extension मौजूद है इसे Tiptap Cloud, Liveblocks जैसी कई cloud solutions के साथ जोड़ा जा सकता है Liveblocks Text Editor, real-time collaboration के अलावा cursor presence, comments, mentions, version history जैसी कई अतिरिक्त सुविधाएँ भी देता है फायदे (Pros) बेहतरीन documentation शानदार real-time collaboration support framework-independent, साथ में React-विशेष package बहुत अच्छी extensibility Liveblocks या Tiptap Cloud के साथ integration संभव नुकसान (Cons) अगर recommended usage pattern का पालन न किया जाए तो performance गिर सकती है advanced features बनाने के लिए ProseMirror के internal structure को सीखना पड़ता है default रूप से server-side headless editing support कमजोर है BlockNote BlockNote, Tiptap·ProseMirror को extend करने वाला block-based editor है, जो Notion-style features देता है यह मुख्य रूप से React-केंद्रित तरीके से विकसित किया गया है, इसलिए दूसरे frameworks में इसके UI components का उपयोग करना आसान नहीं है Slash menu, floating toolbar जैसी जरूरी सुविधाएँ पहले से शामिल हैं, इसलिए इसे आसानी से इस्तेमाल किया जा सकता है सीमाएँ BlockNote खुद open source है, लेकिन docx·PDF exporter जैसी कुछ सुविधाओं के लिए paid subscription चाहिए real-time collaboration यह Yjs·Liveblocks आधारित collaboration support करता है जल्द ही आधिकारिक Liveblocks integration देने की योजना है फायदे स्थिरता साबित कर चुके Tiptap और ProseMirror पर आधारित Yjs और Liveblocks के साथ real-time collaboration support block-based editing API और UI components built-in नुकसान मुख्यतः React-केंद्रित डिज़ाइन basic editors की तुलना में bundle size बड़ा है Lexical Facebook(Meta) द्वारा समर्थित यह editor काफी ध्यान आकर्षित कर रहा है Liveblocks ने कई महीनों तक comments·mentions·version history·real-time collaboration जैसे extensions विकसित किए, और इस प्रक्रिया में यह अभी भी शुरुआती चरण में लगा यह फिलहाल 1.0 से पहले के version में है और तेज़ी से लगातार update हो रहा है सीमाएँ इसमें “pure decorations” feature नहीं है, इसलिए cursor presence जैसी सुविधाओं के लिए editor के ऊपर अलग से DOM elements रखने पड़ते हैं बुनियादी Yjs collaboration support अभी edge cases को संभालने में कमजोर है root node name hardcode होने के कारण एक ही document में कई editors को एक साथ इस्तेमाल करना कठिन है real-time collaboration Liveblocks package के बिना Lexical collaboration लागू करना कठिन है StickyNotes उदाहरण में जैसे कई root nodes बनाने हों, तो हर एक के लिए अलग document·socket connection इस्तेमाल करके workaround किया जाता है तेज़ development speed के कारण issues लगातार हल हो रहे हैं Lexical विस्तार Lexical, node hierarchy के जरिए data manage करता है 4 core node types को inherit करके अपने custom nodes बनाए जा सकते हैं React-विशेष LexicalComposer और @lexical/react package के जरिए development speed बढ़ाई जा सकती है backend पर DOM के बिना Lexical चलाने के लिए @lexical/headless package इस्तेमाल किया जा सकता है server-side बदलाव Lexical documents को server पर modify करना संभव है, और Liveblocks इसे सरल बनाने के लिए library प्रदान करता है फायदे Yjs के साथ real-time collaboration support framework-independent, साथ में React-विशेष package comments, mentions, version history के साथ integrated Liveblocks support Meta के समर्थन से बहुत सक्रिय development और बड़ा community नुकसान Yjs real-time collaboration में edge cases को सीधे handle न किया जाए तो कुछ bugs आ सकते हैं pure decorations की कमी है, और advanced features के लिए DOM-आधारित workaround चाहिए Tiptap और Slate की तुलना में core package का size बड़ा है Slate Discord, Grafana, Sanity.io, Slite आदि में इस्तेमाल होने वाला कस्टमाइज़ किया जा सकने वाला editor framework Liveblocks अपने comment composer में डिफ़ॉल्ट रूप से Slate अपनाता है इसका data structure सरल है, पूरा control संभव है, और React के अलावा भी इसे सामान्य रूप से इस्तेमाल किया जा सकता है Slate विस्तार कई उदाहरणों और docs के ज़रिए Slate को extend किया जा सकता है plugin ecosystem सीमित है, लेकिन खुद implement करना बहुत कठिन नहीं है Plate नाम का एक project मौजूद है, जो इसका अधिक विस्तृत रूप है सीमाएँ Tiptap की तुलना में bundle size थोड़ा बड़ा है built-in features कम हैं, इसलिए कुछ हिस्से खुद implement करने पड़ते हैं रियल-टाइम collaboration slate-yjs, @liveblocks/yjs आदि की मदद से Slate documents में रियल-टाइम collaboration implement किया जा सकता है फ़ायदे बेहतरीन documentation support Yjs का उपयोग करके रियल-टाइम collaboration support framework-independent है और React-specific package भी देता है बहुत अधिक extensibility नुकसान Tiptap की तुलना में bundle size थोड़ा बड़ा built-in features की कमी Quill Slack, LinkedIn, Figma, Zoom, Miro, Airtable आदि में इस्तेमाल होने का इतिहास रखने वाला editor कुछ समय तक इसका development धीमा रहा, लेकिन अप्रैल 2024 में version 2 release होने और TypeScript rewrite के बाद यह फिर सक्रिय हुआ है यह Parchment नाम के अपने document model का उपयोग करता है, जो ProseMirror schema जैसी अवधारणा है सीमाएँ Lexical की तरह pure decoration feature नहीं है, इसलिए color highlight या collaboration cursor जैसी सुविधाओं के लिए अलग DOM elements overlay करने पड़ते हैं Quill 2 के लिए plugins अभी तक कई मामलों में update नहीं हुए हैं community activity दूसरे editors की तुलना में कुछ कम हो सकती है रियल-टाइम collaboration Yjs और y-quill को जोड़कर रियल-टाइम collaboration implement किया जा सकता है अलग backend के लिए Liveblocks जैसी विभिन्न विधियाँ इस्तेमाल की जा सकती हैं फ़ायदे बेहतरीन documentation support framework-independent है और React-specific package भी देता है Yjs का उपयोग करके रियल-टाइम collaboration support सरल delta format का उपयोग नुकसान built-in features की कमी, और plugins अभी Quill 2 के अनुसार update नहीं हुए हैं pure decoration feature की कमी तुलनात्मक रूप से कम सक्रिय development और छोटा community Tiptap या Slate की तुलना में bundle size लगभग दोगुना ProseMirror Tiptap·Remirror·BlockNote आदि कई editors की नींव बनने वाला core framework schema, state, view, transform जैसी स्पष्ट संरचना के साथ स्थिर behavior सुनिश्चित करता है अगर शुरुआत से सिर्फ core library के साथ editor बनाना हो, तो code की मात्रा काफ़ी बढ़ जाती है सीमाएँ docs में भी साफ़ लिखा है कि एक simple editor बनाने के लिए भी काफ़ी code चाहिए Tiptap, Remirror, BlockNote जैसे higher-level wrappers इस्तेमाल करने की सिफारिश की जाती है learning curve कुछ ऊँचा है, लेकिन documentation और community अच्छी तरह व्यवस्थित हैं फ़ायदे सक्रिय community के साथ बेहतरीन documentation Yjs का उपयोग करके रियल-टाइम collaboration support नुकसान basic example implement करने के लिए भी बहुत code चाहिए built-in features की कमी तुलनात्मक रूप से steep learning curve Plate Slate आधारित “battery-included” project, जो AI features, mentions, comments आदि के लिए समृद्ध plugins देता है ज़रूरत के अनुसार केवल आवश्यक features चुनकर इस्तेमाल किए जा सकते हैं, इसलिए यह flexible है paid templates भी देता है और React-only के रूप में design किया गया है सीमाएँ collaboration के लिए अभी आधिकारिक रूप से केवल Hocuspocus support है, और दूसरे Yjs backends (जैसे Liveblocks) से जोड़ने के लिए implementation की ज़रूरत पड़ती है React-only होने के कारण दूसरे frameworks के साथ compatibility सीमित हो सकती है features ज़्यादा होने से bundle size बड़ा होने की प्रवृत्ति है फ़ायदे विभिन्न plugin libraries उपलब्ध server-side editing features support जल्दी शुरुआत के लिए templates उपलब्ध नुकसान React-only design collaboration feature सिर्फ Hocuspocus के माध्यम से उपलब्ध basic editors की तुलना में bundle size बड़ा Remirror ProseMirror आधारित editor, जो Tiptap जैसा है लेकिन अधिक battery-included approach अपनाता है 30 से अधिक plugins, React hooks, internationalization (i18n), accessibility (a11y) आदि support करता है MIT license के तहत open source है, और collaboration features भी देता है सीमाएँ Tiptap की तुलना में community छोटा है और updates धीमे हो सकते हैं React-specific features ज़्यादा हैं, इसलिए दूसरे environments में सीमाएँ हो सकती हैं bundle size कुछ बड़ा है रियल-टाइम collaboration Remirror, YjsExtension के ज़रिए Yjs और Liveblocks collaboration support करता है फ़ायदे बेहतरीन documentation support विभिन्न plugin libraries उपलब्ध Yjs और Liveblocks के साथ collaboration support नुकसान React-only design बड़ा bundle size कम update frequency और छोटा community Editor.js block-based editing support करने वाला rich text editor, जिसके पास कई plugins और बड़ा community है इसका data structure blocks, inline, और tune से बना होता है यह framework-agnostic है, और tooltip जैसी कई convenience features built-in मिलती हैं सीमाएँ रियल-टाइम collaboration के लिए आधिकारिक support नहीं है, और कुछ PR प्रयास हुए हैं लेकिन maintenance status स्पष्ट नहीं है सिर्फ base package भी आकार में काफ़ी बड़ा है रियल-टाइम collaboration आधिकारिक रूप से support नहीं करता फ़ायदे कई features वाली समृद्ध plugin library कई CMS और backend frameworks के साथ community-driven integration support नुकसान बड़ा bundle size रियल-टाइम collaboration की अनुपस्थिति CKEditor 20 साल से अधिक इतिहास वाला editor, जिसका मौजूदा version (5) आधुनिक architecture और समृद्ध features देता है Angular, React, Vue, Next आदि कई frameworks को support करता है GPL-2 license के तहत वितरित किया जाता है, इसलिए कुछ स्थितियों में open source की आवश्यकता होती है, और commercial use के लिए अलग license खरीदना पड़ता है सीमाएँ कई plugins paid हैं, और collaboration feature भी केवल CKEditor की cloud service के साथ उपलब्ध है GPL-2 license और load-based pricing model कई users के लिए बाधा बन सकते हैं रियल-टाइम collaboration CKEditor की proprietary cloud service के अलावा कोई अन्य collaboration solution उपलब्ध नहीं है फ़ायदे डिफ़ॉल्ट रूप से बहुत समृद्ध features कई frameworks के साथ compatibility नुकसान collaboration feature, CKEditor की cloud service पर निर्भर GPL-2 license कुछ users के लिए प्रतिबंध बन सकता है कुछ features usage-based pricing के साथ दिए जाते हैं TinyMCE CKEditor की तरह 20 साल से अधिक इतिहास वाला editor, जो GPL-2 license का पालन करता है Angular, React, Vue आदि कई environments में इस्तेमाल किया जा सकता है load count-based pricing वाला cloud collaboration service उपलब्ध है सीमाएँ Markdown, mentions, comments, advanced typography जैसी मुख्य सुविधाएँ paid plugins के रूप में मिलती हैं server-side पर documents manipulate करने के तरीकों की documentation कम है रियल-टाइम collaboration TinyMCE के proprietary collaboration solution के अलावा कोई अन्य तरीका सार्वजनिक रूप से उपलब्ध नहीं है फ़ायदे डिफ़ॉल्ट रूप से बहुत समृद्ध features कई frameworks के साथ compatibility नुकसान collaboration feature Tiny Cloud service पर निर्भर GPL-2 license कुछ users के लिए प्रतिबंध बन सकता है कुछ features usage-based pricing के साथ दिए जाते हैं editor तुलना सारांश ProseMirror Framework: Vanilla Collaboration: Yjs Comments: उपलब्ध नहीं कराता (उदाहरण मौजूद हैं) Mentions: Suggestion plugin का उपयोग संभव Server-side editing: prosemirror-state और prosemirror-model के साथ Node.js में दस्तावेज़ संपादित किए जा सकते हैं License: MIT GitHub Stars: ⭐ 7.8k Tiptap Framework: Vanilla, React, Vue, Svelte Collaboration: Liveblocks, Tiptap Cloud, Yjs Comments: Liveblocks के integration से बिना configuration के संभव, custom भी किया जा सकता है Mentions: Liveblocks के integration से बिना configuration के संभव, custom भी किया जा सकता है Server-side editing: ProseMirror या Liveblocks के Node.js ProseMirror package के जरिए संभव License: MIT GitHub Stars: ⭐ 20k Remirror Framework: React Collaboration: Yjs Comments: संभव Mentions: संभव Server-side editing: ProseMirror या Liveblocks के Node.js ProseMirror package के जरिए संभव License: MIT GitHub Stars: ⭐ 2.8k BlockNote Framework: React Collaboration: Yjs Comments: Liveblocks या custom उदाहरणों के जरिए संभव Mentions: संभव Server-side editing: ProseMirror या Liveblocks के Node.js ProseMirror package के जरिए संभव License: MPL 2 GitHub Stars: ⭐ 7.1k Lexical Framework: Vanilla, React, iOS, अन्य Collaboration: Liveblocks, Yjs Comments: Liveblocks के साथ integration करके बिना configuration के संभव, custom भी किया जा सकता है Mentions: Liveblocks के साथ integration करके बिना configuration के संभव, custom भी किया जा सकता है Server-side editing: Lexical या Liveblocks के Node.js Lexical package के जरिए संभव License: MIT GitHub Stars: ⭐ 20k Slate Framework: Vanilla, React Collaboration: Yjs Comments: उपलब्ध नहीं कराता (उदाहरण मौजूद हैं) Mentions: उदाहरण मौजूद हैं Server-side editing: उपलब्ध नहीं कराता License: MIT GitHub Stars: ⭐ 30k Plate Framework: केवल React Collaboration: Hocuspocus (Yjs) Comments: संभव Mentions: संभव Server-side editing: संभव License: MIT GitHub Stars: ⭐ 13k Quill Framework: Vanilla Collaboration: Yjs Comments: उपलब्ध नहीं कराता (उदाहरण मौजूद हैं) Mentions: third-party library का उपयोग संभव Server-side editing: उपलब्ध नहीं कराता License: BSD-3 GitHub Stars: ⭐ 45k Editor.js Framework: Vanilla Collaboration: समर्थन नहीं करता (third-party उदाहरण मौजूद हैं) Comments: उपलब्ध नहीं कराता (third-party library मौजूद हैं) Mentions: उपलब्ध नहीं कराता (उदाहरण मौजूद हैं) Server-side editing: उपलब्ध नहीं कराता License: Apache 2 GitHub Stars: ⭐ 28k CKEditor Framework: Vanilla, React, Vue, Angular Collaboration: CKEditor Cloud के साथ integration Comments: संभव Mentions: संभव Server-side editing: संभव License: GPL-2+ GitHub Stars: ⭐ 8.8k TinyMCE Framework: Vanilla, React, Vue, Angular, अन्य Collaboration: Tiny Cloud के साथ integration Comments: Tiny Cloud के साथ integration Mentions: संभव Server-side editing: उपलब्ध नहीं कराता License: GPL-2+ GitHub Stars: ⭐ 15k

(liveblocks.io)

65 पॉइंट द्वारा xguru 2025-02-10 | 14 टिप्पणियां | WhatsApp पर शेयर करें

आजकल ऐप्स में अनिवार्य rich text editor (WYSIWYG) का उपयोग Linear, Notion, Google Docs जैसी सेवाओं में आम है
Liveblocks ने पिछले 1 साल में कई लोकप्रिय editors का विश्लेषण किया और हर editor के फायदे-नुकसान को समझकर संक्षेप में व्यवस्थित किया
editors को मोटे तौर पर दो प्रकारों में बाँटा जा सकता है: ‘core-type’ और ‘battery-included’
अगर सिर्फ एक साधारण editor चाहिए, तो हल्का विकल्प चुनें; और अगर जटिल तथा collaboration features वाला editor बनाना है, तो अधिक extensible विकल्प पर विचार करें
कुल मिलाकर सबसे संतुलित विकल्प Tiptap माना गया, क्योंकि इसमें खूब features हैं लेकिन यह जरूरत से ज्यादा prescriptive नहीं है
सहयोग
- हम (Liveblocks) collaboration features पर फोकस करते रहे हैं, और अधिकांश editors में Yjs नाम की CRDT library के जरिए real-time collaboration लागू किया जा सकता है
- Yjs इस्तेमाल करते समय documents को store करने और real-time connection बनाए रखने के लिए backend service की जरूरत होती है
- Liveblocks कई Yjs-सपोर्टेड editors में इस्तेमाल की जा सकने वाली general Yjs backend service देता है, और Tiptap·Lexical के लिए integrated solution भी देता है
- कुछ editors अपनी खुद की OT(Operational Transform) आधारित solution या closed-source cloud service का उपयोग भी करते हैं
शुरू करने से पहले ध्यान देने वाली बातें
- Draft.js जैसे maintenance बंद हो चुके editors, बहुत छोटे community वाले editors, या private-source editors (जैसे Froala) को शामिल नहीं किया गया
- accessibility (a11y) के लिए अधिकांश editors में कुछ न कुछ अतिरिक्त काम करना पड़ता है, इसलिए हर editor के docs देखें

Tiptap

यह ProseMirror के ऊपर चलने वाला editor है, जो ProseMirror की जटिलता को abstract करके बेहतर developer experience देता है
इसका अधिकांश हिस्सा MIT license के तहत उपलब्ध है, और Tiptap Cloud या Liveblocks जैसी सेवाओं से real-time collaboration features तुरंत इस्तेमाल किए जा सकते हैं
इसमें features बहुत हैं, लेकिन इसकी tree-shakable संरचना के कारण core bundle size को Quill·Slate·Lexical से छोटा रखा जा सकता है
विस्तार
- Tiptap को simple node, mark, command और extension आसानी से जोड़ने के लिए डिज़ाइन किया गया है
- जरूरत पड़ने पर मौजूदा extensions के behavior को override करके मनचाहे तरीके से customize किया जा सकता है
- कुछ “pro” extensions paid रूप में उपलब्ध हैं
उन्नत customization
- कुछ स्थितियों में ProseMirror की संरचना को सीधे संभालना पड़ सकता है
- command chain जैसी Tiptap-विशिष्ट abstractions की आदत डालने में थोड़ा समय लग सकता है
- इसका data model schema-आधारित है; अधिकतर चीजें auto-generate हो जाती हैं, लेकिन advanced features में schema को सीधे संभालना पड़ सकता है
सीमाएँ (Drawbacks)
- ProseMirror docs और Tiptap docs के बीच बार-बार जाना पड़ता है, जिससे guidelines भ्रमित कर सकती हैं
- accessibility (a11y) से जुड़ी बातें काफी हद तक implementer पर निर्भर रहती हैं
- transaction के दौरान document state को अनावश्यक रूप से traverse करने पर performance घट सकती है
server-side बदलाव
- सिर्फ Tiptap के साथ server side पर document manipulate करना आसान नहीं है
- इसके लिए सीधे ProseMirror का उपयोग करना या JSON document को सीधे modify करना पड़ सकता है
- Liveblocks, ProseMirror documents को बदलना आसान बनाने के लिए एक library भी देता है
real-time collaboration
- Tiptap में Yjs के जरिए real-time collaboration देने वाला extension मौजूद है
- इसे Tiptap Cloud, Liveblocks जैसी कई cloud solutions के साथ जोड़ा जा सकता है
- Liveblocks Text Editor, real-time collaboration के अलावा cursor presence, comments, mentions, version history जैसी कई अतिरिक्त सुविधाएँ भी देता है
फायदे (Pros)
- बेहतरीन documentation
- शानदार real-time collaboration support
- framework-independent, साथ में React-विशेष package
- बहुत अच्छी extensibility
- Liveblocks या Tiptap Cloud के साथ integration संभव
नुकसान (Cons)
- अगर recommended usage pattern का पालन न किया जाए तो performance गिर सकती है
- advanced features बनाने के लिए ProseMirror के internal structure को सीखना पड़ता है
- default रूप से server-side headless editing support कमजोर है

BlockNote

BlockNote, Tiptap·ProseMirror को extend करने वाला block-based editor है, जो Notion-style features देता है
यह मुख्य रूप से React-केंद्रित तरीके से विकसित किया गया है, इसलिए दूसरे frameworks में इसके UI components का उपयोग करना आसान नहीं है
Slash menu, floating toolbar जैसी जरूरी सुविधाएँ पहले से शामिल हैं, इसलिए इसे आसानी से इस्तेमाल किया जा सकता है
सीमाएँ
- BlockNote खुद open source है, लेकिन docx·PDF exporter जैसी कुछ सुविधाओं के लिए paid subscription चाहिए
real-time collaboration
- यह Yjs·Liveblocks आधारित collaboration support करता है
- जल्द ही आधिकारिक Liveblocks integration देने की योजना है
फायदे
- स्थिरता साबित कर चुके Tiptap और ProseMirror पर आधारित
- Yjs और Liveblocks के साथ real-time collaboration support
- block-based editing API और UI components built-in
नुकसान
- मुख्यतः React-केंद्रित डिज़ाइन
- basic editors की तुलना में bundle size बड़ा है

Lexical

Facebook(Meta) द्वारा समर्थित यह editor काफी ध्यान आकर्षित कर रहा है
Liveblocks ने कई महीनों तक comments·mentions·version history·real-time collaboration जैसे extensions विकसित किए, और इस प्रक्रिया में यह अभी भी शुरुआती चरण में लगा
यह फिलहाल 1.0 से पहले के version में है और तेज़ी से लगातार update हो रहा है
सीमाएँ
- इसमें “pure decorations” feature नहीं है, इसलिए cursor presence जैसी सुविधाओं के लिए editor के ऊपर अलग से DOM elements रखने पड़ते हैं
- बुनियादी Yjs collaboration support अभी edge cases को संभालने में कमजोर है
- root node name hardcode होने के कारण एक ही document में कई editors को एक साथ इस्तेमाल करना कठिन है
real-time collaboration
- Liveblocks package के बिना Lexical collaboration लागू करना कठिन है
- StickyNotes उदाहरण में जैसे कई root nodes बनाने हों, तो हर एक के लिए अलग document·socket connection इस्तेमाल करके workaround किया जाता है
- तेज़ development speed के कारण issues लगातार हल हो रहे हैं
Lexical विस्तार
- Lexical, node hierarchy के जरिए data manage करता है
- 4 core node types को inherit करके अपने custom nodes बनाए जा सकते हैं
- React-विशेष LexicalComposer और @lexical/react package के जरिए development speed बढ़ाई जा सकती है
- backend पर DOM के बिना Lexical चलाने के लिए @lexical/headless package इस्तेमाल किया जा सकता है
server-side बदलाव
- Lexical documents को server पर modify करना संभव है, और Liveblocks इसे सरल बनाने के लिए library प्रदान करता है
फायदे
- Yjs के साथ real-time collaboration support
- framework-independent, साथ में React-विशेष package
- comments, mentions, version history के साथ integrated Liveblocks support
- Meta के समर्थन से बहुत सक्रिय development और बड़ा community
नुकसान
- Yjs real-time collaboration में edge cases को सीधे handle न किया जाए तो कुछ bugs आ सकते हैं
- pure decorations की कमी है, और advanced features के लिए DOM-आधारित workaround चाहिए
- Tiptap और Slate की तुलना में core package का size बड़ा है

Slate

Discord, Grafana, Sanity.io, Slite आदि में इस्तेमाल होने वाला कस्टमाइज़ किया जा सकने वाला editor framework
Liveblocks अपने comment composer में डिफ़ॉल्ट रूप से Slate अपनाता है
इसका data structure सरल है, पूरा control संभव है, और React के अलावा भी इसे सामान्य रूप से इस्तेमाल किया जा सकता है
Slate विस्तार
- कई उदाहरणों और docs के ज़रिए Slate को extend किया जा सकता है
- plugin ecosystem सीमित है, लेकिन खुद implement करना बहुत कठिन नहीं है
- Plate नाम का एक project मौजूद है, जो इसका अधिक विस्तृत रूप है
सीमाएँ
- Tiptap की तुलना में bundle size थोड़ा बड़ा है
- built-in features कम हैं, इसलिए कुछ हिस्से खुद implement करने पड़ते हैं
रियल-टाइम collaboration
- slate-yjs, @liveblocks/yjs आदि की मदद से Slate documents में रियल-टाइम collaboration implement किया जा सकता है
फ़ायदे
- बेहतरीन documentation support
- Yjs का उपयोग करके रियल-टाइम collaboration support
- framework-independent है और React-specific package भी देता है
- बहुत अधिक extensibility
नुकसान
- Tiptap की तुलना में bundle size थोड़ा बड़ा
- built-in features की कमी

Quill

Slack, LinkedIn, Figma, Zoom, Miro, Airtable आदि में इस्तेमाल होने का इतिहास रखने वाला editor
कुछ समय तक इसका development धीमा रहा, लेकिन अप्रैल 2024 में version 2 release होने और TypeScript rewrite के बाद यह फिर सक्रिय हुआ है
यह Parchment नाम के अपने document model का उपयोग करता है, जो ProseMirror schema जैसी अवधारणा है
सीमाएँ
- Lexical की तरह pure decoration feature नहीं है, इसलिए color highlight या collaboration cursor जैसी सुविधाओं के लिए अलग DOM elements overlay करने पड़ते हैं
- Quill 2 के लिए plugins अभी तक कई मामलों में update नहीं हुए हैं
- community activity दूसरे editors की तुलना में कुछ कम हो सकती है
रियल-टाइम collaboration
- Yjs और y-quill को जोड़कर रियल-टाइम collaboration implement किया जा सकता है
- अलग backend के लिए Liveblocks जैसी विभिन्न विधियाँ इस्तेमाल की जा सकती हैं
फ़ायदे
- बेहतरीन documentation support
- framework-independent है और React-specific package भी देता है
- Yjs का उपयोग करके रियल-टाइम collaboration support
- सरल delta format का उपयोग
नुकसान
- built-in features की कमी, और plugins अभी Quill 2 के अनुसार update नहीं हुए हैं
- pure decoration feature की कमी
- तुलनात्मक रूप से कम सक्रिय development और छोटा community
- Tiptap या Slate की तुलना में bundle size लगभग दोगुना

ProseMirror

Tiptap·Remirror·BlockNote आदि कई editors की नींव बनने वाला core framework
schema, state, view, transform जैसी स्पष्ट संरचना के साथ स्थिर behavior सुनिश्चित करता है
अगर शुरुआत से सिर्फ core library के साथ editor बनाना हो, तो code की मात्रा काफ़ी बढ़ जाती है
सीमाएँ
- docs में भी साफ़ लिखा है कि एक simple editor बनाने के लिए भी काफ़ी code चाहिए
- Tiptap, Remirror, BlockNote जैसे higher-level wrappers इस्तेमाल करने की सिफारिश की जाती है
- learning curve कुछ ऊँचा है, लेकिन documentation और community अच्छी तरह व्यवस्थित हैं
फ़ायदे
- सक्रिय community के साथ बेहतरीन documentation
- Yjs का उपयोग करके रियल-टाइम collaboration support
नुकसान
- basic example implement करने के लिए भी बहुत code चाहिए
- built-in features की कमी
- तुलनात्मक रूप से steep learning curve

Plate

Slate आधारित “battery-included” project, जो AI features, mentions, comments आदि के लिए समृद्ध plugins देता है
ज़रूरत के अनुसार केवल आवश्यक features चुनकर इस्तेमाल किए जा सकते हैं, इसलिए यह flexible है
paid templates भी देता है और React-only के रूप में design किया गया है
सीमाएँ
- collaboration के लिए अभी आधिकारिक रूप से केवल Hocuspocus support है, और दूसरे Yjs backends (जैसे Liveblocks) से जोड़ने के लिए implementation की ज़रूरत पड़ती है
- React-only होने के कारण दूसरे frameworks के साथ compatibility सीमित हो सकती है
- features ज़्यादा होने से bundle size बड़ा होने की प्रवृत्ति है
फ़ायदे
- विभिन्न plugin libraries उपलब्ध
- server-side editing features support
- जल्दी शुरुआत के लिए templates उपलब्ध
नुकसान
- React-only design
- collaboration feature सिर्फ Hocuspocus के माध्यम से उपलब्ध
- basic editors की तुलना में bundle size बड़ा

Remirror

ProseMirror आधारित editor, जो Tiptap जैसा है लेकिन अधिक battery-included approach अपनाता है
30 से अधिक plugins, React hooks, internationalization (i18n), accessibility (a11y) आदि support करता है
MIT license के तहत open source है, और collaboration features भी देता है
सीमाएँ
- Tiptap की तुलना में community छोटा है और updates धीमे हो सकते हैं
- React-specific features ज़्यादा हैं, इसलिए दूसरे environments में सीमाएँ हो सकती हैं
- bundle size कुछ बड़ा है
रियल-टाइम collaboration
- Remirror, YjsExtension के ज़रिए Yjs और Liveblocks collaboration support करता है
फ़ायदे
- बेहतरीन documentation support
- विभिन्न plugin libraries उपलब्ध
- Yjs और Liveblocks के साथ collaboration support
नुकसान
- React-only design
- बड़ा bundle size
- कम update frequency और छोटा community

Editor.js

block-based editing support करने वाला rich text editor, जिसके पास कई plugins और बड़ा community है
इसका data structure blocks, inline, और tune से बना होता है
यह framework-agnostic है, और tooltip जैसी कई convenience features built-in मिलती हैं
सीमाएँ
- रियल-टाइम collaboration के लिए आधिकारिक support नहीं है, और कुछ PR प्रयास हुए हैं लेकिन maintenance status स्पष्ट नहीं है
- सिर्फ base package भी आकार में काफ़ी बड़ा है
रियल-टाइम collaboration
- आधिकारिक रूप से support नहीं करता
फ़ायदे
- कई features वाली समृद्ध plugin library
- कई CMS और backend frameworks के साथ community-driven integration support
नुकसान
- बड़ा bundle size
- रियल-टाइम collaboration की अनुपस्थिति

CKEditor

20 साल से अधिक इतिहास वाला editor, जिसका मौजूदा version (5) आधुनिक architecture और समृद्ध features देता है
Angular, React, Vue, Next आदि कई frameworks को support करता है
GPL-2 license के तहत वितरित किया जाता है, इसलिए कुछ स्थितियों में open source की आवश्यकता होती है, और commercial use के लिए अलग license खरीदना पड़ता है
सीमाएँ
- कई plugins paid हैं, और collaboration feature भी केवल CKEditor की cloud service के साथ उपलब्ध है
- GPL-2 license और load-based pricing model कई users के लिए बाधा बन सकते हैं
रियल-टाइम collaboration
- CKEditor की proprietary cloud service के अलावा कोई अन्य collaboration solution उपलब्ध नहीं है
फ़ायदे
- डिफ़ॉल्ट रूप से बहुत समृद्ध features
- कई frameworks के साथ compatibility
नुकसान
- collaboration feature, CKEditor की cloud service पर निर्भर
- GPL-2 license कुछ users के लिए प्रतिबंध बन सकता है
- कुछ features usage-based pricing के साथ दिए जाते हैं

TinyMCE

CKEditor की तरह 20 साल से अधिक इतिहास वाला editor, जो GPL-2 license का पालन करता है
Angular, React, Vue आदि कई environments में इस्तेमाल किया जा सकता है
load count-based pricing वाला cloud collaboration service उपलब्ध है
सीमाएँ
- Markdown, mentions, comments, advanced typography जैसी मुख्य सुविधाएँ paid plugins के रूप में मिलती हैं
- server-side पर documents manipulate करने के तरीकों की documentation कम है
रियल-टाइम collaboration
- TinyMCE के proprietary collaboration solution के अलावा कोई अन्य तरीका सार्वजनिक रूप से उपलब्ध नहीं है
फ़ायदे
- डिफ़ॉल्ट रूप से बहुत समृद्ध features
- कई frameworks के साथ compatibility
नुकसान
- collaboration feature Tiny Cloud service पर निर्भर
- GPL-2 license कुछ users के लिए प्रतिबंध बन सकता है
- कुछ features usage-based pricing के साथ दिए जाते हैं

editor तुलना सारांश

ProseMirror
- Framework: Vanilla
- Collaboration: Yjs
- Comments: उपलब्ध नहीं कराता (उदाहरण मौजूद हैं)
- Mentions: Suggestion plugin का उपयोग संभव
- Server-side editing: prosemirror-state और prosemirror-model के साथ Node.js में दस्तावेज़ संपादित किए जा सकते हैं
- License: MIT
- GitHub Stars: ⭐ 7.8k
Tiptap
- Framework: Vanilla, React, Vue, Svelte
- Collaboration: Liveblocks, Tiptap Cloud, Yjs
- Comments: Liveblocks के integration से बिना configuration के संभव, custom भी किया जा सकता है
- Mentions: Liveblocks के integration से बिना configuration के संभव, custom भी किया जा सकता है
- Server-side editing: ProseMirror या Liveblocks के Node.js ProseMirror package के जरिए संभव
- License: MIT
- GitHub Stars: ⭐ 20k
Remirror
- Framework: React
- Collaboration: Yjs
- Comments: संभव
- Mentions: संभव
- Server-side editing: ProseMirror या Liveblocks के Node.js ProseMirror package के जरिए संभव
- License: MIT
- GitHub Stars: ⭐ 2.8k
BlockNote
- Framework: React
- Collaboration: Yjs
- Comments: Liveblocks या custom उदाहरणों के जरिए संभव
- Mentions: संभव
- Server-side editing: ProseMirror या Liveblocks के Node.js ProseMirror package के जरिए संभव
- License: MPL 2
- GitHub Stars: ⭐ 7.1k
Lexical
- Framework: Vanilla, React, iOS, अन्य
- Collaboration: Liveblocks, Yjs
- Comments: Liveblocks के साथ integration करके बिना configuration के संभव, custom भी किया जा सकता है
- Mentions: Liveblocks के साथ integration करके बिना configuration के संभव, custom भी किया जा सकता है
- Server-side editing: Lexical या Liveblocks के Node.js Lexical package के जरिए संभव
- License: MIT
- GitHub Stars: ⭐ 20k
Slate
- Framework: Vanilla, React
- Collaboration: Yjs
- Comments: उपलब्ध नहीं कराता (उदाहरण मौजूद हैं)
- Mentions: उदाहरण मौजूद हैं
- Server-side editing: उपलब्ध नहीं कराता
- License: MIT
- GitHub Stars: ⭐ 30k
Plate
- Framework: केवल React
- Collaboration: Hocuspocus (Yjs)
- Comments: संभव
- Mentions: संभव
- Server-side editing: संभव
- License: MIT
- GitHub Stars: ⭐ 13k
Quill
- Framework: Vanilla
- Collaboration: Yjs
- Comments: उपलब्ध नहीं कराता (उदाहरण मौजूद हैं)
- Mentions: third-party library का उपयोग संभव
- Server-side editing: उपलब्ध नहीं कराता
- License: BSD-3
- GitHub Stars: ⭐ 45k
Editor.js
- Framework: Vanilla
- Collaboration: समर्थन नहीं करता (third-party उदाहरण मौजूद हैं)
- Comments: उपलब्ध नहीं कराता (third-party library मौजूद हैं)
- Mentions: उपलब्ध नहीं कराता (उदाहरण मौजूद हैं)
- Server-side editing: उपलब्ध नहीं कराता
- License: Apache 2
- GitHub Stars: ⭐ 28k
CKEditor
- Framework: Vanilla, React, Vue, Angular
- Collaboration: CKEditor Cloud के साथ integration
- Comments: संभव
- Mentions: संभव
- Server-side editing: संभव
- License: GPL-2+
- GitHub Stars: ⭐ 8.8k
TinyMCE
- Framework: Vanilla, React, Vue, Angular, अन्य
- Collaboration: Tiny Cloud के साथ integration
- Comments: Tiny Cloud के साथ integration
- Mentions: संभव
- Server-side editing: उपलब्ध नहीं कराता
- License: GPL-2+
- GitHub Stars: ⭐ 15k

14 टिप्पणियां

bingo992000 2025-03-15

SvelteKit प्रोजेक्ट में QuillJS लागू करना काफ़ी असुविधाजनक था। React में लाइब्रेरी उपलब्ध हैं, इसलिए वहाँ काम करना कुछ आसान था।

firea32 2025-02-17

react custom component डेवलपमेंट के लिए आसान होने की वजह से tiptap सबसे बेहतर लगा।

vb6ko 2025-02-11

मैंने भी हाल ही में यह देखा था, इतनी अच्छी तरह से संक्षेप में व्यवस्थित करने के लिए धन्यवाद.

हमारी कोरियाई भाषा के मामले में, कुछ editors में mobile पर input से जुड़े छोटे bugs होते हैं.
동해물과 टाइप करने पर यह ㄷㅗㅇㅎㅐㅁㅜㄹㄱㅗㅏ की तरह दर्ज हो जाता है,
या 동해물과 टाइप करने पर 동동해해물물과과 की तरह दर्ज होता है.
(संदर्भ: https://github.com/ckeditor/ckeditor5/issues/13693)

मैं react, vue जैसे framework इस्तेमाल नहीं कर रहा हूँ, और editor license खरीदने में भी हिचक थी, इसलिए विकल्प बहुत सीमित थे.

इसलिए मैंने मुख्य लेख के अलावा नीचे दिए गए 4 विकल्प भी देखे.

https://trix-editor.org/
यह 37signals द्वारा बनाया गया editor है, जिसका नेतृत्व Ruby on Rails के DHH करते हैं. यह pure JavaScript से बना है (यानि React आदि का उपयोग नहीं किया गया), और इसे customize करना भी बहुत मुश्किल नहीं था. (जैसे YouTube link paste करने पर अपने आप YouTube embed में बदल जाना)

https://ui.toast.com/tui-editor
यह NHN Cloud द्वारा बनाया गया tool है.

https://naver.github.io/smarteditor2/demo/
यह Naver SmartEditor2 है. क्लासिक है, लेकिन कोरियाई users को target करने वाली services में इसकी जानी-पहचानी feel इसे पसंदीदा बना सकती है.

https://summernote.org/
यह Summernote है, जिसे एक कोरियाई developer विकसित कर रहे हैं. मैंने यही चुना. Theme लागू करने पर यह काफी refined दिखता है. जिन features की कोरियाई users आमतौर पर अपेक्षा करते हैं, वे built-in होने से यह सुविधाजनक है. (जैसे ऊपर वाला YouTube link embed conversion) लेकिन मैं इसे tailwind prose से style करना चाहता था, और इसकी अपनी typography styles थीं, इसलिए थोड़ा हाथ लगाना पड़ा.

teddy418 2025-02-11

मैं एक बात सुधारना चाहूँगा/चाहूँगी: दूसरा टूल, tui editor, Toss का नहीं बल्कि NHN Cloud द्वारा open source के रूप में विकसित किया जा रहा प्रोजेक्ट है।

vb6ko 2025-02-12

हाँ, सही कहा आपने, मैं सुधारता हूँ (मुझे नहीं पता एडिट कहाँ है.. )

moderator 2025-02-16

इसे nhncloud में संशोधित किया गया है।

carnoxen 2025-02-14

असल में इस साइट पर एडिट की सुविधा नहीं है। इसे केवल एडमिन ही बदल सकता है।

carnoxen 2025-02-10

यह यहाँ नहीं है, लेकिन मेरी इच्छा है कि WordPress Gutenberg एक स्वतंत्र लाइब्रेरी के रूप में जारी हो।

imjlk 2025-02-11

https://github.com/Automattic/isolated-block-editor
इसका ज़िक्र तो है, लेकिन मुख्य लेख में प्रस्तुत किए गए विकल्पों की तुलना में इसके उपयोग के मामले काफ़ी कम हैं।

carnoxen 2025-02-11

ओह! लगता है Automattic इसे किसी और नाम से आर्काइव कर रहा था। जब हमारी कंपनी WordPress इस्तेमाल करती थी, तब यह मेरी सबसे पसंदीदा सुविधाओं में से एक थी।

winterjung 2025-02-10

लिंक liveblocks.io ब्लॉग का है, लेकिन preview URL (github.com/US-Artificial-Intelligence) के रूप में दिख रहा है?

xguru 2025-02-10

पोस्ट करते समय मैंने पिछले लेख का पता जैसा का तैसा इस्तेमाल कर दिया था, और उसे संपादित करते समय समस्या हुई। मैंने उसे ठीक कर दिया है।

tsboard 2025-02-10

मैंने अपने पहले प्रोजेक्ट में tiptap को लागू करके इस्तेमाल किया था, और पारंपरिक editors की तुलना में इसकी documentation, features और implementation तीनों ही बहुत अच्छे लगे, इसलिए मैं इसे काफी संतोष के साथ इस्तेमाल कर रहा हूँ। सिर्फ ज़रूरी चीज़ें चुनकर अपनी पसंद के मुताबिक UI implement करके इस्तेमाल करने का मज़ा अच्छा था, लेकिन एक थोड़ा भारी पड़ने वाला हिस्सा यह था कि उसी पसंद के मुताबिक उसे implement करने का काम बिल्कुल मामूली नहीं था...!

babadudu 2026-03-30

TinyMCE अच्छा है