E-commerce SaaS (Confidential)
Drag-and-Drop Page Builder for a Multi-tenant E-commerce Platform
A multi-tenant e-commerce platform needed a drag-and-drop page builder that allowed merchants to build custom storefronts without writing code. The feature needed to work across thousands of stores with different configurations, handle complex nested layouts, and remain performant at scale.
Outcome
Delivered a working page builder that merchants could use without technical help. Designed the data model and component system to handle deeply nested layouts, dynamic schema-driven blocks, and per-tenant configuration — while keeping the renderer fast enough to not impact storefront performance.
The Problem
Building a drag-and-drop page builder is a specific class of frontend problem — it looks like a UI feature but it’s really an architecture problem. The decisions you make about the data model and rendering pipeline determine whether the feature can grow or whether you hit a wall after the first three block types.
For this platform, we needed the builder to:
- Support arbitrary nesting (sections → rows → columns → blocks)
- Be schema-driven so new block types could be added without touching the renderer
- Produce output that rendered fast on the storefront side
- Work across multi-tenant configurations where each store had its own settings
What I Did
Data Model Design
The key decision was the document structure. A tree-based JSON model gave us flexibility for nesting, but needed careful design to avoid performance problems when the user was dragging and dropping. I designed a normalized structure — blocks stored flat with parent/children references — that made updates cheap even on deep trees.
Schema-Driven Block System
Each block type (hero, text, image, product grid, etc.) was defined by a schema that described its configuration options. The renderer didn’t know about specific block types — it just read the schema and rendered accordingly. This meant adding a new block type was isolated: define the schema, write the component, done.
Drag-and-Drop Implementation
The drag-and-drop layer was built on top of a well-known library but required significant custom work to handle the constraints of the multi-tenant layout system — specifically, enforcing rules about which blocks could nest inside which containers without breaking the schema contract.
Storefront Renderer
The builder produced a JSON document. A separate, minimal renderer on the storefront side consumed that document and produced the actual page output. I designed these as two separate concerns — the builder could evolve without touching the renderer, and the renderer stayed as thin and fast as possible.
Outcome
The page builder shipped and merchants adopted it. The schema-driven approach proved its value quickly — the team was able to add new block types in isolation, which kept velocity high after the initial release.
The biggest lesson from this project: the right data model makes everything downstream easier. Time spent on the document structure before writing UI code was the best investment of the project.
Have a similar challenge?
I'm available for technical consulting and freelance project work. Let's talk about your frontend.
Get in touch →