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.
Lexical is a modular, extensible rich text editor framework designed for building customizable text editors in web applications. It features an immutable state model with built-in undo/redo, real-time collaboration via Yjs integration, and a plugin-based architecture for extensibility. The framework provides core editing functionality including text manipulation, selection handling, and DOM rendering, along with specialized features for tables, lists, code blocks, equations, and accessibility. Built with TypeScript and supporting React, vanilla JS, and headless environments, Lexical emphasizes reliability, performance, and developer experience through comprehensive testing and documentation.
This repository is a production-grade, canvas-based WYSIWYG rich text document editor published as the npm package `@hufe921/canvas-editor`. It is a monolithic library that provides a fully self-contained document editing experience, rendering text, tables, images, LaTeX, and form controls entirely on an HTML `<canvas>` element. The architecture is a well-structured layered design featuring a Command pattern facade (`Command`/`CommandAdapt`), a custom particle-based rendering engine (`Draw`), a pub/sub event system (`EventBus`), and a plugin system. The editor supports a wide array of features including pagination, headers/footers, watermarks, change tracking (trace mode), macros, spell checking, accessibility, multi-column layouts, and a sophisticated cascade expression engine for dynamic form control behavior. It is specifically designed for high-fidelity document editing in domains like Electronic Medical Records (EMR), contracts, and official documents, as evidenced by the mock data and feature set. The codebase demonstrates strong engineering craftsmanship. Several components are genuinely reusable, including a custom Myers O(ND) diff algorithm, a standalone LaTeX-to-SVG renderer using Hershey fonts, a fully featured DSL expression evaluator for control cascading, and a clean event bus implementation. The project is actively maintained with a comprehensive test suite (Cypress E2E, Vitest unit tests), modern tooling (Vite, TypeScript), and a rich plugin ecosystem. While some core files like `Draw.ts` and `CommandAdapt.ts` are large and exhibit tight coupling, the overall architecture, separation of concerns, and quality of the reusable components are well above average.
Squire is a rich text editor (RTE) library written in TypeScript, designed primarily for email composition where preserving arbitrary HTML from third-party sources is critical. Unlike modern RTEs that enforce a structured internal data model, Squire keeps the HTML as the source of truth, enabling it to handle complex nested blockquotes, lists, tables, and inline formatting without breaking external markup. It does not provide its own UI toolbar; instead it exposes a programmatic API that can be integrated with any framework, making it lightweight (~16KB gzipped) and flexible. Architecturally, Squire is a single-class library with tightly coupled internal modules for DOM manipulation, range handling, keyboard input, clipboard operations, and HTML cleaning. The core `Squire` class orchestrates a MutationObserver to track changes, manages undo/redo history via HTML snapshots, and intercepts browser default behaviors for keys like Enter, Backspace, Delete, and Tab to provide consistent cross-browser behavior. It supports inline formatting (bold, italic, underline, etc.), block formatting (lists, quotes, code blocks), image resizing, and automatic link detection. Squire is used in production by Fastmail, ProtonMail, Tutanota, Superhuman, and other email services, as well as in non-email apps like Google Earth. Its strength lies in its ability to accept and clean arbitrary HTML through a configurable sanitizer (e.g., DOMPurify) while preserving as much structural fidelity as possible. The codebase is well-maintained with a comprehensive test suite and follows modern ES module practices.
Editor.js is a block-style, plugin-based WYSIWYG content editor for the web, developed and maintained by the CodeX team. It outputs clean JSON instead of heavy HTML, making it ideal for modern web applications that need structured content. The editor is built as a TypeScript library with a modular architecture: core modules (BlockManager, Toolbar, InlineToolbar, Saver, Renderer, etc.) communicate via an internal event bus, and all editing capabilities are provided by pluggable tools (Block Tools, Inline Tools, Block Tunes). The library exposes a comprehensive API for programmatic control over blocks, caret, selection, events, sanitization, i18n, and read-only mode. The architecture is centered around a plugin system where tools are external classes with lifecycle hooks (render, save, validate, merge, onPaste) and static configuration (toolbox, sanitize, pasteConfig, conversionConfig). The editor handles paste from various sources, supports cross-block selection, drag-and-drop, keyboard navigation, and mobile responsiveness. It includes a rich set of UI components: a floating toolbar, inline toolbar, block settings popover, and a versatile popover system with search, nested menus, and keyboard navigation via the Flipper component. Editor.js is not a standalone application but a library meant to be embedded into web apps. It is distributed as an npm package (@editorjs/editorjs) with UMD and ESM builds. The repository includes extensive Cypress end-to-end tests, example pages, and detailed documentation for developers. While primarily an application library, it also demonstrates strong data engineering patterns in its sanitization and paste handling, though these are not its primary focus.
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.
This repository contains a mentions plugin for the Lexical text editor, along with a Next.js demo application. The plugin provides advanced mentions functionality including customizable triggers, multiple trigger support, automatic spacing, async query functions, customizable styling, and programmatic manipulation of mentions. The architecture consists of a core plugin implementation in the 'plugin' directory and a demonstration application in the 'www' directory. The plugin follows a modular design with separate concerns for UI components, state management, text processing, and editor integration. Key features include mention detection via regex, custom node implementation for Lexical, and hooks for managing asynchronous data fetching with proper loading states.
This repository is a WYSIWYG H5 (HTML5) page editor enabling drag-and-drop creation of responsive web pages without coding. Built with React, TypeScript, and Umi 3.0 framework, it features a plugin-based architecture where components are defined by template (metadata) and schema (editable properties). The editor includes a canvas for arranging components, property panels for configuration, and tools for previewing, exporting, and saving templates. A Node.js/Koa backend provides endpoints for saving and retrieving HTML content. The application emphasizes extensibility and performance through patterns like dynamic component loading with caching, schema-driven form generation, and a modular component library. Key reusable components include a dynamic engine for lazy-loading components, an editable list with drag-and-drop reordering, and an on-screen calibration ruler for alignment. While the project is actively maintained, it shows some technical drift in dependency versions (e.g., React 16, Ant Design 4) and relies on a simple in-memory backend that may require adaptation for production use.
VvvebJs is a WYSIWYG web page builder that enables drag-and-drop creation of responsive websites using Bootstrap components. The system provides a visual editor with canvas, property panels, component library, and file management for constructing HTML pages. Key features include inline text editing, code viewing via CodeMirror, media handling, undo/redo functionality, and export capabilities. The architecture follows a modular pattern with core builder logic in libs/builder/builder.js, extensible via plugins and component definitions. Entry points include editor.html for initialization, save.php/save.js for persistence, and upload.php/scan.php for media management. The builder manipulates an iframe as the design canvas while maintaining component state and history for undo/redo operations.
MarkText is a cross-platform desktop markdown editor (Electron + Vue 3) powered by the Muya WYSIWYG engine. It provides real-time rendering of CommonMark, GFM, and extended syntax including KaTeX math, mermaid/plantuml diagrams, footnotes, tables, task lists, and 30+ themes. The monorepo contains four packages: `desktop` (Electron shell with IPC, preferences, spellcheck, export), `muya` (TypeScript core editor with block-based state, snabbdom rendering, undo/redo via ot-json1, clipboard, and floating UI components), `muyajs` (legacy JavaScript engine, still present for partial feature parity), and `website` (Next.js documentation site). The architecture follows a block tree pattern where each block type (paragraph, heading, list, table, etc.) is a subclass with consistent parent/content interfaces. Communication between the Electron main and renderer processes uses typed IPC channels. The codebase demonstrates strong software engineering practices with extensive unit and e2e test coverage (Playwright, Vitest), reproducible builds (pnpm monorepo), and a focus on regression testing for edge cases. However, the ongoing migration from the legacy `muyajs` engine to the new `muya` engine introduces some code duplication and technical drift, and some modules retain prototype-style JavaScript alongside modern TypeScript classes.
ESPHome Designer is a Home Assistant custom component that provides a visual drag-and-drop editor for designing display layouts on ESP32/ESP8266 devices running ESPHome. It supports multiple rendering protocols including native ESPHome C++ lambdas, LVGL, OpenEPaperLink (OEPL), and OpenDisplay (ODP). The editor features a canvas with zoom/pan, snap-to-grid, drag-and-drop, lasso selection, and a property panel for configuring widget attributes. Widgets are organized as plugins, each providing render, export, and lifecycle hooks for all supported output formats. The system can generate complete ESPHome YAML configurations including hardware definitions, sensor registrations, font loading, and display lambdas. The architecture is split between a Python backend (Home Assistant integration) and a JavaScript frontend (Vite-built SPA). The backend provides REST APIs for layout CRUD, entity history proxying, image/RSS proxying, hardware profile management, and PNG rendering. The frontend manages state via an AppState singleton with undo/redo, communicates with the backend through a bridge, and supports offline YAML parsing. An AI integration allows generating layouts from natural language prompts using multiple providers (Gemini, OpenAI, OpenRouter). The codebase demonstrates strong engineering practices with a plugin-based architecture, adapter pattern for multi-format export, schema-driven property panels, and extensive test coverage (200+ Vitest tests plus Python tests). It is actively maintained with CI/CD pipelines, quality gates, and regular releases. While the widget plugin surface is large and some legacy modules coexist with newer code, the overall design is modular and extensible.
This repository is the monorepo for Cherry Markdown, a rich, extensible WYSIWYG markdown editor library developed by Tencent. The core package (`packages/cherry-markdown`) provides a modular parsing engine with a plugin-based syntax hook system, a comprehensive toolbar, streaming rendering for AI chat, and support for diagrams (Mermaid, PlantUML, ECharts), math (KaTeX/MathJax), tables, and code blocks. The repository also includes a desktop client built with Tauri (Vue 3 + Pinia + Rust) that adds file management, local versioning, and native integrations; a VS Code extension; a WeChat Mini Program renderer; and various example applications. The architecture is well-structured with clear separation of concerns (engine, previewer, editor, toolbar, addons), extensive unit tests, and a consistent event-driven pattern. While the core library is JavaScript with JSDoc types, the client and plugins are TypeScript. Some technical drift exists due to vendored third-party assets (e.g., drawio library), a partially implemented Milkdown adapter, and a few deprecated code paths. Overall, this is a mature, actively maintained editor framework with high reusability in its hook system, utility classes, and composable patterns.
This is the Builder.io monorepo, a comprehensive headless CMS and visual page builder platform. It provides multi-framework SDKs (React, Angular, Vue, Svelte, Qwik, Solid, React Native, etc.) for fetching and rendering Builder.io content, a plugin ecosystem for extending the visual editor with custom components and data sources (commerce, CMS, media), CLI tools for project scaffolding and space management, and numerous example applications. The core SDK uses Mitosis for code generation to produce framework-specific implementations, and includes features like A/B testing, personalization, localization, visual editing, and server-side rendering. The repository also contains a Gatsby source plugin, a plugin loader, and integration plugins for Shopify, Contentful, Cloudinary, and others. While the codebase is large and actively maintained, it exhibits some technical drift with legacy Gen1 SDKs, duplicated configurations, and outdated dependencies in examples.