@tiptap/core vs prosemirror-state

Tiptap Core is designed as a headless, framework-agnostic rich text editor foundational library. It offers developers a highly customizable and extensible base upon which to build sophisticated editing experiences, making it ideal for projects requiring fine-grained control over the UI and editing logic. Its headless nature means it focuses on the core editing engine, leaving the rendering and user interface entirely to the developer.

ProseMirror State, conversely, is a core component of the larger ProseMirror toolkit, specifically responsible for managing the editor's state. It is an opinionated, yet highly flexible, toolkit for building rich text editors, focusing on a robust underlying data model and a powerful extension system. ProseMirror State is best suited for developers who want to leverage a proven, battle-tested editor framework with a strong conceptual model for document structure.

An architectural distinction lies in their scope and primary function. @tiptap/core acts as a complete editor framework, managing state, commands, and integrations. It abstracts away much of the complexity of rich text editing into a coherent API. prosemirror-state is more focused; it is a crucial part of ProseMirror's architecture, representing the document, selection, and history. It's a building block within a larger ecosystem, not a standalone editor solution.

Regarding their extension models, @tiptap/core utilizes a plugin-based system where extensions encapsulate specific functionalities and UI components, offering a high degree of modularity. prosemirror-state itself doesn't directly manage extensions in the same way; instead, the broader ProseMirror framework uses a plugin system that interacts with the state. This means while @tiptap/core's extensions can be seen as more self-contained UI/logic units, ProseMirror's plugins are deeply integrated with its core state and schema.

Developer experience with @tiptap/core generally involves integrating its various components and plugins to assemble a full editor, leveraging its extensive documentation and examples. The learning curve can be moderate due to its flexible architecture. prosemirror-state, being a lower-level piece, requires understanding ProseMirror's core concepts like schemas, nodes, marks, and transformations; the abstractions are different, potentially leading to a steeper initial learning curve if not familiar with ProseMirror's approach.

Performance and bundle size are notable differentiators. prosemirror-state is significantly smaller, reflecting its focused role as a state management module. Its minimal footprint makes it an excellent choice where application size is a critical concern. @tiptap/core, encompassing a broader set of editor functionalities out-of-the-box, is larger, though still optimized. Developers prioritizing the smallest possible editor core would lean towards prosemirror-state as a starting point.

For developers building a custom rich text editor where full control over rendering and UI is paramount, @tiptap/core is the pragmatic choice. Its headless design and extension API facilitate rapid development of unique editing interfaces. If you are building an editor from scratch and want a powerful, framework-agnostic foundation, Tiptap is an excellent starting point. Conversely, if you are diving into the ProseMirror ecosystem or need a highly robust and schema-driven state manager for an editor, prosemirror-state is the direct component to use or build upon.

One can view @tiptap/core as a more opinionated, yet flexible, abstraction layer built upon underlying ProseMirror principles, aiming to simplify editor development. prosemirror-state is a fundamental piece within the ProseMirror library itself, providing the core state management that powers ProseMirror-based editors. Choosing between them often depends on whether you want a complete headless editor framework or a foundational state management library within a specific, powerful editor ecosystem.

Emerging trends in headless UIs and highly structured content editing make both relevant, but for different reasons. @tiptap/core excels in scenarios demanding a highly tailored user experience without the constraints of a pre-built UI, fitting well with modern component-driven architectures. prosemirror-state is foundational for building technically complex editors that require strict document schemas and advanced collaborative features, which are often pursued in highly specialized content management systems or document editing applications.