LiveArchitecture

Multi-Tenant SaaS Platform UI

Built a fully white-label, multi-tenant SaaS platform with dynamic theming, role-based UI customization, and a drag-and-drop dashboard builder.

CompanyZoho

RoleFrontend Engineer

Year2020

Tech Stack

Vue 3Nuxt 3PiniaCSS VariablesCanvas APINode.js

Impact

clients500+ enterprise clients

tenantsUnlimited tenants

customizationFull white-label

The Problem

500+ enterprise clients needed different branding, custom feature sets, and data isolation, but the existing single-tenant architecture could not scale to support them.

The Solution

Built a dynamic theming system using CSS custom properties, RBAC-driven component rendering, and a drag-and-drop dashboard builder that generated persisted layouts per tenant.

Architecture

Nuxt 3 with server-side tenant resolution, dynamic CSS variable injection, and a configuration-driven rendering system that showed/hid UI elements based on tenant permissions.

Key Challenges

CSS isolation between tenant themes
Performance under 500+ tenant configurations
Drag-and-drop with complex nested layouts

Results & Impact

500+ enterprise clients onboarded

Tenant onboarding: 2 weeks → 2 hours

Zero CSS bleed between tenants

Dashboard builder adopted by 94% of clients