Design and Implementation of the PopLayer Pop-up Builder Platform (xEditor)

This article presents a comprehensive case study of the PopLayer pop‑up platform upgrade, covering the problems faced, the product and technical thinking, and the concrete solutions implemented over more than a year of development.

Problems Identified

The platform suffered from poor extensibility, sub‑optimal user experience, fragmented data, and an architecture that did not fully exploit the potential of a JSON‑based DSL for pop‑up description.

Product‑Level Thinking

The author likens pop‑ups to physical flyers, emphasizing the need to deliver low‑cost, attractive content to the right audience at the right moment. Six core goals were defined: reduce production cost, expand deployment channels, achieve precise targeting, enrich content, improve user experience, and enable data‑driven operations.

Technical Architecture Redesign

The solution adopts a three‑layer architecture:

Data layer: immutable state snapshots (using immutable.js) enable reliable preview and undo/redo functionality.

Logic layer: modular plug‑in components with standardized slots allow flexible assembly of UI features.

Engineering layer: TypeScript for type safety, unit tests for core utilities, and adherence to internal linting standards.

DSL Design

A new DSL was created to describe pop‑up structure, behavior, and styling. It follows three principles: Ockham’s razor for field minimalism, high cohesion & low coupling, and domain‑driven design. The DSL consists of seven modules (basic info, components, style, request, behavior, animation, and other functions) and defines 17 top‑level fields.

Example of an { "actions": [ { "type": "click", "content": [ { "id": "1", "target": "State_2", "behaivior": "switch", "content": "", "nextActions": ["2"], "fallbackActions": [] }, { "id": "2", "target": "", "behaivior": "close", "content": "", "nextActions": [], "fallbackActions": [], } ] } ] } snippet illustrates the tree‑structured action model.

Complex condition handling is expressed as nested JSON objects, e.g.:

{ "condition": { "left": { "left": "{{store.$username.nickname}}", "operator": "=", "right": "kongtang" }, "operator": "&&", "right": { "left": "{{store.$age}}", "operator": ">=", "right": "20" } } }

xEditor Features

Drag‑and‑drop + configuration UI inspired by Axure, enabling low‑code or no‑code pop‑up creation.

Component library with nine core components (image, text, countdown, hotspot, container, iframe, video, state, close button).

Data mock capability for front‑end/back‑end separation during development.

Composite condition panels for sophisticated logic without code.

Animation module supporting simple, consistent, and flexible effects across H5, iOS, and Android.

Rendering Engines

H5 native engine (xRender) built with pure JavaScript, achieving rendering times of tens of milliseconds.

Native lightweight engine for Android/iOS, improving exposure rates by 26 pt in tests.

Performance & Stability Enhancements

Immutable data snapshots enable reliable state management and undo.

Extensive unit testing, linting, and monitoring (JSTracker, sentiment control).

Pre‑load of landing pages reduces perceived load time and boosts page‑arrival rates by ~12.58 pt.

Results

Since the 4.0 release in August 2021, PopLayer has supported 46 major pop‑up campaigns, saved over 92 person‑days, and maintained zero online incidents. The platform now covers end‑to‑end scenarios, offers precise targeting via UCP smart control, and delivers rich content with animation and data‑driven features.

Future Plans

Increase native engine version coverage and implement automatic engine fallback.

Expand animation templates and integrate A/B testing to quantify impact.

Broaden the pop‑up deployment chain to cover more complex interactions.

Build a unified data dashboard for pop‑up performance and enable systematic A/B experimentation.