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.
React Mosaic is a production-grade React tiling window manager library. It renders an immutable n-ary tree of split, tab, and leaf nodes as a fully interactive layout with drag-to-resize dividers, draggable panel rearrangement, and tab-group management. The library is the single package `react-mosaic-component`, built with TypeScript, using `react-dnd` for drag-and-drop (with HTML5 and touch backends via multi-backend), and `immutability-helper` for immutable tree updates. It supports controlled and uncontrolled usage, Blueprint theming, and React 16–19. The architecture is centered on a `MosaicNode<T>` union type, a recursive renderer (`MosaicRoot`), and a React context system (`MosaicContext`, `MosaicWindowContext`) that exposes tree manipulation actions. The core tree utility layer (`mosaicUtilities.ts`, `mosaicUpdates.ts`) is well-isolated and thoroughly unit-tested. The codebase is actively maintained, with comprehensive CI/CD (GitHub Actions for PR validation, deployment, publishing), conventional commits, and an Nx monorepo build system. Despite some legacy class component patterns in the main components, the library demonstrates strong engineering with clean type guards, immutable state handling, and extensive test coverage for edge cases. It is suitable for embedding in any application needing complex panel layouts (IDEs, dashboards, monitoring tools).
react-sortable-tree is a React component library that provides a drag-and-drop sortable tree view for hierarchical data. It renders nested arrays of nodes with expand/collapse, virtualization via react-virtualized, search with highlighting, theming, and extensive callback hooks for move and visibility changes. The library is not actively maintained; the last release was in 2020, and the README explicitly disclaims maintenance. The codebase is well-architected with clean separation of concerns: pure tree-data utility functions (walk, map, insertNode, etc.) separated from React rendering, a DndManager class that wraps react-dnd, and a theming system. Despite its staleness, the core tree manipulation algorithms are high-quality and extractable for other projects. The library depends on outdated versions of React (16) and react-dnd (11), and uses react-virtualized instead of the more modern react-window.