Cross-Platform Rich Text Management Platform Page-Peggy: Design, Implementation, and Impact

To reduce friction between product managers and front‑end developers, Meituan Medicine Technology built a cross‑platform rich‑text management platform called Page‑Peggy. This article systematically introduces the platform’s positioning, design ideas, implementation principles, and achieved results.

Meituan’s various businesses (food delivery, pharmacy, flash‑sale, etc.) generate a large number of simple, frequently changing pages such as FAQs, agreements, and notifications. These pages have four typical characteristics: massive demand, frequent changes, low interaction complexity, and high timeliness.

Page‑Peggy was created to let product and operation teams create and publish these pages themselves via a WYSIWYG editor, while still providing developers with an online code editor for more complex needs. The platform has evolved into a public internal service used by dozens of departments.

Platform positioning : a one‑stop publishing workbench for product, operation, and development.

Benefits for product/operation : visual creation/modification of activity descriptions, agreements, and messages without waiting for a development schedule.

Benefits for developers : online code editing that supports ES6, JavaScript, Less, CSS, and offers utilities and chart libraries for rapid data‑driven page development.

Benefits for project management : clear visibility of demand flow and development logs, providing strong control for operation management.

Traditional development flow requires product → review → development → deployment → feedback. Page‑Peggy shortens this to product → edit/publish directly, with optional developer assistance for complex logic.

The design addressed several pain points: basic WYSIWYG could not meet all visual requirements, lack of template resources, missing performance monitoring, and content‑risk audit.

Key features include:

Rich‑text editing (visual editor)

WebIDE for custom JavaScript/HTML

Page management (view, edit, authorize, version compare, rollback)

Template market

Material platform (utils, ECharts, Vue, jQuery, etc.)

Multi‑platform SDK integration

Content risk audit

Data dashboard

Permission management

Business monitoring (JS error, resource load success rate)

The core architecture consists of three layers: a basic configuration layer (providing rich‑text operations, source editing, domain configuration, PC/H5 adaptation), an assembly layer (free page editing and interaction logic), and a generation layer (parsing, pre‑processing, compilation to final HTML/CSS/JS). Global state is managed with Vuex.

Key processing steps are page preview (assemble HTML/JS/CSS, generate Blob URL, iframe preview), compile service (Webpack compiles Less to CSS, ES6 to ES5, CDN for common libraries), and page generation (code quality check, security audit, unit tests, upload to object storage, CDN sync, final link generation).

Page‑Peggy can be embedded into other business systems via a SDK and offers Open API (HTTP and Thrift). The Thrift workflow includes defining an IDL, generating language‑specific stubs, registering the service, and using a unified transport protocol.

Example Thrift response:

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

For H5 protocol pages, the platform provides visual rich‑text editing so product and operation can publish without front‑end involvement.

Business‑custom rendering is enabled via Open API (Thrift + HTTP). Example usage:

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

Deployment‑specific logic can be written in WebIDE. Example snippet:

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
    }
}

Another example shows how a client can communicate with the platform via the SDK:

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

Business results to date: over 5,000 pages generated, more than 16,000 edit actions, cumulative page views exceeding 82.6 million, and adoption by more than ten departments and thirty business lines.

Conclusion: The rich‑text editor and WebIDE not only solve internal efficiency problems but also represent a hot research direction. The platform already provides syntax intelligence, diff comparison, pre‑check, and CLI debugging, and future work includes deeper WebIDE integration, R&D workflow automation, a comprehensive development platform, and expanded material openness.