Tango LowCode Designer

A source code based low-code designer from the NetEase Cloud Music Develop Team.

English | 简体中文

📄 Documentation

You can view the detailed usage guide through the following links:

• Document site: https://netease.github.io/tango/
• Playground application: https://tango-demo.musicfe.com/designer/

✨ Features

• Tested in the production environment of NetEase Cloud Music, can be flexibly integrated into low-code platforms, local development tools, etc.
• Based on source code AST, with no private DSL and protocol Real-time code generation capability, supporting source code in and source code out
• Out-of-the-box front-end low-code designer, providing flexible and easy-to-use designer React components
• Developed using TypeScript, providing complete type definition files

🌐 Compatibility

• Modern browsers（Chrome >= 80, Edge >= 80, last 2 safari versions, last 2 firefox versions）

🎯 Milestone

gantt
    dateFormat  YYYY-MM-DD
    title       Tango Release Milestone
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section Builder Release
    Alpha version            :active,  des1, 2023-08-10, 2023-08-30
    Beta version               :         des2, 2023-09-01, 2023-09-30
    1.0 RC               :         des3, after des2, 40d
    1.0 version              :         des4, after des3, 21d

📄 Usage

Install the low-code designer

npm install @music163/tango-designer

Initialize the low-code designer engine

import { createEngine } form '@music163/tango-designer';

// init designer engine
const engine = createEngine({
  entry: '/src/index.js',
  files: sampleFiles,
  componentPrototypes: prototypes as any,
});

Initialize the drag-and-drop engine

import { DndQuery } form '@music163/tango-designer';

const sandboxQuery = new DndQuery({
  context: 'iframe',
});

Initialize the designer layout (WIP)

Find details from Documentation Site。

💻 Development

Recommended Development Environment

• Node.js >= 16.0.0
• Yarn >= 1.22.0

Development Quick Start

# clone the repo
git clone https://github.com/NetEase/tango.git

# enter the project root
cd tango

# install dependencies
yarn

# start the designer playground app
yarn start

🤝 Contributing

Please read the github contribution guide first。

• Clone the repository
• Create a branch
• Commit and push your code
• Open a Pull Request

💗 Acknowledgments

Thanks to the NetEase Cloud Music Front-end team, Public Technology team, Live Broadcasting Technology team, and all the colleagues who participated in the Tango project.

Thank you to CodeSandbox for providing the Sandpack project, which provides powerful online code execution capabilities for Tango.