How Javascript Proxies and Symbols are useful?

At Juspay, our products, especially the Payment Page, are built with a config-driven UI approach. This means that every element on the page, from the button colors to the layout of the components, is controlled by configurations. While this flexibility allows merchants to customize their payment pages according to their need and brand, managing these configurations manually can become a tedious task, especially for non-technical users.

The Challenge we had was: How can we make it easier for merchants to visually customize their payment pages without them having to dig into raw config files? Our goal is to allow direct editing of the UI, just like in Wix, merchants can tweak the look and feel of their pages, and those changes automatically sync with the underlying configuration.

Photo by russn_fckr on Unsplash

Some additional background info:

At Juspay, we use our own in-house UI framework called purs-react, which is built on top of React’s reconciler. However, it uses a custom renderer, Presto UI, that ensures the code runs across all three platforms — web, Android, and iOS (just like react native)

Since most readers might not be familiar with PureScript or purs-react, I'll use React examples to explain the concepts. But remember, the core ideas remain the same and are applicable to any framework.