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.
This repository is a React component library, react-mosaic-component, that implements a tiling window manager (nested resizable/draggable panels) as a controlled or uncontrolled React component. It allows users to arrange panels in an n-ary tree of splits, tabs, and leaf nodes, with full drag-and-drop reordering, resizing, tab management, and theming support. The codebase is a well-structured Nx monorepo with a Docusaurus documentation site, a live demo, CI/CD pipelines, and extensive unit tests. While functionally complete and battle-tested, the code reveals some technical debt: a mix of class components and hooks, occasional `any` type usage, a reliance on `immutability-helper` for all tree mutations, and an active legacy binary-tree migration path that adds maintenance surface. The architecture is sound for its domain, and the immutable tree update factories and drag-and-drop state machine demonstrate non-trivial engineering.
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.