tmagic-editor：腾讯低代码平台多端拖拽实战与架构解析

腾讯内部跑了多年的一款可视化页面搭建神器：tmagic-editor。腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几个业务都在用，每月扛住数百个 H5/PC/TV 页面 —— 不是 PPT 玩具，是打过仗的工业级框架。

GitHub 上 4.9k Star、216 个 release（最新 v1.7.10，2026-04-14）—— 大厂内部 dogfood + 持续投入，质量基本不用担心。

一句话定位：所见即所得的页面可视化编辑器，非技术同学拖拖配配就能交付一个完整页面 —— 而且 H5、PC、TV 三端通吃。

它凭什么牛？三个硬实力 ：

硬实力	说明
多端多框架	一份 DSL，能用 vue2/vue3/react 三种 runtime 渲染——编辑器是 vue3，渲染层任你选
腾讯生产级背书	不是 demo 项目，是真在腾讯视频、爱玩游戏、云视听极光等业务每月扛数百个页面
架构可扩展	编辑器、runtime、UI 包模块化解耦，业务随便接、随便改

下面这张是官方 README 里的演示图——腾讯视频会员业务真实在用的可视化页面搭建平台，你能看到拖拽组件、实时预览、配置面板的全貌：

腾讯内部架构示意图：

生产流水线：物料、编排、发布三段式

tmagic-editor 把页面生产拆成三段，理解这个流水线就理解了整个产品的设计逻辑。

第一阶段：物料开发（开发同学的活）

tmagic-editor 自己不提供任何业务组件 —— 抽奖、登录、视频播放，全得业务方自己写。设计哲学是：组件一次开发、多页面复用，所以组件必须开放足够的配置项保证灵活性。支持 vue2、vue3、react 三套框架开发组件，这是它最大的灵活点。

第二阶段：编排（运营/产品的活）

非技术同学在编辑器里拖拖配配，页面就出来了。

第三阶段：保存与发布（自动化的活）

这一步技术含量最高，背后是三件事：

1. 生成 DSL ：编辑器和最终页面通过一份 js schema 解耦——配置好的页面被序列化成描述文件（页面元信息 + 组件信息 + 组件间逻辑）。
2. 构建 ：基于 runtime 把组件打包成 html、js、css。runtime 默认有 vue2/vue3/react 三种实现。
3. 部署 ：构建产物推到业务自己的服务器/CDN。

说白了，编辑器只负责“画”，runtime 负责“跑”，DSL 是两边的合同。这种解耦让框架可以“vue3 编辑、react 渲染”，互不干扰。

tmagic-editor 给了你三件武器

武器一：可视化编辑器（vue3 实现）

布局是经典的左中右三栏：

• 左侧 ：组件列表 + 组件树
• 中间 ：拖拽画布（也叫模拟器，通过 iframe 渲染，与编辑器框架解耦）
• 右侧 ：表单配置区
• 顶部 ：缩放、网格线、预览、保存、查看 DSL
• 底部 ：页面增删

这套布局用过任何低代码工具的人都熟，几乎没学习成本。侧边栏和顶部栏都开放了扩展点，业务可以塞自己的版本管理、发布按钮进去。

武器二：runtime（页面运行环境）

runtime 是 tmagic-editor 最值得品的设计。它同时是两个东西：

• 编辑期的渲染环境 ：模拟器里被你拖拽的那一切，是 runtime 在跑
• 生产期的渲染环境 ：用户访问的真实页面，也是 runtime 在跑

因为模拟器是 iframe 嵌入的，所以 runtime 完全可以和编辑器用不同框架 —— 这是它能“vue3 编辑 + react 输出”的根本原因。如果你熟悉 Vue.js 的组件化思想，就能理解这种编辑器与渲染层解耦带来的灵活性。runtime 同时也是打包构建的载体。

武器三：管理端 demo

只有编辑器还不够，得有一个后台管页面列表。tmagic-editor 给了一个开箱即用的 demo，覆盖：

• 页面列表展示与查询
• 页面创建、复制
• 页面编辑及 AB Test 配置
• 页面发布与发布状态管理

这个 demo 才是这个项目的“上手开关” —— 业务方拿来改改就能上线一个低代码后台，免去从零搭后端的工作。

想用 tmagic-editor，业务方得自己干这五件事

开源不等于开箱即用，下面这五件事必须自己做：

1. 开发业务组件

tmagic-editor 不带组件，业务的抽奖、视频播放、登录组件都要自己撸。好处是 vue2/vue3/react 都能写，坏处是确实得花时间。如果想用其它前端框架，必须先实现对应框架的 runtime。

2. 开发业务插件（可选）

插件用来补充页面行为逻辑——登录、环境判断、请求拦截器这类不直接渲染的功能。和组件一样，可以用任意前端框架实现。

3. 部署可视化搭建服务

tmagic-editor 是开源代码不是 SaaS，业务方要自己搭后端、自己部署。

4. 构建和发布页面

业务自己管组件库；发布时拿到 DSL，用 runtime 打包，把产物推到 CDN。

5. 其它定制

编辑器侧边栏/顶部栏扩展、runtime 修改、新框架 runtime 的开发——这些都属于“想用得更顺手”的活，可选但常做。

能力一览与上手入口

三个关键链接，建议直接收藏：

• 开源地址 ：github.com/Tencent/tmagic-editor
• 在线文档 ：tencent.github.io/tmagic-editor/docs/
• 在线体验 ：tencent.github.io/tmagic-editor/playground/index.html

适合谁？

• 团队内部需要做营销页/活动页搭建平台的——直接抄
• 给业务交付“运营自助配置”中后台工具的研发——demo + runtime 改改就能上线
• 想了解大厂可视化搭建怎么做的——架构师品鉴级好文

不适合谁？ 想要 SaaS 拿来即用的——这个项目是框架不是产品，自己搭服务的成本要算进来。

对于有深度定制需求的团队，不妨收藏一份官方 技术文档 以备查阅。

在云栈社区，我们见过不少从零搭建内部营销平台的团队，tmagic-editor 这类方案往往能帮他们节省大量研发时间。如果你也有类似的实践经验，欢迎来社区聊聊。