How to share state between parent page and viewport components in UI Builder?

[justinjaeck]

Hi everyone,

I'm currently working on a project using UI Builder and I'm trying to create reusable components.
To achieve this, I created a Collection Page where each sub-page contains one of my components (created directly in UI Builder, not via the CLI).

On my main project page, I use Viewports to display these components.

My main challenge now is:
👉 How can I share a common state between the parent page and the sub-pages loaded inside the Viewports?

For example:
One of my components is a customized textarea. I would like the state that holds the value of this textarea (inside the Viewport) to be accessible and modifiable from the parent page — in other words, I need two-way binding or synchronized state between parent and child.

I found this interesting discussion:
How do viewport tabs communicate with each other?

Here’s what I’ve tried so far:

• I created a property dataToChild on the parent page.

• I created a state dataToChild on the parent page with the initial value "Test".

• I attempted to bind the state to the property, but oddly, the state did not appear in the binding dropdown. Possibly a refresh issue or a UI glitch? I manually set the binding to @STate.dataToChild.

• On the collection page (component page), I added a property dataFromParent and bound it to @context.props.dataToChild.

• As a simple test, my component only contains a Stylized Text bound to the dataFromParent property.

However, the value from the parent page ("Test") does not display in the Stylized Text inside the viewport.

To rule out any issue related to state binding, I also tried assigning a simple static value (for example "Test") directly to the property instead of binding a state, but still, nothing displayed.

Has anyone faced this issue or found a proper way to pass state from a parent page to a component inside a Viewport?

Any guidance or best practices would be greatly appreciated.

Thank you!