explaingit

didi/chameleon

8,971JavaScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

A JavaScript framework by Didi that lets you write one codebase and deploy it as a website, WeChat mini-program, iOS app, Android app, and several other platforms simultaneously.

Mindmap

mindmap
  root((repo))
    What it does
      Write once deploy anywhere
      Cross-platform framework
    Target Platforms
      WeChat mini-program
      Web browser
      iOS and Android
      Alipay Baidu QQ
    Core Features
      CML language
      CMSS styling
      Polymorphism protocol
    Built-in Tools
      UI components
      Network and storage APIs
      Build tooling
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Write a product feature once in CML and ship it simultaneously on WeChat, Alipay, Baidu, QQ, ByteDance mini-programs, plus web.

USE CASE 2

Replace five separate mini-program codebases with a single shared CML codebase, reducing maintenance burden.

USE CASE 3

Use platform-specific overrides via the polymorphism protocol only where platforms truly differ, keeping the rest of the code shared.

USE CASE 4

Build a cross-platform UI using the built-in button, dialog, and form components without writing platform-specific markup.

Tech stack

JavaScriptCMLCMSSVue

Getting it running

Difficulty · moderate Time to first run · 30min

Requires familiarity with Vue-like syntax and mini-program platform accounts (WeChat, Alipay, etc.) for full multi-platform deployment.

No license information is mentioned in the explanation.

In plain English

Chameleon (shortened to CML) is an open-source framework built by Didi, the Chinese ride-sharing company, that lets developers write a single codebase and have it run across many different platforms at once. The platforms it targets include regular websites, WeChat mini-programs, Alipay mini-programs, Baidu mini-programs, QQ mini-programs, ByteDance mini-programs, Android apps, iOS apps, and QuickApp (a standard from Android phone manufacturers). The name comes from the reptile that changes color to match its environment, which is what the framework does for your code. The core idea is that building the same feature for each platform separately is expensive and exhausting. If a product team needs to ship a feature on a website and five different mini-program platforms, they would normally write and maintain five versions. Chameleon collapses that into one. The development language it defines is called CML, alongside its styling language CMSS and standard JavaScript. The syntax was designed to feel familiar to anyone who has done web development. The markup structure works similarly to HTML, the styling is close to CSS, and the component model and data-binding system are deliberately close to Vue, a popular web framework. This means a developer who knows Vue can get started without learning an entirely new system. A key design feature is what the project calls a polymorphism protocol. This handles the reality that platforms are not identical. When a difference exists between, say, WeChat and a standard website, the protocol gives developers a clean way to write platform-specific code for just that piece while keeping everything else shared. The idea is that you rarely need a total rewrite for each platform, only small adjustments in specific spots. The framework also includes a library of ready-made UI components such as buttons, radio inputs, checkboxes, dialogs, and loading indicators, as well as a set of built-in API methods covering network requests, local storage, location, and animation. The full source code lives across the chameleon-team GitHub organization, with this main repository containing the build-time tooling.

Copy-paste prompts

Prompt 1
Using Chameleon (CML), show me how to create a page with a button that navigates to a detail page, targeting both web and WeChat mini-program at the same time.
Prompt 2
How do I use CML's polymorphism protocol to write a platform-specific block for WeChat while keeping the rest of my component shared?
Prompt 3
Generate a CML component that fetches data from a network API and displays it in a list, compatible with Chameleon's built-in API methods.
Prompt 4
How do I add Chameleon to an existing JavaScript project and configure it to build for Alipay mini-program?
Open on GitHub → Explain another repo

← didi on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.