Turns Out I Needed to Build KuroEditor Too (Cries) Vol. 1
product Technology OSS

Turns Out I Needed to Build KuroEditor Too (Cries) Vol. 1

While developing a headless CMS that allows easy design without a PC, I realized something: there are no suitable editors for KuroCMS lol.

Wait, There Is No Editor?!

About halfway through developing KuroCMS, Kuroto suddenly recalled the immense effort and time spent setting up a decent editor in Strapi, and froze. Had my hair turned white, I might have become a panda rabbit.

Though those editors didn't work for Strapi, I started researching in the hope of finding an editor that met my requirements elsewhere... but I couldn't find one. No way, please tell me it's not true, Chappy! (ChatGPT)


Searching Exclusively Under the MIT License

Since I planned to package and distribute it with KuroCMS, having an MIT-licensed editor was obviously the most convenient option.

Upon researching, it seems the current trend for web editors is completely dominated by headless options—where you borrow only the logic and build the UI yourself. Just like headless CMSs.


World's Top 5 Rated Editors


【TipTap】

  1. Reportedly the undisputed number one. Extremely flexible, supports React/Vue, and outputs HTML / JSON.
  2. A headless editor. You can completely match button designs and toolbar layouts to your app's UI. It is built on the powerful ProseMirror engine.
  3. User base: Over 37k GitHub Stars, and over 8 million weekly downloads. Practically the global standard.
  4. How to integrate: Install via `npm install @tiptap/react` and control it using the `useEditor` hook.


【Editor.js】

  1. Enthusiastic fan base, reportedly intuitive with a Notion-like feel, plugin-based, outputs JSON (structured data).
  2. Features: Treats everything as a block (paragraphs, images, headings). Similar operation feel to Notion.
  3. Outputs clean JSON instead of HTML, making it ideal for displaying the same data across web, mobile apps, smartwatches, etc.
  4. How to integrate: Load the core package and individual tools (Image, Header, etc.) separately, then initialize with `new EditorJS()`.


【Lexical】

  1. Rapidly growing, fast, lightweight, robust, made by Meta, design-focused, outputs HTML / JSON.
  2. Specializes in performance and accessibility. Extremely lightweight, keeping even large-scale apps fast.
  3. User base: Rapidly increasing. Works well with AI-generated content and is frequently adopted for AI editors.
  4. Features: Offers advanced state management and a tree-based data model. Fully WCAG (accessibility standards) compliant.
  5. How to integrate: Integrate as a React plugin. Define named "nodes" to build the editor.


【Slate】 (The most powerful framework exclusive to React)

  1. Designed for developers, ultimate customization, React-only, outputs JSON (arbitrary).
  2. Features: Rather than an editor, it is a library for building editors. You can fully define your own document model.
  3. User base: Strong support within the React community (over 31k GitHub Stars).
  4. Features: Strong at handling documents with complex nested structures (e.g. lists inside tables, images inside lists).
  5. How to integrate: Build using a component-oriented approach. Write custom functions like `renderElement` to control rendering.


【Milkdown】 (WYSIWYG specialized for Markdown)

  1. Strong in specific use cases | Combines Markdown with visual operation | Low to medium difficulty | Outputs Markdown / HTML
  2. Features: Provides a Typora-like experience where Markdown is formatted in real-time as you write.
  3. User base: Specialized for developers and technical documentation.
  4. Features: Powerful Markdown extensions via plugins. Supports mathematical symbols (LaTeX) and diagrams (Mermaid).
  5. How to integrate: Built with TypeScript; initialize by passing required plugins in an array.


So, What About These Five?

I tried using TipTap and Lexical as editors for Strapi, but they didn't work out at all... Lexical didn't handle images properly, and TipTap had issues too. None of them came close to the WYSIWYG (meaning you can edit in the editor exactly as it will appear in the final output) that Kuroto wanted. Editor.js was basically the same; a JSON-only editor can't deliver true WYSIWYG. They might be fine if you are just typing text and code continuously. As for Milkdown, it doesn't even mention images—you might as well just use LaTeX. And honestly, Kuroto really dislikes React. Apologies to Meta (sweat). At most, I might use Vue if a framework is necessary, but I'm all about Astro! Come to think of it, there used to be a manga called Astro Kyudan.

Ultimately, I recalled that Quill + better-table, which I used in Strapi, was the best option. However, I just couldn't accept the table implementation lol. That's when the little devil in my mind said: "If you're going to complain that much, build it yourself!" Indeed, you are right. My apologies.


And So, KuroEditor Development Began

I didn't need a high-performance editor. I just wanted WYSIWYG and a table tool that could be used without stress, similar to Dropbox Paper! Fueled by this inner cry, I decided to build it myself. I will share the details of the editor Kuroto made in the next article. It is mostly complete, and once I finish testing it while writing these articles and organize the repository for GitHub, I will publish it.