Introduction to Tencent tmagic-editor: A No‑Code/Low‑Code Visual Page Builder

Tencent tmagic-editor is a what‑you‑see‑is‑what‑you‑get visual page editor that supports zero‑code or low‑code page generation, allowing non‑technical staff to quickly build H5, PC, and TV pages through drag‑and‑drop and configuration, dramatically reducing page production costs.

The editor has been used in multiple Tencent services such as Video Membership, Gaming, Cloud Viewing, and Tencent Meeting, producing hundreds of pages each month.

Page Production Process Based on the Visual Editor

1. Material Development

Business components (e.g., image, lottery, login plugins) are developed by the business itself; tmagic-editor provides no built‑in business components. Once created, these components can be reused across many pages and should expose configuration options for flexibility. They can be implemented with Vue2, Vue3, or React.

2. Orchestration

Non‑technical users arrange and configure components on the canvas by dragging them, completing the page editing.

3. Save and Publish

The technical implementation consists of three steps: generating a DSL, building, and deploying.

Generate DSL: The editor outputs a serialized JavaScript object (JS schema) that describes the page’s basic information, component list, and component logic.

Build: The build module packages components into HTML, JS, and CSS files using a runtime. tmagic-editor provides default runtimes for Vue2, Vue3, and React.

Deploy: The generated assets and JS schema are deployed to the business’s own server.

What tmagic-editor Provides

Visual Editor

The editor, built on Vue3, includes a sidebar, component list, component tree, canvas area, property panel, canvas controls (zoom, grid), preview, save, source view (JS schema), and page add/delete functions. It also supports extensions such as version management and publishing.

Runtime

The runtime is the execution environment for pages built with tmagic-editor. Two runtimes exist: one for the editor’s iframe simulator and another for the final user‑facing page. Different frameworks (Vue2, Vue3, React) can be used to develop runtimes, which also serve as the build target.

Admin Demo

An admin demo is provided to manage page lists, including page listing, creation, copying, AB‑test configuration, publishing, and status management.

Steps for Businesses Using tmagic-editor

Develop Business Components

Businesses must create their own components (e.g., lottery, video player) using the supported front‑end frameworks. The provided Vue2/Vue3/React runtimes can be used directly, or custom runtimes can be built for other frameworks.

Develop Business Plugins (Optional)

Plugins add page logic such as login, environment detection, or request interception, and can be implemented with any front‑end framework.

Deploy the Visual Building Service

tmagic-editor is open‑source, so businesses need to self‑host the visual building platform.

Build and Publish Pages

Manage component libraries, use the generated JS schema with a runtime to bundle HTML/JS/CSS, and deploy the artifacts to the business’s server or CDN.

Other Custom Requirements

Custom extensions can be added via the editor’s extension points; businesses may modify existing runtimes or develop new ones for other frameworks.

tmagic-editor Capabilities

(Illustrative diagram omitted)

How to Learn More About tmagic-editor

Open‑source repository: github.com/Tencent/tmagic-editor

Online documentation: tencent.github.io/tmagic-editor/docs/

Online playground: tencent.github.io/tmagic-editor/playground/index.html

The article concludes with a call to share, join the architect community, and follow the author’s platform for more resources.