腾讯这款低代码神器太狠了!H5/PC/TV 三端页面,拖一拖就出

👉 这是一个或许对你有用的社群

🐱 一对一交流/面试小册/简历优化/求职解惑，欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料：

• 《项目实战（视频）》：从书中学，往事上“练”
• 《互联网高频面试题》：面朝简历学习，春暖花开
• 《架构 x 系统设计》：摧枯拉朽，掌控面试高频场景题
• 《精进 Java 学习指南》：系统学习，互联网主流技术栈
• 《必读 Java 源码专栏》：知其然，知其所以然

• 生产流水线：物料、编排、发布三段式
• tmagic-editor 给了你三件武器
• 想用 tmagic-editor，业务方得自己干这五件事
• 能力一览与上手入口

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

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

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

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

下面这张是官方 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 渲染”，互不干扰。

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

• 项目地址：https://github.com/YunaiV/ruoyi-vue-pro
• 视频教程：https://doc.iocoder.cn/video/

tmagic-editor 给了你三件武器

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

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

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

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

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

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

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

因为模拟器是 iframe 嵌入的，所以 runtime 完全可以和编辑器用不同框架——这是它能”vue3 编辑 + react 输出”的根本原因 。runtime 同时也是打包构建的载体。

武器三：管理端 demo

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

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

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

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

• 项目地址：https://github.com/YunaiV/yudao-cloud
• 视频教程：https://doc.iocoder.cn/video/

想用 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 拿来即用的——这个项目是框架不是产品 ，自己搭服务的成本要算进来。