Introduction and Design of JD Waterdrop Low-Code Canvas

JD's Waterdrop platform targets internal enterprise backend management scenarios, offering visual low‑code configuration, building, and deployment capabilities. The Waterdrop canvas, a core feature, enables users without front‑end knowledge to create pages through simple drag‑and‑drop actions.

The canvas concept is likened to an artist's painting board: users add material components, arrange them on the canvas, and configure properties to achieve the desired display, mirroring the artistic process of mixing colors and painting.

Three canvas types are identified: page type (web and H5 pages), flow type (approval and function flows), and data‑dashboard type (reports and visual analysis). The current focus is on the page type for building standard B‑end pages.

Research compared JD's internal low‑code platforms and the external platform Retool, highlighting differences in layout strategies such as block versus grid layouts and the trade‑offs between flexibility and ease of use.

Development goals prioritize low learning and entry barriers for operators, product managers, testers, and developers, many of whom lack front‑end expertise. Key functional targets include absolute positioning combined with grid layout, comprehensive drag‑and‑drop and scaling of material dimensions, smooth performance, and broad coverage of common B‑end scenarios.

The proposed design separates the building layer, algorithm conversion layer, and rendering layer. The building layer captures material positions (layouts) and configuration (config); the algorithm layer adapts these layouts for different screen sizes; the rendering layer displays materials based on the adapted layouts, re‑calculating on viewport changes.

Implementation leverages react-grid-layout with a 1 px grid granularity, enabling precise absolute positioning. ResizeObserver is used to monitor material height changes in real time, ensuring dynamic content adapts correctly.

Adaptive algorithms handle canvas expansion and compression: when the canvas stretches, elastic modules scale while fixed modules maintain width, causing neighboring modules to shift or wrap as needed; when the canvas compresses, fixed modules may expand slightly, and neighboring modules adjust via depth‑first traversal to prevent layout conflicts.

Boundary handling addresses JavaScript floating‑point precision issues that can cause overlapping modules. A tolerance of less than 1 px merges adjacent boundaries to avoid visual gaps.

Several common layout patterns are demonstrated, including left‑right, right‑left, left‑center‑right, height‑adaptive tables, full‑screen sections, and nested composite components, showcasing the canvas's flexibility.

Future plans include auxiliary building tools for precise alignment, layout templates for rapid page creation, and expanded semantic layout configurations to cover more specialized scenarios, aiming for a flexible and easy‑to‑use low‑code experience.