How Alipay’s MiniProgram WebIDE Runs Entirely in the Browser

Scenario Overview

Over the past year the Alipay MiniProgram IDE team joined the development of the Kaitian IDE framework. As the framework matured, the MiniProgram developer tools were upgraded to the Kaitian kernel and later integrated into a browser‑based WebIDE.

The article describes how the WebIDE was built on Kaitian and what components lie behind it.

Overall Architecture

The system consists of two main parts:

MiniAppWeb : an application server that manages the relationship between users and IDE instances and handles the IDE lifecycle.

MiniCode : the IDE container built on the Kaitian framework, deployed on Alibaba Cloud Kubernetes clusters.

Startup Process

A simplified IDE startup flow shows that creating the MiniCode container is the most time‑consuming step (≈10 seconds). To reduce this, user state loading is deferred, and a pool of pre‑warmed stateless MiniCode containers is maintained, cutting cold‑start time to about 3 seconds when a warm container is available.

IDE Server & Executable

The IDE server runs the Kaitian IDE framework on Koa, extending modules such as MiniProgram and Project to provide UI adaptation and workflow orchestration for MiniProgram development.

The Executable component consists of management scripts provided by the MiniCode container, which the MiniAppWeb server invokes remotely for tasks like loading workspace code and starting the IDE service.

MiniCode Plugins

MiniProgram development capabilities are split into independent plugins:

minicode-basis : core MiniProgram services.

minicode-compile : compilation, DevServer, real‑device debugging, and preview builds.

minicode-simulator : simulator services.

minicode-devtool : debugging tools.

Each plugin exposes commands, for example:

import { commands } from 'kaitian';
// Start MiniProgram compile DevServer
commands.executeCommand('mini-program.compile.startDevServer');
// Open simulator
commands.executeCommand('mini-program.simulator.open');
// Open remote debug
commands.executeCommand('mini-program.devtools.openRemoteDebug');

The plugins can be bundled as an Extension Pack or used individually, offering flexible integration for other IDE products such as Ant Group’s Cloud IDE.

Business Adoption

After completing the technical scenarios, the WebIDE was deployed in several business contexts, including adding convenient entry points in documentation and open platforms, and enabling one‑click project sharing via generated links.

Future Directions

The WebIDE is still early; while it supports the full MiniProgram lifecycle, usability challenges remain, such as mandatory login for shared projects. Future work will explore lighter Playground experiences and tighter integration among Playground, WebIDE, and client IDEs to make MiniProgram development more efficient and enjoyable.

Try It Out

Experience the MiniProgram WebIDE at https://minicode.alipay.com/ .