Building a New Product CMS with the Waterdrop Low‑Code Platform: A Best‑Practice Guide

During the push to digitize and standardize new product launch processes, a first‑release material review CMS needed to be embedded in the marketing center to provide convenient scoring and evaluation experiences. After evaluating a 40‑person‑day custom development effort, the team chose the Waterdrop low‑code platform and completed the entire co‑building and setup in just six person‑days.

This article walks through the construction of the Marketing Center – New Product CMS (referred to as the New Product CMS) using the Waterdrop low‑code platform.

Waterdrop — CMS Quick Solution

Waterdrop offers both programming‑centric and low‑code capabilities that complement each other, providing comprehensive solutions for back‑office management systems. Its key highlights include visual form and table designers, permission control, and built‑in micro‑frontend support.

Waterdrop feature highlights

The guide proceeds step‑by‑step from requirement review, component development, page assembly, to final publishing of the CMS.

New Product CMS Requirement Analysis

Business complexity: Strong inter‑module coupling and high data complexity.

Multiple interaction scenarios: Numerous page navigations and data transfer requirements.

High UI fidelity: Must match the marketing center’s design language.

Micro‑frontend composition: The CMS is embedded as a sub‑application within the marketing center.

Short development cycle: Six pages (6 forms, 4 tables) were designed, developed, and tested within six days.

In addition to these characteristics, four business‑specific components required custom development, which Waterdrop supports through its co‑building capability, allowing developers to import custom component sets into the system.

Requirement analysis

Component Co‑development

After requirement analysis, developers download a custom component template library, perform the necessary customizations, and then publish the completed components to the Jnpm repository for installation via the Waterdrop workspace.

Custom component development process

1. During local development, developers can code while simultaneously debugging form and table components.

2. Once the custom component set is successfully published to the Jnpm repository, it can be installed and used within the Waterdrop workspace.

3. Installed components can be dragged onto pages for use.

Visual Page Building

The page‑building phase is straightforward: Waterdrop provides a form and table designer where developers simply drag‑and‑drop components to match the UI mockups. A unified visual standard, co‑created with the UI design team, ensures that a single drag aligns the layout with the design specifications.

Waterdrop form designer

Beyond layout, Waterdrop supports form linking, asynchronous data fetching, and complex logic via a Schema view. Built‑in validation covers URLs, HTTPS, image size, array limits, etc., while custom regular expressions or additional Schema configurations can handle advanced cases.

Waterdrop form designer: JSON editing capability

Frontend Event Orchestration

In addition to UI layout, business logic and navigation are handled through Waterdrop’s event orchestration feature, where developers write JavaScript actions and bind them to exposed module events.

For example, custom validation logic can be added before form submission, and data transformation can be performed to match backend API contracts.

Event binding and action writing

Interface and Data Source

After completing UI and event configuration, the front end is linked to backend services. Unlike many low‑code platforms, Waterdrop (DripWorks) also offers FaaS to connect data sources, allowing rapid generation of CRUD functions in NodeJS, Java, etc., without managing deployment details.

In the New Product CMS scenario, existing backend services are simply bound by adjusting request parameters and linking the appropriate endpoint URLs.

Binding interface service

Permission Control

Once development and integration are finished, role‑based permission management is configured. Waterdrop allows defining roles, assigning menus, pages, and functional permissions, and also provides backend APIs for fine‑grained access control.

Role and permission control

Zero‑Ops Cloud Build and Version Management

After assembly, clicking “Build & Publish” triggers automatic source code generation and cloud building. The artifact is pushed to JD.com’s front‑end publishing platform Pubfree for deployment. The built product is immutable, can be retrieved for further development or private deployment, and supports three environments (test, pre‑release, production) with instant version switching.

Version management

After publishing, the generated link redirects to the live application, delivering a CMS that conforms to Micro‑App micro‑frontend standards and can be seamlessly integrated with the marketing center.

Conclusion

The New Product CMS case demonstrates that Waterdrop enables rapid drag‑and‑drop CMS construction, deep component co‑development, and flexible logic extension, meeting diverse business requirements while reducing repetitive work. Although improvements such as richer module content and lower learning curves are needed, the platform’s open‑source form and table capabilities invite community feedback and contribution.

Waterdrop’s underlying features are also open‑sourced (e.g., https://github.com/JDFED/drip-form and https://github.com/JDFED/drip-table) for developers to explore and enhance.