Framework editor rich text apa yang sebaiknya dipilih pada 2025?

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

Editor rich text (WYSIWYG) yang kini menjadi kebutuhan penting di aplikasi digunakan secara luas di layanan seperti Linear, Notion, dan Google Docs Liveblocks menganalisis berbagai editor populer selama setahun terakhir, lalu merangkum kelebihan dan kekurangan masing-masing Editor secara umum terbagi menjadi dua jenis: ‘tipe inti’ dan ‘battery-included’ Jika hanya membutuhkan satu editor sederhana, pilih opsi yang ringan; jika ingin membuat editor yang kompleks dengan banyak fitur kolaborasi, pertimbangkan yang memiliki skalabilitas tinggi Secara keseluruhan, pilihan paling aman adalah Tiptap, yang dinilai memiliki keseimbangan karena kaya fitur namun tidak terlalu opinionated Kolaborasi Kami (Liveblocks) berfokus pada fitur kolaborasi, dan kolaborasi real-time bisa diimplementasikan di sebagian besar editor melalui library CRDT bernama Yjs Saat menggunakan Yjs, diperlukan layanan backend yang akan menyimpan dokumen dan menjaga koneksi real-time tetap aktif Liveblocks menyediakan backend Yjs umum yang bisa digunakan di berbagai editor yang mendukung Yjs, serta solusi terintegrasi untuk Tiptap dan Lexical Beberapa editor juga menggunakan solusi berbasis OT (Operational Transform) milik sendiri atau layanan cloud closed-source Hal yang perlu diperhatikan sebelum memulai Editor yang pemeliharaannya sudah dihentikan seperti Draft.js, editor dengan komunitas kecil, atau editor bersumber privat (seperti Froala) dikecualikan Aksesibilitas (a11y) memerlukan sejumlah pekerjaan di sebagian besar editor, jadi perlu merujuk ke dokumentasi masing-masing editor Tiptap Editor yang berjalan di atas ProseMirror, dan meningkatkan pengalaman pengembangan dengan mengabstraksikan kompleksitas ProseMirror Sebagian besar tersedia dengan lisensi MIT, dan fitur kolaborasi real-time dapat langsung digunakan melalui Tiptap Cloud atau Liveblocks Meski fiturnya banyak, strukturnya dibuat agar bisa di-tree-shaking, sehingga ukuran bundle inti bisa tetap lebih kecil daripada Quill, Slate, dan Lexical Ekstensi Tiptap dirancang agar mudah menambahkan node, mark, command, dan fitur ekstensi sederhana Jika diperlukan, perilaku ekstensi yang sudah ada bisa di-override dan dikustomisasi sesuai kebutuhan Beberapa fitur ekstensi “pro” disediakan dalam bentuk berbayar Kustomisasi tingkat lanjut Mungkin perlu menangani struktur ProseMirror secara langsung Perlu sedikit waktu untuk membiasakan diri dengan abstraksi khas Tiptap seperti command chain Model datanya berbasis schema, dan meski sebagian besar dibuat otomatis, pada fitur lanjutan schema bisa saja perlu ditangani langsung Keterbatasan (Drawbacks) Harus bolak-balik merujuk ke dokumentasi ProseMirror dan Tiptap, sehingga panduannya bisa terasa membingungkan Hal terkait aksesibilitas (a11y) sangat bergantung pada implementor Jika status dokumen ditelusuri secara tidak perlu saat transaction, performa bisa menurun Perubahan sisi server Tiptap sendiri tidak memudahkan manipulasi dokumen di sisi server Perlu mempertimbangkan penggunaan ProseMirror secara langsung atau memodifikasi dokumen JSON secara langsung Liveblocks menyediakan library untuk mempermudah modifikasi dokumen ProseMirror Kolaborasi real-time Tiptap memiliki ekstensi yang menyediakan fitur kolaborasi real-time dengan Yjs Bisa diintegrasikan dengan berbagai solusi cloud seperti Tiptap Cloud dan Liveblocks Liveblocks Text Editor juga menyediakan berbagai fitur tambahan selain kolaborasi real-time, seperti tampilan kursor, komentar, mention, dan riwayat versi Kelebihan (Pros) Dukungan dokumentasi yang sangat baik Menyediakan fitur kolaborasi real-time yang unggul Independen dari framework dan menyediakan paket khusus React Skalabilitas tinggi Dapat terintegrasi dengan Liveblocks atau Tiptap Cloud Kekurangan (Cons) Performa bisa menurun jika tidak mengikuti pola penggunaan terbaik Perlu mempelajari struktur internal ProseMirror untuk mengembangkan fitur lanjutan Secara bawaan kurang mendukung editing headless di sisi server BlockNote BlockNote adalah editor berbasis blok yang memperluas Tiptap dan ProseMirror, serta menyediakan fitur bergaya Notion Sebagian besar dikembangkan dengan fokus pada React, sehingga komponen UI-nya sulit dimanfaatkan di framework lain Fitur yang dibutuhkan seperti menu slash dan floating toolbar sudah disertakan sehingga praktis untuk langsung digunakan Keterbatasan BlockNote sendiri open source, tetapi beberapa fitur seperti exporter docx dan PDF memerlukan langganan berbayar Kolaborasi real-time Mendukung fitur kolaborasi berbasis Yjs dan Liveblocks Integrasi resmi dengan Liveblocks akan segera disediakan Kelebihan Berbasis Tiptap dan ProseMirror yang stabilitasnya sudah terbukti Menyediakan fitur kolaborasi real-time dengan Yjs dan Liveblocks API editing berbasis blok dan komponen UI tersedia secara bawaan Kekurangan Terutama dirancang khusus untuk React Ukuran bundle lebih besar dibanding editor-editor dasar Lexical Editor yang didukung oleh Facebook (Meta) dan menarik banyak perhatian Setelah mengembangkan ekstensi seperti komentar, mention, riwayat versi, dan kolaborasi real-time selama beberapa bulan di Liveblocks, kesannya editor ini masih berada pada tahap awal Saat ini masih di versi di bawah 1.0, dan terus diperbarui dengan cepat Keterbatasan Tidak memiliki fitur “pure decorations”, sehingga untuk mengimplementasikan fitur seperti tampilan kursor, elemen DOM harus ditumpuk terpisah di atas editor Dukungan kolaborasi Yjs dasarnya masih rentan terhadap edge case Ada isu karena nama root node di-hardcode, sehingga sulit menggunakan beberapa editor sekaligus dalam satu dokumen Kolaborasi real-time Kecuali menggunakan paket Liveblocks, implementasi kolaborasi di Lexical memiliki tingkat kesulitan yang tinggi Pada contoh seperti StickyNotes, masalah ini diakali dengan membuat beberapa root node dan menggunakan dokumen serta koneksi socket terpisah untuk masing-masing Isu-isu ini terus diselesaikan berkat kecepatan pengembangan yang tinggi Ekstensi Lexical Lexical mengelola data melalui hierarki node Bisa membuat node sendiri dengan mewarisi 4 jenis node inti Kecepatan pengembangan dapat ditingkatkan melalui LexicalComposer khusus React dan paket @lexical/react Untuk menjalankan Lexical di backend tanpa DOM, bisa menggunakan paket @lexical/headless Perubahan sisi server Dokumen Lexical dapat dimodifikasi di server, dan Liveblocks menyediakan library yang menyederhanakan hal ini Kelebihan Mendukung fitur kolaborasi real-time dengan Yjs Independen dari framework dan menyediakan paket khusus React Dukungan Liveblocks yang terintegrasi dengan komentar, mention, dan riwayat versi Pengembangan yang sangat aktif serta komunitas besar dengan dukungan dari Meta Kekurangan Pada fitur kolaborasi real-time Yjs, bug kecil bisa muncul jika edge case tidak ditangani sendiri Fitur pure decorations masih kurang, dan fitur lanjutan memerlukan solusi sementara berbasis DOM Ukuran paket inti lebih besar dibanding Tiptap dan Slate Slate Framework editor yang dapat dikustomisasi dan digunakan di Discord, Grafana, Sanity.io, Slite, dan lainnya Liveblocks mengadopsi Slate sebagai default untuk composer komentar internalnya Struktur datanya sederhana, dapat dikendalikan sepenuhnya, dan bisa digunakan secara umum di luar React Ekstensi Slate Slate dapat diperluas melalui berbagai contoh dan dokumentasi Ekosistem pluginnya terbatas, tetapi tidak terlalu sulit untuk mengimplementasikan sendiri Ada proyek bernama Plate sebagai bentuk yang lebih dikembangkan Batasan Ukuran bundelnya sedikit lebih besar daripada Tiptap Fitur bawaan yang disediakan sedikit, sehingga ada bagian yang perlu diimplementasikan sendiri Kolaborasi real-time Kolaborasi real-time untuk dokumen Slate dapat diimplementasikan dengan slate-yjs, @liveblocks/yjs, dan lainnya Kelebihan Dukungan dokumentasi yang sangat baik Mendukung fitur kolaborasi real-time dengan Yjs Independen dari framework dan menyediakan paket khusus React Ekstensibilitas tinggi Kekurangan Ukuran bundel sedikit lebih besar dibanding Tiptap Fitur bawaan yang disediakan kurang Quill Editor yang pernah digunakan di Slack, LinkedIn, Figma, Zoom, Miro, Airtable, dan lainnya Pengembangannya sempat melambat, tetapi kembali aktif setelah merilis versi 2 pada April 2024 dengan penulisan ulang ke TypeScript dan pembaruan lainnya Menggunakan model dokumen khas bernama Parchment, sebuah konsep yang mirip dengan skema ProseMirror Batasan Tidak memiliki fitur dekorasi murni seperti Lexical, sehingga fitur seperti highlight warna atau kursor kolaborasi perlu dioverlay dengan elemen DOM terpisah Banyak plugin untuk Quill 2 yang masih belum diperbarui Aktivitas komunitasnya bisa sedikit lebih rendah dibanding editor lain Kolaborasi real-time Kolaborasi real-time dapat diimplementasikan dengan menggabungkan Yjs dan y-quill Backend terpisah dapat menggunakan berbagai pendekatan seperti Liveblocks Kelebihan Dukungan dokumentasi yang sangat baik Independen dari framework dan menyediakan paket khusus React Mendukung fitur kolaborasi real-time dengan Yjs Menggunakan format delta yang sederhana Kekurangan Fitur bawaan kurang dan plugin belum sepenuhnya diperbarui untuk Quill 2 Kurang dukungan fitur dekorasi murni Pengembangan relatif kurang aktif dan komunitas lebih kecil Ukuran bundel dua kali lebih besar dibanding Tiptap atau Slate ProseMirror Framework inti yang menjadi dasar bagi berbagai editor seperti Tiptap, Remirror, dan BlockNote Menjamin perilaku yang stabil dengan struktur yang jelas seperti schema, state, view, dan transform Jika membangun editor sepenuhnya dari awal hanya dengan library inti, jumlah kodenya cenderung menjadi banyak Batasan Dokumentasinya secara eksplisit menyebutkan bahwa bahkan untuk membuat editor sederhana pun dibutuhkan cukup banyak kode Disarankan memanfaatkan wrapper tingkat lebih tinggi seperti Tiptap, Remirror, atau BlockNote Kurva belajarnya agak tinggi, tetapi dokumentasi dan komunitasnya tertata dengan baik Kelebihan Menyediakan dokumentasi yang sangat baik dengan komunitas yang aktif Mendukung fitur kolaborasi real-time dengan Yjs Kekurangan Membutuhkan banyak kode untuk mengimplementasikan contoh dasar Fitur bawaan yang disediakan kurang Kurva pembelajaran relatif terjal Plate Proyek berbasis Slate yang menyediakan plugin kaya fitur seperti kemampuan AI, mention, komentar, dan lainnya, dengan pendekatan “batteries included” Fleksibel karena hanya fitur yang diperlukan saja yang bisa dipilih untuk digunakan Juga menyediakan template berbayar dan dirancang khusus untuk React Batasan Saat ini kolaborasi secara resmi hanya didukung oleh Hocuspocus, sehingga diperlukan implementasi tambahan untuk terhubung dengan backend Yjs lain (misalnya Liveblocks) Karena khusus React, kompatibilitasnya dengan framework lain bisa terbatas Karena fiturnya banyak, ukuran bundelnya cenderung membesar Kelebihan Menyediakan library plugin yang beragam Mendukung fitur editing di sisi server Menyediakan template untuk membantu memulai dengan cepat Kekurangan Dirancang khusus untuk React Fitur kolaborasi hanya bisa digunakan melalui Hocuspocus Ukuran bundelnya lebih besar dibanding editor-editor yang lebih dasar Remirror Editor berbasis ProseMirror yang mirip dengan Tiptap, tetapi mengarah pada pendekatan yang lebih batteries included Mendukung lebih dari 30 plugin, React hook, internasionalisasi (i18n), fitur aksesibilitas (a11y), dan lainnya Open source dengan lisensi MIT, serta juga menyediakan fitur kolaborasi Batasan Skala komunitasnya lebih kecil daripada Tiptap dan pembaruannya bisa lebih lambat Karena banyak fitur khusus React, ada kemungkinan keterbatasan di lingkungan lain Ukuran bundelnya cenderung agak besar Kolaborasi real-time Remirror mendukung kolaborasi Yjs dan Liveblocks melalui YjsExtension Kelebihan Dukungan dokumentasi yang sangat baik Menyediakan library plugin yang beragam Mendukung fitur kolaborasi dengan Yjs dan Liveblocks Kekurangan Dirancang khusus untuk React Ukuran bundel lebih besar Frekuensi pembaruan rendah dan komunitas kecil Editor.js Editor rich text yang mendukung pengeditan berbasis blok, dengan berbagai plugin dan komunitas besar Memiliki struktur data yang terdiri dari block, inline, dan tune Tidak bergantung pada framework dan memiliki berbagai fitur kemudahan bawaan seperti tooltip Batasan Tidak ada dukungan resmi untuk kolaborasi real-time, dan meskipun ada beberapa PR yang pernah dicoba, status pemeliharaannya tidak pasti Bahkan hanya dengan paket dasarnya, ukurannya sudah cukup besar Kolaborasi real-time Tidak didukung secara resmi Kelebihan Menyediakan library plugin yang kaya dengan berbagai fungsi Mendukung integrasi berbasis komunitas dengan berbagai CMS dan framework backend Kekurangan Ukuran bundel lebih besar Tidak memiliki fitur kolaborasi real-time CKEditor Editor dengan sejarah lebih dari 20 tahun, dan versi saat ini (5) menawarkan struktur modern serta fitur yang kaya Mendukung berbagai framework seperti Angular, React, Vue, dan Next Didistribusikan dengan lisensi GPL-2, yang dalam situasi tertentu mengharuskan open source, dan untuk penggunaan komersial perlu membeli lisensi terpisah Batasan Banyak plugin yang berbayar, dan fitur kolaborasi juga hanya dapat digunakan melalui layanan cloud CKEditor Lisensi GPL-2 dan skema penagihan berbasis load dapat menjadi hambatan bagi banyak pengguna Kolaborasi real-time Tidak ada solusi kolaborasi lain yang disediakan selain layanan cloud proprietari CKEditor Kelebihan Secara default menyediakan fitur yang sangat kaya Kompatibel dengan berbagai framework Kekurangan Fitur kolaborasi bergantung pada layanan cloud CKEditor Lisensi GPL-2 dapat menjadi batasan bagi sebagian pengguna Beberapa fitur disediakan dengan skema biaya berbasis penggunaan TinyMCE Seperti CKEditor, ini adalah editor dengan sejarah lebih dari 20 tahun dan mengikuti lisensi GPL-2 Dapat digunakan di berbagai lingkungan seperti Angular, React, dan Vue Tersedia layanan kolaborasi cloud dengan skema biaya berbasis jumlah load Batasan Fitur utama seperti Markdown, mention, komentar, dan tipografi lanjutan disediakan sebagai plugin berbayar Dokumentasi tentang cara memanipulasi dokumen di sisi server masih kurang Kolaborasi real-time Selain solusi kolaborasi proprietari TinyMCE, tidak ada pendekatan lain yang dipublikasikan Kelebihan Secara default menyediakan fitur yang sangat kaya Kompatibel dengan berbagai framework Kekurangan Fitur kolaborasi bergantung pada layanan Tiny Cloud Lisensi GPL-2 dapat menjadi batasan bagi sebagian pengguna Beberapa fitur disediakan dengan skema biaya berbasis penggunaan Ringkasan perbandingan editor ProseMirror Framework: Vanilla Collaboration: Yjs Comments: Tidak disediakan (ada contoh) Mentions: Dapat menggunakan plugin Suggestion Server-side editing: Dokumen dapat diedit di Node.js dengan prosemirror-state dan prosemirror-model License: MIT GitHub Stars: ⭐ 7.8k Tiptap Framework: Vanilla, React, Vue, Svelte Collaboration: Liveblocks, Tiptap Cloud, Yjs Comments: Dapat digunakan tanpa konfigurasi melalui integrasi dengan Liveblocks, dapat dikustomisasi Mentions: Dapat digunakan tanpa konfigurasi melalui integrasi dengan Liveblocks, dapat dikustomisasi Server-side editing: Tersedia melalui ProseMirror atau paket Node.js ProseMirror milik Liveblocks License: MIT GitHub Stars: ⭐ 20k Remirror Framework: React Collaboration: Yjs Comments: Tersedia Mentions: Tersedia Server-side editing: Tersedia melalui ProseMirror atau paket Node.js ProseMirror milik Liveblocks License: MIT GitHub Stars: ⭐ 2.8k BlockNote Framework: React Collaboration: Yjs Comments: Tersedia melalui Liveblocks atau contoh kustom Mentions: Tersedia Server-side editing: Tersedia melalui ProseMirror atau paket Node.js ProseMirror milik Liveblocks License: MPL 2 GitHub Stars: ⭐ 7.1k Lexical Framework: Vanilla, React, iOS, dan lainnya Collaboration: Liveblocks, Yjs Comments: Dapat digunakan tanpa konfigurasi dengan integrasi Liveblocks, dapat dikustomisasi Mentions: Dapat digunakan tanpa konfigurasi dengan integrasi Liveblocks, dapat dikustomisasi Server-side editing: Tersedia melalui Lexical atau paket Node.js Lexical milik Liveblocks License: MIT GitHub Stars: ⭐ 20k Slate Framework: Vanilla, React Collaboration: Yjs Comments: Tidak disediakan (ada contoh) Mentions: Ada contoh Server-side editing: Tidak disediakan License: MIT GitHub Stars: ⭐ 30k Plate Framework: Khusus React Collaboration: Hocuspocus (Yjs) Comments: Tersedia Mentions: Tersedia Server-side editing: Tersedia License: MIT GitHub Stars: ⭐ 13k Quill Framework: Vanilla Collaboration: Yjs Comments: Tidak disediakan (ada contoh) Mentions: Dapat menggunakan library pihak ketiga Server-side editing: Tidak disediakan License: BSD-3 GitHub Stars: ⭐ 45k Editor.js Framework: Vanilla Collaboration: Tidak didukung (ada contoh pihak ketiga) Comments: Tidak disediakan (ada library pihak ketiga) Mentions: Tidak disediakan (ada contoh) Server-side editing: Tidak disediakan License: Apache 2 GitHub Stars: ⭐ 28k CKEditor Framework: Vanilla, React, Vue, Angular Collaboration: Terintegrasi dengan CKEditor Cloud Comments: Tersedia Mentions: Tersedia Server-side editing: Tersedia License: GPL-2+ GitHub Stars: ⭐ 8.8k TinyMCE Framework: Vanilla, React, Vue, Angular, dan lainnya Collaboration: Terintegrasi dengan Tiny Cloud Comments: Terintegrasi dengan Tiny Cloud Mentions: Tersedia Server-side editing: Tidak disediakan License: GPL-2+ GitHub Stars: ⭐ 15k

(liveblocks.io)

65 poin oleh xguru 2025-02-10 | 14 komentar | Bagikan ke WhatsApp

Editor rich text (WYSIWYG) yang kini menjadi kebutuhan penting di aplikasi digunakan secara luas di layanan seperti Linear, Notion, dan Google Docs
Liveblocks menganalisis berbagai editor populer selama setahun terakhir, lalu merangkum kelebihan dan kekurangan masing-masing
Editor secara umum terbagi menjadi dua jenis: ‘tipe inti’ dan ‘battery-included’
Jika hanya membutuhkan satu editor sederhana, pilih opsi yang ringan; jika ingin membuat editor yang kompleks dengan banyak fitur kolaborasi, pertimbangkan yang memiliki skalabilitas tinggi
Secara keseluruhan, pilihan paling aman adalah Tiptap, yang dinilai memiliki keseimbangan karena kaya fitur namun tidak terlalu opinionated
Kolaborasi
- Kami (Liveblocks) berfokus pada fitur kolaborasi, dan kolaborasi real-time bisa diimplementasikan di sebagian besar editor melalui library CRDT bernama Yjs
- Saat menggunakan Yjs, diperlukan layanan backend yang akan menyimpan dokumen dan menjaga koneksi real-time tetap aktif
- Liveblocks menyediakan backend Yjs umum yang bisa digunakan di berbagai editor yang mendukung Yjs, serta solusi terintegrasi untuk Tiptap dan Lexical
- Beberapa editor juga menggunakan solusi berbasis OT (Operational Transform) milik sendiri atau layanan cloud closed-source
Hal yang perlu diperhatikan sebelum memulai
- Editor yang pemeliharaannya sudah dihentikan seperti Draft.js, editor dengan komunitas kecil, atau editor bersumber privat (seperti Froala) dikecualikan
- Aksesibilitas (a11y) memerlukan sejumlah pekerjaan di sebagian besar editor, jadi perlu merujuk ke dokumentasi masing-masing editor

Tiptap

Editor yang berjalan di atas ProseMirror, dan meningkatkan pengalaman pengembangan dengan mengabstraksikan kompleksitas ProseMirror
Sebagian besar tersedia dengan lisensi MIT, dan fitur kolaborasi real-time dapat langsung digunakan melalui Tiptap Cloud atau Liveblocks
Meski fiturnya banyak, strukturnya dibuat agar bisa di-tree-shaking, sehingga ukuran bundle inti bisa tetap lebih kecil daripada Quill, Slate, dan Lexical
Ekstensi
- Tiptap dirancang agar mudah menambahkan node, mark, command, dan fitur ekstensi sederhana
- Jika diperlukan, perilaku ekstensi yang sudah ada bisa di-override dan dikustomisasi sesuai kebutuhan
- Beberapa fitur ekstensi “pro” disediakan dalam bentuk berbayar
Kustomisasi tingkat lanjut
- Mungkin perlu menangani struktur ProseMirror secara langsung
- Perlu sedikit waktu untuk membiasakan diri dengan abstraksi khas Tiptap seperti command chain
- Model datanya berbasis schema, dan meski sebagian besar dibuat otomatis, pada fitur lanjutan schema bisa saja perlu ditangani langsung
Keterbatasan (Drawbacks)
- Harus bolak-balik merujuk ke dokumentasi ProseMirror dan Tiptap, sehingga panduannya bisa terasa membingungkan
- Hal terkait aksesibilitas (a11y) sangat bergantung pada implementor
- Jika status dokumen ditelusuri secara tidak perlu saat transaction, performa bisa menurun
Perubahan sisi server
- Tiptap sendiri tidak memudahkan manipulasi dokumen di sisi server
- Perlu mempertimbangkan penggunaan ProseMirror secara langsung atau memodifikasi dokumen JSON secara langsung
- Liveblocks menyediakan library untuk mempermudah modifikasi dokumen ProseMirror
Kolaborasi real-time
- Tiptap memiliki ekstensi yang menyediakan fitur kolaborasi real-time dengan Yjs
- Bisa diintegrasikan dengan berbagai solusi cloud seperti Tiptap Cloud dan Liveblocks
- Liveblocks Text Editor juga menyediakan berbagai fitur tambahan selain kolaborasi real-time, seperti tampilan kursor, komentar, mention, dan riwayat versi
Kelebihan (Pros)
- Dukungan dokumentasi yang sangat baik
- Menyediakan fitur kolaborasi real-time yang unggul
- Independen dari framework dan menyediakan paket khusus React
- Skalabilitas tinggi
- Dapat terintegrasi dengan Liveblocks atau Tiptap Cloud
Kekurangan (Cons)
- Performa bisa menurun jika tidak mengikuti pola penggunaan terbaik
- Perlu mempelajari struktur internal ProseMirror untuk mengembangkan fitur lanjutan
- Secara bawaan kurang mendukung editing headless di sisi server

BlockNote

BlockNote adalah editor berbasis blok yang memperluas Tiptap dan ProseMirror, serta menyediakan fitur bergaya Notion
Sebagian besar dikembangkan dengan fokus pada React, sehingga komponen UI-nya sulit dimanfaatkan di framework lain
Fitur yang dibutuhkan seperti menu slash dan floating toolbar sudah disertakan sehingga praktis untuk langsung digunakan
Keterbatasan
- BlockNote sendiri open source, tetapi beberapa fitur seperti exporter docx dan PDF memerlukan langganan berbayar
Kolaborasi real-time
- Mendukung fitur kolaborasi berbasis Yjs dan Liveblocks
- Integrasi resmi dengan Liveblocks akan segera disediakan
Kelebihan
- Berbasis Tiptap dan ProseMirror yang stabilitasnya sudah terbukti
- Menyediakan fitur kolaborasi real-time dengan Yjs dan Liveblocks
- API editing berbasis blok dan komponen UI tersedia secara bawaan
Kekurangan
- Terutama dirancang khusus untuk React
- Ukuran bundle lebih besar dibanding editor-editor dasar

Lexical

Editor yang didukung oleh Facebook (Meta) dan menarik banyak perhatian
Setelah mengembangkan ekstensi seperti komentar, mention, riwayat versi, dan kolaborasi real-time selama beberapa bulan di Liveblocks, kesannya editor ini masih berada pada tahap awal
Saat ini masih di versi di bawah 1.0, dan terus diperbarui dengan cepat
Keterbatasan
- Tidak memiliki fitur “pure decorations”, sehingga untuk mengimplementasikan fitur seperti tampilan kursor, elemen DOM harus ditumpuk terpisah di atas editor
- Dukungan kolaborasi Yjs dasarnya masih rentan terhadap edge case
- Ada isu karena nama root node di-hardcode, sehingga sulit menggunakan beberapa editor sekaligus dalam satu dokumen
Kolaborasi real-time
- Kecuali menggunakan paket Liveblocks, implementasi kolaborasi di Lexical memiliki tingkat kesulitan yang tinggi
- Pada contoh seperti StickyNotes, masalah ini diakali dengan membuat beberapa root node dan menggunakan dokumen serta koneksi socket terpisah untuk masing-masing
- Isu-isu ini terus diselesaikan berkat kecepatan pengembangan yang tinggi
Ekstensi Lexical
- Lexical mengelola data melalui hierarki node
- Bisa membuat node sendiri dengan mewarisi 4 jenis node inti
- Kecepatan pengembangan dapat ditingkatkan melalui LexicalComposer khusus React dan paket @lexical/react
- Untuk menjalankan Lexical di backend tanpa DOM, bisa menggunakan paket @lexical/headless
Perubahan sisi server
- Dokumen Lexical dapat dimodifikasi di server, dan Liveblocks menyediakan library yang menyederhanakan hal ini
Kelebihan
- Mendukung fitur kolaborasi real-time dengan Yjs
- Independen dari framework dan menyediakan paket khusus React
- Dukungan Liveblocks yang terintegrasi dengan komentar, mention, dan riwayat versi
- Pengembangan yang sangat aktif serta komunitas besar dengan dukungan dari Meta
Kekurangan
- Pada fitur kolaborasi real-time Yjs, bug kecil bisa muncul jika edge case tidak ditangani sendiri
- Fitur pure decorations masih kurang, dan fitur lanjutan memerlukan solusi sementara berbasis DOM
- Ukuran paket inti lebih besar dibanding Tiptap dan Slate

Slate

Framework editor yang dapat dikustomisasi dan digunakan di Discord, Grafana, Sanity.io, Slite, dan lainnya
Liveblocks mengadopsi Slate sebagai default untuk composer komentar internalnya
Struktur datanya sederhana, dapat dikendalikan sepenuhnya, dan bisa digunakan secara umum di luar React
Ekstensi Slate
- Slate dapat diperluas melalui berbagai contoh dan dokumentasi
- Ekosistem pluginnya terbatas, tetapi tidak terlalu sulit untuk mengimplementasikan sendiri
- Ada proyek bernama Plate sebagai bentuk yang lebih dikembangkan
Batasan
- Ukuran bundelnya sedikit lebih besar daripada Tiptap
- Fitur bawaan yang disediakan sedikit, sehingga ada bagian yang perlu diimplementasikan sendiri
Kolaborasi real-time
- Kolaborasi real-time untuk dokumen Slate dapat diimplementasikan dengan slate-yjs, @liveblocks/yjs, dan lainnya
Kelebihan
- Dukungan dokumentasi yang sangat baik
- Mendukung fitur kolaborasi real-time dengan Yjs
- Independen dari framework dan menyediakan paket khusus React
- Ekstensibilitas tinggi
Kekurangan
- Ukuran bundel sedikit lebih besar dibanding Tiptap
- Fitur bawaan yang disediakan kurang

Quill

Editor yang pernah digunakan di Slack, LinkedIn, Figma, Zoom, Miro, Airtable, dan lainnya
Pengembangannya sempat melambat, tetapi kembali aktif setelah merilis versi 2 pada April 2024 dengan penulisan ulang ke TypeScript dan pembaruan lainnya
Menggunakan model dokumen khas bernama Parchment, sebuah konsep yang mirip dengan skema ProseMirror
Batasan
- Tidak memiliki fitur dekorasi murni seperti Lexical, sehingga fitur seperti highlight warna atau kursor kolaborasi perlu dioverlay dengan elemen DOM terpisah
- Banyak plugin untuk Quill 2 yang masih belum diperbarui
- Aktivitas komunitasnya bisa sedikit lebih rendah dibanding editor lain
Kolaborasi real-time
- Kolaborasi real-time dapat diimplementasikan dengan menggabungkan Yjs dan y-quill
- Backend terpisah dapat menggunakan berbagai pendekatan seperti Liveblocks
Kelebihan
- Dukungan dokumentasi yang sangat baik
- Independen dari framework dan menyediakan paket khusus React
- Mendukung fitur kolaborasi real-time dengan Yjs
- Menggunakan format delta yang sederhana
Kekurangan
- Fitur bawaan kurang dan plugin belum sepenuhnya diperbarui untuk Quill 2
- Kurang dukungan fitur dekorasi murni
- Pengembangan relatif kurang aktif dan komunitas lebih kecil
- Ukuran bundel dua kali lebih besar dibanding Tiptap atau Slate

ProseMirror

Framework inti yang menjadi dasar bagi berbagai editor seperti Tiptap, Remirror, dan BlockNote
Menjamin perilaku yang stabil dengan struktur yang jelas seperti schema, state, view, dan transform
Jika membangun editor sepenuhnya dari awal hanya dengan library inti, jumlah kodenya cenderung menjadi banyak
Batasan
- Dokumentasinya secara eksplisit menyebutkan bahwa bahkan untuk membuat editor sederhana pun dibutuhkan cukup banyak kode
- Disarankan memanfaatkan wrapper tingkat lebih tinggi seperti Tiptap, Remirror, atau BlockNote
- Kurva belajarnya agak tinggi, tetapi dokumentasi dan komunitasnya tertata dengan baik
Kelebihan
- Menyediakan dokumentasi yang sangat baik dengan komunitas yang aktif
- Mendukung fitur kolaborasi real-time dengan Yjs
Kekurangan
- Membutuhkan banyak kode untuk mengimplementasikan contoh dasar
- Fitur bawaan yang disediakan kurang
- Kurva pembelajaran relatif terjal

Plate

Proyek berbasis Slate yang menyediakan plugin kaya fitur seperti kemampuan AI, mention, komentar, dan lainnya, dengan pendekatan “batteries included”
Fleksibel karena hanya fitur yang diperlukan saja yang bisa dipilih untuk digunakan
Juga menyediakan template berbayar dan dirancang khusus untuk React
Batasan
- Saat ini kolaborasi secara resmi hanya didukung oleh Hocuspocus, sehingga diperlukan implementasi tambahan untuk terhubung dengan backend Yjs lain (misalnya Liveblocks)
- Karena khusus React, kompatibilitasnya dengan framework lain bisa terbatas
- Karena fiturnya banyak, ukuran bundelnya cenderung membesar
Kelebihan
- Menyediakan library plugin yang beragam
- Mendukung fitur editing di sisi server
- Menyediakan template untuk membantu memulai dengan cepat
Kekurangan
- Dirancang khusus untuk React
- Fitur kolaborasi hanya bisa digunakan melalui Hocuspocus
- Ukuran bundelnya lebih besar dibanding editor-editor yang lebih dasar

Remirror

Editor berbasis ProseMirror yang mirip dengan Tiptap, tetapi mengarah pada pendekatan yang lebih batteries included
Mendukung lebih dari 30 plugin, React hook, internasionalisasi (i18n), fitur aksesibilitas (a11y), dan lainnya
Open source dengan lisensi MIT, serta juga menyediakan fitur kolaborasi
Batasan
- Skala komunitasnya lebih kecil daripada Tiptap dan pembaruannya bisa lebih lambat
- Karena banyak fitur khusus React, ada kemungkinan keterbatasan di lingkungan lain
- Ukuran bundelnya cenderung agak besar
Kolaborasi real-time
- Remirror mendukung kolaborasi Yjs dan Liveblocks melalui YjsExtension
Kelebihan
- Dukungan dokumentasi yang sangat baik
- Menyediakan library plugin yang beragam
- Mendukung fitur kolaborasi dengan Yjs dan Liveblocks
Kekurangan
- Dirancang khusus untuk React
- Ukuran bundel lebih besar
- Frekuensi pembaruan rendah dan komunitas kecil

Editor.js

Editor rich text yang mendukung pengeditan berbasis blok, dengan berbagai plugin dan komunitas besar
Memiliki struktur data yang terdiri dari block, inline, dan tune
Tidak bergantung pada framework dan memiliki berbagai fitur kemudahan bawaan seperti tooltip
Batasan
- Tidak ada dukungan resmi untuk kolaborasi real-time, dan meskipun ada beberapa PR yang pernah dicoba, status pemeliharaannya tidak pasti
- Bahkan hanya dengan paket dasarnya, ukurannya sudah cukup besar
Kolaborasi real-time
- Tidak didukung secara resmi
Kelebihan
- Menyediakan library plugin yang kaya dengan berbagai fungsi
- Mendukung integrasi berbasis komunitas dengan berbagai CMS dan framework backend
Kekurangan
- Ukuran bundel lebih besar
- Tidak memiliki fitur kolaborasi real-time

CKEditor

Editor dengan sejarah lebih dari 20 tahun, dan versi saat ini (5) menawarkan struktur modern serta fitur yang kaya
Mendukung berbagai framework seperti Angular, React, Vue, dan Next
Didistribusikan dengan lisensi GPL-2, yang dalam situasi tertentu mengharuskan open source, dan untuk penggunaan komersial perlu membeli lisensi terpisah
Batasan
- Banyak plugin yang berbayar, dan fitur kolaborasi juga hanya dapat digunakan melalui layanan cloud CKEditor
- Lisensi GPL-2 dan skema penagihan berbasis load dapat menjadi hambatan bagi banyak pengguna
Kolaborasi real-time
- Tidak ada solusi kolaborasi lain yang disediakan selain layanan cloud proprietari CKEditor
Kelebihan
- Secara default menyediakan fitur yang sangat kaya
- Kompatibel dengan berbagai framework
Kekurangan
- Fitur kolaborasi bergantung pada layanan cloud CKEditor
- Lisensi GPL-2 dapat menjadi batasan bagi sebagian pengguna
- Beberapa fitur disediakan dengan skema biaya berbasis penggunaan

TinyMCE

Seperti CKEditor, ini adalah editor dengan sejarah lebih dari 20 tahun dan mengikuti lisensi GPL-2
Dapat digunakan di berbagai lingkungan seperti Angular, React, dan Vue
Tersedia layanan kolaborasi cloud dengan skema biaya berbasis jumlah load
Batasan
- Fitur utama seperti Markdown, mention, komentar, dan tipografi lanjutan disediakan sebagai plugin berbayar
- Dokumentasi tentang cara memanipulasi dokumen di sisi server masih kurang
Kolaborasi real-time
- Selain solusi kolaborasi proprietari TinyMCE, tidak ada pendekatan lain yang dipublikasikan
Kelebihan
- Secara default menyediakan fitur yang sangat kaya
- Kompatibel dengan berbagai framework
Kekurangan
- Fitur kolaborasi bergantung pada layanan Tiny Cloud
- Lisensi GPL-2 dapat menjadi batasan bagi sebagian pengguna
- Beberapa fitur disediakan dengan skema biaya berbasis penggunaan

Ringkasan perbandingan editor

ProseMirror
- Framework: Vanilla
- Collaboration: Yjs
- Comments: Tidak disediakan (ada contoh)
- Mentions: Dapat menggunakan plugin Suggestion
- Server-side editing: Dokumen dapat diedit di Node.js dengan prosemirror-state dan prosemirror-model
- License: MIT
- GitHub Stars: ⭐ 7.8k
Tiptap
- Framework: Vanilla, React, Vue, Svelte
- Collaboration: Liveblocks, Tiptap Cloud, Yjs
- Comments: Dapat digunakan tanpa konfigurasi melalui integrasi dengan Liveblocks, dapat dikustomisasi
- Mentions: Dapat digunakan tanpa konfigurasi melalui integrasi dengan Liveblocks, dapat dikustomisasi
- Server-side editing: Tersedia melalui ProseMirror atau paket Node.js ProseMirror milik Liveblocks
- License: MIT
- GitHub Stars: ⭐ 20k
Remirror
- Framework: React
- Collaboration: Yjs
- Comments: Tersedia
- Mentions: Tersedia
- Server-side editing: Tersedia melalui ProseMirror atau paket Node.js ProseMirror milik Liveblocks
- License: MIT
- GitHub Stars: ⭐ 2.8k
BlockNote
- Framework: React
- Collaboration: Yjs
- Comments: Tersedia melalui Liveblocks atau contoh kustom
- Mentions: Tersedia
- Server-side editing: Tersedia melalui ProseMirror atau paket Node.js ProseMirror milik Liveblocks
- License: MPL 2
- GitHub Stars: ⭐ 7.1k
Lexical
- Framework: Vanilla, React, iOS, dan lainnya
- Collaboration: Liveblocks, Yjs
- Comments: Dapat digunakan tanpa konfigurasi dengan integrasi Liveblocks, dapat dikustomisasi
- Mentions: Dapat digunakan tanpa konfigurasi dengan integrasi Liveblocks, dapat dikustomisasi
- Server-side editing: Tersedia melalui Lexical atau paket Node.js Lexical milik Liveblocks
- License: MIT
- GitHub Stars: ⭐ 20k
Slate
- Framework: Vanilla, React
- Collaboration: Yjs
- Comments: Tidak disediakan (ada contoh)
- Mentions: Ada contoh
- Server-side editing: Tidak disediakan
- License: MIT
- GitHub Stars: ⭐ 30k
Plate
- Framework: Khusus React
- Collaboration: Hocuspocus (Yjs)
- Comments: Tersedia
- Mentions: Tersedia
- Server-side editing: Tersedia
- License: MIT
- GitHub Stars: ⭐ 13k
Quill
- Framework: Vanilla
- Collaboration: Yjs
- Comments: Tidak disediakan (ada contoh)
- Mentions: Dapat menggunakan library pihak ketiga
- Server-side editing: Tidak disediakan
- License: BSD-3
- GitHub Stars: ⭐ 45k
Editor.js
- Framework: Vanilla
- Collaboration: Tidak didukung (ada contoh pihak ketiga)
- Comments: Tidak disediakan (ada library pihak ketiga)
- Mentions: Tidak disediakan (ada contoh)
- Server-side editing: Tidak disediakan
- License: Apache 2
- GitHub Stars: ⭐ 28k
CKEditor
- Framework: Vanilla, React, Vue, Angular
- Collaboration: Terintegrasi dengan CKEditor Cloud
- Comments: Tersedia
- Mentions: Tersedia
- Server-side editing: Tersedia
- License: GPL-2+
- GitHub Stars: ⭐ 8.8k
TinyMCE
- Framework: Vanilla, React, Vue, Angular, dan lainnya
- Collaboration: Terintegrasi dengan Tiny Cloud
- Comments: Terintegrasi dengan Tiny Cloud
- Mentions: Tersedia
- Server-side editing: Tidak disediakan
- License: GPL-2+
- GitHub Stars: ⭐ 15k

14 komentar

bingo992000 2025-03-15

Menerapkan QuillJS pada proyek SvelteKit cukup merepotkan. Di React setidaknya lebih mudah karena ada library.

firea32 2025-02-17

Menurut saya, tiptap adalah yang terbaik karena paling nyaman untuk mengembangkan custom component React.

vb6ko 2025-02-11

Saya juga sempat mencari-cari belakangan ini, terima kasih sudah merangkumnya dengan rapi.

Untuk bahasa Korea, beberapa editor tertentu punya bug kecil pada input di mobile.
Saat memasukkan <동해물과>, bisa tertulis sebagai <ㄷㅗㅇㅎㅐㅁㅜㄹㄱㅗㅏ>
atau saat memasukkan <동해물과>, bisa menjadi <동동해해물물과과>.
(Referensi: https://github.com/ckeditor/ckeditor5/issues/13693)

Saya tidak memakai framework seperti React atau Vue, dan juga agak enggan membeli lisensi editor, jadi pilihan saya sangat terbatas.

Karena itu, selain yang dibahas di artikel, saya juga melihat 4 opsi berikut.

https://trix-editor.org/
Ini editor buatan 37signals yang dipimpin DHH dari Ruby on Rails. Dibuat dengan JavaScript murni (artinya tidak memakai React dan sejenisnya), dan juga tidak terlalu sulit untuk dikustomisasi. (Misalnya, saat menempelkan tautan YouTube bisa otomatis berubah menjadi embed YouTube.)

https://ui.toast.com/tui-editor
Ini adalah tool buatan NHN Cloud.

https://naver.github.io/smarteditor2/demo/
Ini Naver SmartEditor 2. Memang klasik, tapi untuk layanan yang menyasar pengguna Korea rasanya bisa jadi sesuatu yang akrab dan disukai.

https://summernote.org/
Ini Summernote yang dikembangkan oleh orang Korea. Saya memilih yang ini. Kalau diterapkan tema, tampilannya jadi lebih modern. Fitur-fitur yang biasanya dipikirkan orang Korea juga sudah built-in, jadi nyaman dipakai. (Seperti konversi tautan YouTube menjadi embed tadi.) Namun, saat saya mencoba menatanya dengan tailwind prose, ada style typography bawaannya sendiri, jadi perlu sedikit penyesuaian.

teddy418 2025-02-11

Ada satu hal yang ingin saya koreksi terkait alat nomor 2: tui editor bukan proyek open source yang dikembangkan oleh Toss, melainkan oleh NHN Cloud.

vb6ko 2025-02-12

Benar juga, saya koreksi ya (saya tidak tahu di mana tempat untuk mengeditnya..).

moderator 2025-02-16

Sudah diubah menjadi nhncloud.

carnoxen 2025-02-14

Awalnya tidak ada fitur penyuntingan di situs ini. Satu-satunya cara adalah admin yang mengeditnya.

carnoxen 2025-02-10

Tidak ada di sini, tetapi saya berharap WordPress Gutenberg dirilis sebagai library yang berdiri sendiri.

imjlk 2025-02-11

https://github.com/Automattic/isolated-block-editor
Memang ada tercantum, tetapi dibandingkan dengan yang diperkenalkan di artikel utama, contoh penggunaan nyatanya jauh lebih sedikit.

carnoxen 2025-02-11

Oh! Ternyata itu disimpan oleh Automattic dengan nama lain. Itu adalah fitur yang paling saya sukai saat perusahaan menggunakan WordPress.

winterjung 2025-02-10

Tautannya ke blog liveblocks.io, tapi URL pratinjaunya muncul sebagai (github.com/US-Artificial-Intelligence)?

xguru 2025-02-10

Saat saya memposting tulisan, ada masalah karena alamat tulisan sebelumnya tetap digunakan apa adanya saat diedit. Sudah saya perbaiki.

tsboard 2025-02-10

Saya pertama kali menerapkan dan memakai tiptap di sebuah proyek, dan dibanding editor-editor tradisional lain, dokumentasi, fitur, dan implementasinya semuanya bagus, jadi saya memakainya dengan puas. Rasanya menyenangkan bisa mengambil hanya yang dibutuhkan lalu membuat dan memakai UI sesuai selera saya, tetapi ada satu bagian yang cukup berat: jumlah pekerjaan untuk mengimplementasikannya sesuai selera itu benar-benar tidak sedikit...!

babadudu 2026-03-30

TinyMce bagus