How JD’s Linglong Platform Revolutionized Multi‑Channel Visual Page Design

Background and Motivation

Before 2017 JD.com’s PC channel pages were hand‑coded and published through an internal CMS, resulting in long development cycles. To improve efficiency the team moved development and data entry to local custom tools, which later evolved into a visual page‑building platform.

Early Page‑Assembly System

The first prototype allowed operators to splice existing page sections (“floors”) together. By refactoring each floor to contain isolated HTML, CSS, and JavaScript, the system avoided style and script conflicts and enabled flexible floor composition.

Transition to a Component‑Based Visual Editor

To overcome the limitations of the assembly system a component‑based visual editor was designed with three core parts: a component library, a designer, and a property panel.

Component Library

The library contains two categories:

Basic components (text, image, shape, etc.)

Business components that encapsulate common JD page patterns.

A grid‑inspired layout system provides more than 50 official components and over 200 layout patterns. Internal teams can contribute additional components via a plug‑in mechanism.

Designer

The designer handles drag‑and‑drop, component loading, rendering, component‑tree operations, and dynamic property injection. Higher‑order components are used to extend component functionality without modifying core code.

Property Panel

Each component’s properties are strongly typed. A rule engine controls conditional visibility of properties. The panel was reorganized into five sections to reduce cognitive load:

Component Name

Layout

Data Input

Style Configuration

Floor Configuration

Before vs. after redesign of the configuration panel.

Element Editor and Design Assets

The element editor lets users create custom components by dragging basic elements onto a canvas and attaching events or animations. Thousands of templates are pre‑built and integrated with an intelligent image‑design service that supports automatic color schemes and skinning.

Multi‑Scenario Adaptation

Responsive Rules for Activity Pages

Responsive transformation rules convert mobile layouts to desktop and vice‑versa, handling:

Stretching of containers without layout change

Text truncation or scaling

Proportional image scaling and optional cropping

Module expansion (e.g., converting a mobile two‑column layout to a four‑column desktop layout)

Layout re‑arrangement when element dimensions differ between devices

Content addition or removal based on screen size

These rules allow a single page definition to generate both PC and H5 versions automatically.

Interactive Marketing

Interactive components are modularized; a typical interactive campaign that previously required ~1 month of development can now be assembled in ~10 minutes using the visual editor.

Mini‑Program Support

Built on the cross‑platform framework Taro, the platform can generate complete mini‑program code for WeChat, Baidu, etc., and publish it through JD’s internal “Kepler” pipeline. Example merchants include “Jiuyang” and “Dyson”.

Store Scenarios

Store homepage: integrates JD Zhipu assets for rapid storefront construction.

Store promotion pages: created with the element editor for personalized campaigns.

Store shopping mini‑program: provides private‑traffic tools such as lotteries and panoramic galleries.

Editor Modularization and Plugin Architecture

The editor is split into a core designer and configurable plug‑in slots. A JSON/YAML configuration file describes each plug‑in (path, load mode, dependencies). At runtime the editor:

Parses the configuration file.

Loads plug‑ins asynchronously into designated slots.

Shares a global state store so plug‑ins can communicate and invoke editor APIs.

Keeps business logic outside the core editor, making the editor lightweight and extensible.

External Enablement

The modular editor has been adopted by other JD platforms, such as JD Data Science “Jianghu” and JD ME Industry Edition, serving as a design engine for rapid commercial development.

Conclusion

Linglong’s visual page‑building platform has evolved from a simple floor‑assembly tool to a component‑based, plugin‑extensible editor that supports PC, H5, and mini‑program outputs. Its architecture emphasizes decoupling, configurability, and multi‑scenario responsiveness, providing a foundation for future intelligent design capabilities.