Building a Dynamic UI System at Carousell (Part 1)
Article Summary
Siaw Young from Carousell reveals how they built a system that lets them update thousands of product categories without pushing app updates. The secret? A cross-platform markup language that operates at a higher abstraction than HTML.
Carousell faced a scaling nightmare: user-generated listings across diverse categories (from iPhones to jobs to insurance) needed structured data, but hardcoding forms for thousands of categories was unsustainable. Their solution was a server-driven UI system powered by 'fieldsets' that work uniformly across iOS, Android, and web.
Key Takeaways
- Fieldsets enable dynamic forms, filters, and listing views without client updates
- System handles thousands of categories updated daily across all platforms
- Declarative format controls business logic and validation, not just layout
- Solved search problems like finding '4-room' vs '3+1' vs '4bedrm' flats
Carousell built a cross-platform, server-driven UI system that lets them iterate on business logic daily without shipping new app versions.
About This Article
Carousell's classifieds platform had a standardization problem. Listings across categories like iPhones, jobs, and properties used inconsistent terminology. A buyer looking for an iPhone couldn't filter by storage size, and someone searching for rentals might see '4bedrm' in one listing and '3+1' in another. This made it hard for buyers to find what they wanted.
Siaw Young's team built fieldsets, a declarative markup language that sits above HTML. It specifies component behavior and data validations the same way across iOS, Android, and web without needing client updates.
Fieldsets let Carousell support thousands of categories that update daily without releasing new app versions. Sell forms, search filters, and listing details pages now adapt automatically based on server configuration instead of hardcoded logic.