返回目录
开源项目设计创作类新手

Tango LowCode Builder:网易开源的基于源码的低代码搭建器

Tango 是网易开源的一款基于源码的驱动型低代码搭建器,可基于源码 AST 在既有代码库上搭建低代码应用,支持源码进源码出的实时代码生成,提供开箱即用的 React 设计器组件,已在网易云音乐生产环境验证。

0 次阅读2026/09/14 发布
Tango LowCode Builder:网易开源的基于源码的低代码搭建器 来源图片

社区作者 · zZz

它解决什么问题

Tango 是网易(NetEase)开源的一款基于源码的低代码搭建器(A code driven low-code builder),可在你自己的代码库上开发低代码应用。项目已在网易云音乐生产环境经过验证,能够灵活集成到低代码平台、本地开发工具等场景。 核心特性:

  1. 基于源码 AST,不使用私有 DSL 与协议,具备实时代码生成能力,支持“源码进、源码出”。
  1. 开箱即用的前端低代码设计器,提供灵活易用的设计器 React 组件。

官方示例(仓库中给出了对应预览图):Internal App Builder(内部应用搭建)、Dashboard App Builder(仪表盘应用搭建,配图 4)、Mobile App Builder(移动端应用搭建)、ReactNative App Builder(React Native 应用搭建,配图 6)、Email Builder(邮件模板搭建,配图 7);仓库封面与预览动图见配图 2。

兼容性:现代浏览器(Chrome >= 80、Edge >= 80、最近两个 Safari 版本、最近两个 Firefox 版本)。 文档与在线体验:文档站 https://netease.github.io/tango-site/ ,Playground 应用 https://tango-demo.musicfe.com/designer/ 。 社区:可通过 Discord(https://discord.gg/B6hkGTe4Rz)加入 NetEase Tango 社区,分享想法、建议或问题。

致谢:项目致谢网易云音乐前端团队、公共技术团队、直播技术团队及所有参与 Tango 的开发者,并感谢 CodeSandbox 提供的 Sandpack 项目,为 Tango 提供强大的在线代码执行能力。 来源页面还提到同团队产品“Seal D2C”设计转代码开发工具(支持 React、RN、Vue、微信小程序等多端场景),并提供 Figma 与 MasterGo 插件入口。

  1. 使用 TypeScript 开发,提供完整的类型定义文件。

— 本文由 AI 根据公开来源辅助整理,命令、版本与许可证请在使用前到原始页面复核。

安装 / 开始使用

准备环境:Node >= 18;

可复制命令
Yarn >= 1.22 且 < 2

开发快速开始(按顺序执行):

步骤 1 · 克隆仓库:

可复制命令
git clone https://github.com/NetEase/tango.git

步骤 2 · 进入项目根目录:

可复制命令
cd tango

步骤 3 · 安装依赖:

可复制命令
yarn

步骤 4 · 启动设计器 playground 应用:

可复制命令
yarn start

本地 HTTPS 证书(如果需要在本地开发环境中使用 https):

步骤 1 · 安装 mkcert:

可复制命令
brew install mkcert
  1. 安装本地证书:mkcert -install

步骤 3 · 进入 playground 应用目录:

可复制命令
cd apps/playground

参与贡献流程:先阅读 GitHub 贡献指南;克隆仓库、创建分支、提交并推送代码、打开 Pull Request。 常见问题与注意事项:

  1. 生成证书:mkcert local.netease.com(或改成你自己的域名)

运行环境要求 Node 18 及以上,

可复制命令
Yarn 版本需 >= 1.22 且 < 2

,版本不符可能导致安装或启动失败。

  • 浏览器需为 Chrome/Edge 80 及以上,或最近两个版本的 Safari / Firefox。
  • 本地开发若需 https,需要按上述步骤自行生成证书(可参考仓库中的教程配图,配图 1、配图 8 为教程相关配图)。
  • 运行示例工程可参考仓库提供的各场景截图:仪表盘应用(配图 4)、React Native 应用(配图 6)、邮件应用(配图 7)。
  • 详细使用说明请查阅文档站 https://netease.github.io/tango-site/ ,在线体验地址为 https://tango-demo.musicfe.com/designer/ 。

来源教程配图

教程配图
配图 1 · 教程配图查看原图
preview
配图 2 · preview查看原图
image
配图 3 · image查看原图
dashboard app
配图 4 · dashboard app查看原图
image
配图 5 · image查看原图
rn app
配图 6 · rn app查看原图
mail app
配图 7 · mail app查看原图
教程配图
配图 8 · 教程配图查看原图

适用场景

基于自有代码库搭建企业内部应用的低代码平台
搭建仪表盘(Dashboard)类数据展示应用
搭建移动端 H5 低代码应用
搭建 React Native 跨端应用
搭建邮件模板(Email Builder)可视化编辑器
将低代码设计器集成到本地开发工具或 IDE 插件中
在低代码平台中实现源码进
源码出的实时代码生成