tmagic-editor Overview: A Visual No‑Code/Low‑Code Page Builder and Its Production Workflow

tmagic-editor is a what‑you‑see‑is‑what‑you‑get visual editor that allows zero‑code or low‑code generation of H5, PC, and TV pages, dramatically reducing page production costs by letting non‑technical users drag, configure, and self‑service create pages.

The production process consists of three stages: (1) material development, where business components such as image, lottery, or login plugins are built (using Vue2, Vue3, or React) and reused across pages; (2) orchestration, where non‑technical staff arrange components via drag‑and‑drop; (3) save and publish, which involves generating a DSL (a serialized JavaScript schema describing the page), building the page with a chosen runtime, and deploying the resulting HTML, JS, CSS, and schema files to the business server.

tmagic-editor provides a full visual editor UI built on Vue3, including a sidebar, component list, component tree, canvas area, property panel, canvas controls, preview, save, source view (JS schema), and page add/delete functions. It also defines the concept of a runtime—an execution environment for the generated pages—with supported runtimes for Vue2, Vue3, and React, used both in the editor’s iframe simulator and in the final deployed page.

A management‑demo application is included, offering page list display and search, page creation and duplication, page editing with AB‑test configuration, and page publishing with status monitoring.

Businesses adopting tmagic-editor need to develop their own business components (and optionally plugins), deploy the visual building service themselves (as the project is open‑source, not SaaS), and handle building and publishing by using the generated JS schema with the appropriate runtime, then deploying the assets to their servers or CDN. Custom extensions can be added via the editor’s extensibility points.

For more information, see the open‑source repository at github.com/Tencent/tmagic-editor , the online documentation at tencent.github.io/tmagic-editor/docs/ , and the live playground at tencent.github.io/tmagic-editor/playground/index.html .

强势开源一款小程序！
2021-11-07
强力推荐一个完善的物流（WMS）管理项目（附代码）
2021-10-23