$ show MrXujiang/h5-Dooring
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.
The LLM identified 3 files worth highlighting for reuse:
Implements lazy loading of components with caching and error boundaries. Uses React.lazy and Suspense to load components on demand and caches them to prevent re-fetching. This pattern improves initial load performance in applications with large component libraries.
A reusable component for creating editable lists with drag-and-drop reordering. It manages item state, allows reordering via drag handles, and provides input fields for each item's properties. This pattern is common in form builders and can be extracted for use in any form-related UI.
Provides on-screen horizontal and vertical rulers for precise alignment of elements in the editor. The component is self-contained, only requiring CSS for styling and minimal props for positioning. It demonstrates a useful UI utility pattern that can be reused in any drag-and-drop or design editor.