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.
Hippy is a cross-platform mobile application framework developed by Tencent that enables developers to build native mobile apps using JavaScript with React or Vue. It provides a JS driver layer that communicates with native renderers on Android, iOS, OpenHarmony, and Web via a bridge system. The architecture is modular: a DOM layer manages the virtual tree and layout (using Taitank or Yoga), native renderers create platform-specific UI components, and a virtual file system (VFS) handles resource loading. The framework includes a full devtools backend implementing Chrome DevTools Protocol for debugging, performance monitoring, and DOM inspection. Key entry points include the JS bootstrap (hippy.js), native engine managers (HippyEngine on Android, HippyBridge on iOS), and the JS framework adapters (hippy-react, hippy-vue, hippy-vue-next). External dependencies include V8, Hermes, JSC, or JSH JavaScript engines, and platform-specific SDKs (AndroidX, UIKit, ArkUI). The codebase is large and actively maintained, with multiple renderer implementations and both Vue 2 and Vue 3 support, though some duplication and deprecated code exist.