Arafat Sulaiman

2026-09-21

Building a real-time color configurator in Next.js

Keep configurator state in the client, derive CSS variables, and avoid round-trips until checkout.

The HIMBA tumbler work is a client-side color state problem, not a CMS problem.

Hold the selected color in React state. Map it to CSS custom properties on the product SVG or canvas. Persist the SKU only when the visitor checks out.

That keeps interaction under 16 ms on the main thread for a simple palette, and it deploys as a static Next.js export on Cloudflare Pages.

All notes