$ show Tencent/tmagic-editor
TMagic Editor is a low-code visual page builder framework developed by Tencent. It provides a WYSIWYG drag-and-drop editor for assembling pages from a library of components (Vue and React), configuring properties via schema-driven forms, binding data sources (HTTP, static, mock), attaching JavaScript code blocks for custom logic, and defining event/action flows. The editor outputs a structured DSL (JSON) that can be rendered by separate runtime packages for Vue 2/3 and React, making it suitable for building internal tools, marketing pages, or any form-based application. Architecturally, the project is a monorepo with over 20 packages. The core editor (`packages/editor`) is built with Vue 3 and Element Plus (with an adapter for TDesign), and relies on a canvas stage (`packages/stage`) using the Moveable library for element selection, resizing, and dragging. Property forms are rendered by a headless-capable form engine (`packages/form`) that supports validation, dynamic fields, and complex containers (tabs, tables, group lists). Data sources are managed through an observable pattern (`packages/data-source`) with dependency tracking (`packages/dep`) that can be offloaded to a Web Worker. The system includes a CLI tool (`packages/cli`) for generating runtime entry files and a comprehensive SDK (`packages/editor/src/sdk`) for programmatic DSL manipulation without a browser DOM. Key features include multi-page and page-fragment support, undo/redo with IndexedDB persistence, dependency analysis for incremental updates, a plugin system for extending editor services, and a design abstraction layer that allows switching between UI frameworks. The codebase is well-tested with Vitest, follows modern TypeScript practices, and includes extensive documentation via VitePress. While primarily a developer tool for creating custom editors, it also ships with a playground for demonstration and testing.
The LLM identified 6 files worth highlighting for reuse:
Implements a generic dependency collector that traverses a tree of items and matches them against registered targets using `isTarget` callbacks. Supports batch collection to reduce tree traversal overhead, serializable descriptors for worker offloading, and incremental updates. This pattern is reusable in any system that needs to track which nodes depend on which resources (e.g., data sources, code blocks) and can be extracted with minimal modification.
Provides a base observable data class with `on`, `off`, `update`, and `getData` methods for reactive data propagation. Supports deep observation (`DeepObservedData`) and simple value observation (`SimpleObservedData`). This pattern is self-contained and can be reused in any application requiring observable state with change notifications, independent of the data source context.
A headless form validation engine that validates form configurations without rendering Vue components. It respects display conditions, container nesting (tabs, tables, group lists), and registered field inner configs. Supports multiple validation modes (strict, record, off) and returns structured error results. This module can be extracted and used in server-side or worker-based validation scenarios for any config-driven form system.
A generic undo/redo implementation with per-resource stacks, cursor management, step merging, and serialization support. Includes `replaceCurrentStep` for in-place updates and `isSavedStep` for persistence awareness. The class is independent of the editor domain and can be reused in any application requiring multi-stack undo/redo with optional persistence.
A priority-queue task scheduler that uses `requestIdleCallback` with a `setTimeout` polyfill for environments where it's not available. Supports batch management, task cancellation, and configurable idle timeout. This utility is self-contained and can be reused in any application that needs to defer non-critical work to idle periods without blocking the main thread.
Abstracts the Moveable library's drag, resize, and rotate interactions for a canvas editor. Supports single and multi-selection, ghost elements for sortable mode, and coordinate transformations between layout modes (absolute, fixed). This component encapsulates complex moveable configuration and event handling, making it reusable in other canvas-based editors that require similar interaction patterns.