How Meituan’s Page‑Peach Platform Boosts Front‑End Efficiency with Cross‑Platform Rich Text Management

1. Introduction

To reduce friction between product managers and front‑end developers and continuously lower costs while improving efficiency, Meituan’s Pharmacy Technology Department built a cross‑platform integrated rich‑text management platform called Page‑Peach. This article systematically introduces the platform’s positioning, design ideas, implementation principles, and achieved results, offering practical insights for readers.

2. Background

Meituan’s various business lines (e.g., Meituan Waimai, Delivery, Flash Sale, Pharmacy, Group Goods) involve dozens of operation teams, each with distinct rules and frequent style variations. The pages they need—FAQs, agreements, notifications—share four characteristics:

High demand : massive and growing volume of static pages.

Frequent changes : regulatory, legal, and business adjustments require rapid updates.

Low complexity : no complex interaction logic.

High timeliness : short‑lived, often temporary requirements.

To address these, the department aimed to provide a self‑service, visual, WYSIWYG platform for product and operations teams, freeing developers to focus on complex features.

3. Cross‑Platform Rich‑Text Management Solution

3.1 Platform Positioning

The platform serves as a one‑stop workbench for product, operations, and developers to quickly create and publish web pages.

Product/operations can visualize page creation and modification without waiting for development cycles.

Developers can edit code online and achieve second‑level publishing, supporting ES6, JavaScript, Less, CSS, and providing basic tools and chart libraries.

Project managers can view the entire demand flow and development logs, gaining strong control over operations.

Traditional workflow: product → requirement review → development → deployment → feedback loop. Page‑Peach workflow: product creates/edits directly on the platform, publishes instantly, and only involves developers for custom logic or complex features.

Traditional development process diagram:

Page‑Peach development process diagram:

3.2 Design Ideas

Initial challenges:

Simple rich‑text editors could not meet desired page effects.

Lack of template import capability.

No built‑in page access data or performance monitoring.

Potential content security risks.

Solutions:

Rich‑Text Editing : powerful visual editor enabling product users to create and edit pages without programming.

WebIDE : for custom logic, supporting JavaScript, Vue, jQuery, ECharts, Lodash, Axios.

Page Management : view, edit, authorize, offline, version compare, logs, and search.

Template Marketplace : diverse templates that can be reused and customized.

Material Platform : provides utils, ECharts, Vue, jQuery, etc., for secondary development.

Multi‑Platform Integration : SDKs for HTTP/Thrift APIs, supporting PC and H5 containers.

Content Risk Audit : integrates Meituan’s internal risk‑review service.

Data Dashboard : real‑time PV/UV, error statistics, and performance metrics.

Permission Management : granular access control.

Business Monitoring : JavaScript error and resource load success rates.

3.3 Implementation Principles

3.3.1 Basic Services

The platform consists of four core services: material service, compilation service, product enablement, and extension service.

3.3.2 Core Architecture

Three layers:

Configuration Layer : provides capabilities for rich‑text operations, source editing (HTML/CSS/JS), custom domains, container adaptation (PC/H5), and publishing environments.

Assembly Layer : enables free editing, handles interaction logic, and supports PV/UV tracking, automatic PC/H5 style adaptation, and internal‑only tags.

Generation Layer : parses, preprocesses, compiles, and outputs final HTML, CSS, and JavaScript.

3.3.3 Key Processes

After page creation:

Page Preview : reassemble content, pre‑compile styles and scripts, generate HTML, convert to Blob URL, and display via iframe.

Compilation Service : send file tree to backend, compile Less to CSS, ES6 to ES5 via Webpack, and load common materials via CDN.

Page Generation : perform code quality checks, content security review, unit tests, upload to object storage, sync CDN, and produce final page URL.

3.3.4 Multi‑Platform Integration

The platform can be embedded in other systems via SDKs, supporting both HTTP and Thrift APIs. The Page‑SDK enables direct publishing, management, and retrieval of page links, content, and permissions.

3.3.5 Open API

Provides both HTTP and Thrift interfaces. Thrift workflow includes defining IDL files, generating language‑specific stubs, service registration, discovery, and unified transport for data exchange.

Key steps:

Server defines IDL.

Thrift compiler generates interface files.

Service registers and discovers.

Unified transport handles calls.

Node implementation example (generated file):

{
  "code": 0,
  "data": {
    "tag": "苹果,标准",
    "title": "如何挑选苹果",
    "html": "<h1>如何挑选苹果</h1><p>以下标准可供消费者参考</p><ul><li>酸甜</li><li>硬度</li></ul>",
    "css": "",
    "js": "",
    "file": {}
  },
  "msg": "success"
}

Thrift service startup and registration flow diagram:

3.4 Solution Practices

3.4.1 H5 Protocol

Capability: rich‑text editing for static pages such as FAQs, agreements, and notifications.

Example case (image omitted for brevity).

3.4.2 Business‑Custom Rendering

Capability: Open API (Thrift + HTTP) allowing client, backend, or mini‑programs to render dynamic rich‑text content.

Mini‑program Vue example using v-html to render product selection instructions.

{
  "code": 0,
  "data": {
    "tag": "苹果,标准",
    "title": "如何挑选苹果",
    "html": "<h1>如何挑选苹果</h1><p>以下标准可供消费者参考</p><ul><li>酸甜</li><li>硬度</li></ul>",
    "css": "",
    "js": "",
    "file": {}
  },
  "msg": "success"
}

3.4.3 Deployment Requirements

Capability: WebIDE code editing for rapid channel‑specific link adjustments, achieving minute‑level deployment.

var ua = window.navigator.userAgent
var URL_MAP = {
  ios: 'https://apps.apple.com/cn/app/xxx',
  android: 'xxx.apk',
  ios_dpmerchant: 'itms-apps://itunes.apple.com/cn/app/xxx'
}
if (ua.match(/android/i)) location.href = URL_MAP.android
if (ua.match(/(ipad|iphone|ipod).*os\s([\d_]+)/i)) {
  if (/xx\/com\.xxx\.xx\.mobile/.test(ua)) {
    location.href = URL_MAP.ios_dpmerchant
  } else {
    location.href = URL_MAP.ios
  }
}

3.4.4 Client Communication Middle Page

Capability: WebIDE + material platform to embed client bridge SDK for quick communication testing.

// Business pseudo‑code
XXX.ready(() => {
  XXX.sendMessage({
    sign: true,
    params: { id: window.URL }
  }, () => {
    console.error('通信成功')
  }, () => {
    console.error('通信失败')
  })
})

3.4.5 Embedding Page in Business Systems

Capability: Page‑SDK acts as glue layer, enabling business systems to call Page for publishing, previewing, editing, and retrieving page links, content, and permissions.

3.5 Business Results

To date, Page‑Peach has generated over 5,000 pages, edited more than 16,000 times, and accumulated over 82.6 million PVs. Over ten departments and thirty business lines have adopted the platform.

4. Summary and Outlook

Rich‑text editors and WebIDE are both complex systems and hot research topics. Integrated with Meituan’s infrastructure, they solve many internal efficiency and quality problems, offering syntax intelligence, diff comparison, pre‑checks, and CLI debugging. Future work includes deeper Design‑to‑Code capabilities, enhanced WebIDE support for Vue/React/TS, automated code quality reporting, and expanded material libraries.

5. Author Information

Gaozhan, Yuli, Xiao Ying, Hao Chang (Meituan Pharmacy Terminal Team); Wang Yong, Chen Wen (Meituan Flash Sale Terminal Team).