Tiptap is a headless, framework-agnostic rich text editor built on ProseMirror. It provides a core editor engine with an extension system for nodes, marks, and plugins. The architecture is a monorepo with separate packages for core, framework bindings (React, Vue), HTML/markdown conversion, static rendering, and dozens of first-party extensions. Key entry points are the Editor class, Extension/Node/Mark factories, and framework-specific components like EditorContent and useEditor. Data flows: user input → ProseMirror state → extension hooks → commands → transaction → view update. External dependencies: ProseMirror libraries, Yjs for collaboration, lowlight for code highlighting, Floating UI for popups. The codebase demonstrates high craftsmanship with a well-designed extension API, comprehensive test coverage, and reusable patterns for decoration management, markdown serialization, suggestion autocomplete, and static rendering.
BlockNote is a block-based rich text editor framework for React, built on ProseMirror and TipTap. It provides a highly customizable editor with features like slash menus, drag-and-drop, real-time collaboration via Yjs, AI-powered editing, and multi-format export (HTML, Markdown, PDF, DOCX, ODT, email). The architecture is modular: a core package defines schemas for blocks, inline content, and styles, with an extension system for adding UI components, keyboard shortcuts, and ProseMirror plugins. Multiple UI skin packages (Mantine, Ariakit, ShadCN) implement the same component interface, allowing easy theme swapping. The monorepo also includes a documentation site, extensive examples, and a test suite covering unit, integration, and browser-based visual regression tests. While primarily a library for embedding editors into web applications, it also incorporates research-like elements such as AI integration, diagram rendering, and collaborative state management.
fylepad is a note-taking application built with Vue 3 and Tauri that provides a rich text editing experience with AI integration. It functions as both a web application and cross-platform desktop app, offering features like markdown editing, diagram support (Mermaid, PlantUML), media embeddings (YouTube, Spotify), and AI-powered text assistance. The application uses a local-first approach with IndexedDB/SQLite storage and optional cloud synchronization. The architecture follows a component-based pattern with Vue.js, utilizing Tiptap for the core editor functionality and numerous extensions for specialized features. State management is handled through Vue composables, and the UI is built with @nuxt/ui components. The application includes sophisticated features like offline support, conflict resolution, and a responsive interface that adapts between web and desktop contexts.