@tiptap/core vs. lexical

Tiptap Core is designed as a headless, unopinionated rich text editor framework, built upon Prosemirror. Its primary audience consists of developers who need a highly customizable editor foundation and are comfortable building their own UI components or integrating with existing UI libraries. Tiptap focuses on providing a robust core logic and a flexible extension system, allowing complete control over the user interface and rendering.

Lexical, on the other hand, presents itself as an extensible text editor framework engineered for reliability, accessibility, and performance. Its target developers often seek a more structured approach to building rich text experiences, with an emphasis on strong foundational principles that lead to a predictable and performant editing environment. Lexical aims to provide a more batteries-included feel, though still highly customizable through its plugin and node system.

A key architectural distinction lies in their underlying foundations. Tiptap Core leverages Prosemirror extensively, inheriting its robust document model and command-based interaction system. This means Tiptap's core logic is deeply intertwined with Prosemirror's internal workings, offering a familiar pattern for those who have used or understand Prosemirror. Lexical, conversely, is built from the ground up with its own internal state management and rendering pipeline, aiming for a distinct set of performance and reliability characteristics without direct reliance on a foundational library like Prosemirror.

Regarding their extension or plugin models, Tiptap Core employs a straightforward extension API that allows developers to add custom nodes, marks, and commands, aligning with Prosemirror's concepts. This extension system is highly modular and integrates seamlessly with its headless nature, enabling developers to compose editor functionality as needed. Lexical utilizes a node-based architecture and a plugin system. Developers can define custom nodes (representing different types of content) and leverage plugins to add editor features and commands, offering a structured way to extend the editor's capabilities.

In terms of developer experience, Tiptap Core's headless approach can initially present a steeper learning curve if you're not familiar with Prosemirror or component-driven UI development. However, its clear separation of concerns and extensive documentation for its extension API can lead to efficient development once understood. Lexical, while also requiring a learning investment, provides a more integrated framework. Its focus on a unified state management and its own set of APIs might feel more cohesive for developers new to rich text editor frameworks, potentially offering a smoother onboarding into its specific architectural patterns.

When considering performance and bundle size, Lexical demonstrates a noticeable advantage in terms of its gzipped bundle size, coming in significantly smaller than Tiptap Core. This can be a critical factor for projects where minimizing JavaScript payload is a high priority, such as in performance-sensitive applications or environments with slow network connections. Tiptap Core, while larger, is still reasonably sized, and its modularity means you mainly include what you need, but its foundational Prosemirror dependency adds to its overall footprint.

Practically, opt for Tiptap Core when you require maximum control over the UI and are prepared to build custom components or integrate with a specific UI framework like React or Vue, acting as a powerful engine for bespoke editor solutions. Choose Lexical when you value a framework that prioritizes built-in reliability and performance characteristics, and when its structured node-based system and plugin architecture align well with your project's requirements for building feature-rich editors with less UI boilerplate.

Lexical's architecture is designed with a strong emphasis on accessibility and a robust internal state management system, aiming to provide a highly predictable and maintainable editor. This focus can be particularly beneficial for complex applications where editor stability and forward-thinking design are paramount. Its extensibility through custom nodes and plugins ensures that developers can tailor the editor to a wide range of content requirements.

Both Tiptap Core and Lexical offer robust solutions for building rich text editors, but they cater to slightly different development philosophies. Tiptap Core's strength lies in its Prosemirror-based headless approach, granting ultimate flexibility for custom UI development. Lexical shines with its internally managed state and architecture, aiming for a balance of performance, reliability, and developer convenience within a more defined framework.