diff --git a/examples/src/examples/animation/blend-trees-1d.controls.mjs b/examples/src/examples/animation/blend-trees-1d.controls.mjs
index 23ae4e4eaa0..4e037f8cda1 100644
--- a/examples/src/examples/animation/blend-trees-1d.controls.mjs
+++ b/examples/src/examples/animation/blend-trees-1d.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx }) {
+export const controls = ({ observer, ReactPCUI, React, jsx }) => {
     const { BindingTwoWay, LabelGroup, SliderInput } = ReactPCUI;
     class JsxControls extends React.Component {
         render() {
@@ -15,4 +15,4 @@ export function controls({ observer, ReactPCUI, React, jsx }) {
         }
     }
     return jsx(JsxControls);
-}
+};
diff --git a/examples/src/examples/animation/blend-trees-2d-cartesian.controls.mjs b/examples/src/examples/animation/blend-trees-2d-cartesian.controls.mjs
index 935becd36b8..8bd8c440469 100644
--- a/examples/src/examples/animation/blend-trees-2d-cartesian.controls.mjs
+++ b/examples/src/examples/animation/blend-trees-2d-cartesian.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ React, jsx, fragment }) {
+export const controls = ({ React, jsx, fragment }) => {
     const { createRef, Component } = React;
     class JsxControls extends Component {
         position = new pc.Vec2();
@@ -140,4 +140,4 @@ export function controls({ React, jsx, fragment }) {
         }
     }
     return jsx(JsxControls);
-}
+};
diff --git a/examples/src/examples/animation/blend-trees-2d-directional.controls.mjs b/examples/src/examples/animation/blend-trees-2d-directional.controls.mjs
index ceacf7e03b0..8a4ba4f364f 100644
--- a/examples/src/examples/animation/blend-trees-2d-directional.controls.mjs
+++ b/examples/src/examples/animation/blend-trees-2d-directional.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ React, jsx, fragment }) {
+export const controls = ({ React, jsx, fragment }) => {
     const { useEffect, useRef } = React;
     /** @type {React.MutableRefObject<HTMLCanvasElement>} */
     const canvasRef = useRef(null);
@@ -80,4 +80,4 @@ export function controls({ React, jsx, fragment }) {
         canvas.addEventListener('mousedown', mouseEvent);
     });
     return fragment(jsx('canvas', { ref: canvasRef }));
-}
+};
diff --git a/examples/src/examples/animation/component-properties.controls.mjs b/examples/src/examples/animation/component-properties.controls.mjs
index 8a89a6d9e40..a8d0ce201b0 100644
--- a/examples/src/examples/animation/component-properties.controls.mjs
+++ b/examples/src/examples/animation/component-properties.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { Button } = ReactPCUI;
     return fragment(
         jsx(Button, {
@@ -12,4 +12,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             }
         })
     );
-}
+};
diff --git a/examples/src/examples/animation/layer-masks.controls.mjs b/examples/src/examples/animation/layer-masks.controls.mjs
index 35e4f4482e0..1854343988e 100644
--- a/examples/src/examples/animation/layer-masks.controls.mjs
+++ b/examples/src/examples/animation/layer-masks.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, BooleanInput, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -98,4 +98,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/animation/locomotion.controls.mjs b/examples/src/examples/animation/locomotion.controls.mjs
index ba29faeab1c..d09e74c8bcc 100644
--- a/examples/src/examples/animation/locomotion.controls.mjs
+++ b/examples/src/examples/animation/locomotion.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, BooleanInput, Button } = ReactPCUI;
     const binding = new BindingTwoWay();
     const link = {
@@ -26,4 +26,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             })
         )
     );
-}
+};
diff --git a/examples/src/examples/camera/multi.controls.mjs b/examples/src/examples/camera/multi.controls.mjs
index fbf620c12f2..eb302779c3d 100644
--- a/examples/src/examples/camera/multi.controls.mjs
+++ b/examples/src/examples/camera/multi.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, BooleanInput, SliderInput } = ReactPCUI;
 
     return fragment(
@@ -146,4 +146,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/gizmos/transform-rotate.controls.mjs b/examples/src/examples/gizmos/transform-rotate.controls.mjs
index ea1f62f5685..77346ef3d2c 100644
--- a/examples/src/examples/gizmos/transform-rotate.controls.mjs
+++ b/examples/src/examples/gizmos/transform-rotate.controls.mjs
@@ -4,10 +4,11 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
+    const { useState } = React;
 
-    const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
 
     return fragment(
         jsx(
@@ -176,4 +177,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                 )
         )
     );
-}
+};
diff --git a/examples/src/examples/gizmos/transform-scale.controls.mjs b/examples/src/examples/gizmos/transform-scale.controls.mjs
index aaae894d137..c2c5cfaca5c 100644
--- a/examples/src/examples/gizmos/transform-scale.controls.mjs
+++ b/examples/src/examples/gizmos/transform-scale.controls.mjs
@@ -4,10 +4,11 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
+    const { useState } = React;
 
-    const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
 
     return fragment(
         jsx(
@@ -198,4 +199,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                 )
         )
     );
-}
+};
diff --git a/examples/src/examples/gizmos/transform-translate.controls.mjs b/examples/src/examples/gizmos/transform-translate.controls.mjs
index 69e75853f3c..9062ce43536 100644
--- a/examples/src/examples/gizmos/transform-translate.controls.mjs
+++ b/examples/src/examples/gizmos/transform-translate.controls.mjs
@@ -4,10 +4,11 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
+    const { useState } = React;
 
-    const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
 
     return fragment(
         jsx(
@@ -218,4 +219,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                 )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/ambient-occlusion.controls.mjs b/examples/src/examples/graphics/ambient-occlusion.controls.mjs
index 56ec60a4487..56f8ee3488a 100644
--- a/examples/src/examples/graphics/ambient-occlusion.controls.mjs
+++ b/examples/src/examples/graphics/ambient-occlusion.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -95,4 +95,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/asset-viewer.controls.mjs b/examples/src/examples/graphics/asset-viewer.controls.mjs
index ed9e31e63cc..dd4914d26f6 100644
--- a/examples/src/examples/graphics/asset-viewer.controls.mjs
+++ b/examples/src/examples/graphics/asset-viewer.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { Panel, Button } = ReactPCUI;
     return jsx(
         Panel,
@@ -16,4 +16,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             onClick: () => observer.emit('next')
         })
     );
-}
+};
diff --git a/examples/src/examples/graphics/clustered-area-lights.controls.mjs b/examples/src/examples/graphics/clustered-area-lights.controls.mjs
index dd43cb49a11..6a740bc3fcb 100644
--- a/examples/src/examples/graphics/clustered-area-lights.controls.mjs
+++ b/examples/src/examples/graphics/clustered-area-lights.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -32,4 +32,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/clustered-omni-shadows.controls.mjs b/examples/src/examples/graphics/clustered-omni-shadows.controls.mjs
index e12df4dd523..febdc1d3173 100644
--- a/examples/src/examples/graphics/clustered-omni-shadows.controls.mjs
+++ b/examples/src/examples/graphics/clustered-omni-shadows.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return jsx(
         Panel,
@@ -55,4 +55,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             })
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/clustered-spot-shadows.controls.mjs b/examples/src/examples/graphics/clustered-spot-shadows.controls.mjs
index ddf2954e9e9..91d9350df1f 100644
--- a/examples/src/examples/graphics/clustered-spot-shadows.controls.mjs
+++ b/examples/src/examples/graphics/clustered-spot-shadows.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, Button, Label, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -138,4 +138,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/contact-hardening-shadows.controls.mjs b/examples/src/examples/graphics/contact-hardening-shadows.controls.mjs
index b68b0c7b22c..53f4b8ee661 100644
--- a/examples/src/examples/graphics/contact-hardening-shadows.controls.mjs
+++ b/examples/src/examples/graphics/contact-hardening-shadows.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -163,4 +163,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/dithered-transparency.controls.mjs b/examples/src/examples/graphics/dithered-transparency.controls.mjs
index 7c50be3a3cf..7c68c9051b5 100644
--- a/examples/src/examples/graphics/dithered-transparency.controls.mjs
+++ b/examples/src/examples/graphics/dithered-transparency.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SliderInput, BooleanInput, SelectInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -62,4 +62,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/ground-fog.controls.mjs b/examples/src/examples/graphics/ground-fog.controls.mjs
index 04f7c35faaf..2f95835aa8f 100644
--- a/examples/src/examples/graphics/ground-fog.controls.mjs
+++ b/examples/src/examples/graphics/ground-fog.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup } = ReactPCUI;
     return jsx(
         LabelGroup,
@@ -16,4 +16,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             }
         })
     );
-}
+};
diff --git a/examples/src/examples/graphics/integer-textures.controls.mjs b/examples/src/examples/graphics/integer-textures.controls.mjs
index f80ed7aec21..a76de55caa1 100644
--- a/examples/src/examples/graphics/integer-textures.controls.mjs
+++ b/examples/src/examples/graphics/integer-textures.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
     const { BindingTwoWay, Container, Button, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
 
     return fragment(
@@ -47,4 +47,4 @@ export function controls({ observer, ReactPCUI, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/light-physical-units.controls.mjs b/examples/src/examples/graphics/light-physical-units.controls.mjs
index c0d533aa40a..0775c8c043d 100644
--- a/examples/src/examples/graphics/light-physical-units.controls.mjs
+++ b/examples/src/examples/graphics/light-physical-units.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -132,4 +132,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/lights-baked-a-o.controls.mjs b/examples/src/examples/graphics/lights-baked-a-o.controls.mjs
index 1efe64834c5..d878a7a2321 100644
--- a/examples/src/examples/graphics/lights-baked-a-o.controls.mjs
+++ b/examples/src/examples/graphics/lights-baked-a-o.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, Label, LabelGroup, Panel, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -186,4 +186,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/lights.controls.mjs b/examples/src/examples/graphics/lights.controls.mjs
index 7c68ad3608c..21de0d6df7f 100644
--- a/examples/src/examples/graphics/lights.controls.mjs
+++ b/examples/src/examples/graphics/lights.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -109,4 +109,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/multi-view.controls.mjs b/examples/src/examples/graphics/multi-view.controls.mjs
index d2369b8b52a..d6e7917cdc4 100644
--- a/examples/src/examples/graphics/multi-view.controls.mjs
+++ b/examples/src/examples/graphics/multi-view.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SelectInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -34,4 +34,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/particles-mesh.controls.mjs b/examples/src/examples/graphics/particles-mesh.controls.mjs
index 1efa58a615a..e1afd7b8136 100644
--- a/examples/src/examples/graphics/particles-mesh.controls.mjs
+++ b/examples/src/examples/graphics/particles-mesh.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SliderInput, BooleanInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -59,4 +59,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/post-effects.controls.mjs b/examples/src/examples/graphics/post-effects.controls.mjs
index 1f9b2e44b80..44b7f69cc37 100644
--- a/examples/src/examples/graphics/post-effects.controls.mjs
+++ b/examples/src/examples/graphics/post-effects.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -192,4 +192,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/post-processing.controls.mjs b/examples/src/examples/graphics/post-processing.controls.mjs
index d1d3d3c3a0a..4bac61b5ae5 100644
--- a/examples/src/examples/graphics/post-processing.controls.mjs
+++ b/examples/src/examples/graphics/post-processing.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -248,4 +248,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/reflection-box.controls.mjs b/examples/src/examples/graphics/reflection-box.controls.mjs
index 453139f746c..c9c1fcbcabd 100644
--- a/examples/src/examples/graphics/reflection-box.controls.mjs
+++ b/examples/src/examples/graphics/reflection-box.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -69,4 +69,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/shader-hatch.controls.mjs b/examples/src/examples/graphics/shader-hatch.controls.mjs
index a8145c130ca..b0b183a24f7 100644
--- a/examples/src/examples/graphics/shader-hatch.controls.mjs
+++ b/examples/src/examples/graphics/shader-hatch.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SliderInput, BooleanInput, SelectInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -69,4 +69,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/shadow-cascades.controls.mjs b/examples/src/examples/graphics/shadow-cascades.controls.mjs
index eb4a2bd4617..4af6a60798a 100644
--- a/examples/src/examples/graphics/shadow-cascades.controls.mjs
+++ b/examples/src/examples/graphics/shadow-cascades.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -83,4 +83,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/sky.controls.mjs b/examples/src/examples/graphics/sky.controls.mjs
index 4b1123293dc..7ccf8549807 100644
--- a/examples/src/examples/graphics/sky.controls.mjs
+++ b/examples/src/examples/graphics/sky.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, VectorInput, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -93,4 +93,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/taa.controls.mjs b/examples/src/examples/graphics/taa.controls.mjs
index 40ce9c146ee..50d0a3ce918 100644
--- a/examples/src/examples/graphics/taa.controls.mjs
+++ b/examples/src/examples/graphics/taa.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -65,4 +65,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/texture-array.controls.mjs b/examples/src/examples/graphics/texture-array.controls.mjs
index abe304ee53c..56129ac6ecc 100644
--- a/examples/src/examples/graphics/texture-array.controls.mjs
+++ b/examples/src/examples/graphics/texture-array.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, BooleanInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -22,4 +22,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/loaders/gltf-export.controls.mjs b/examples/src/examples/loaders/gltf-export.controls.mjs
index 638f70a1d03..4424162fc4b 100644
--- a/examples/src/examples/loaders/gltf-export.controls.mjs
+++ b/examples/src/examples/loaders/gltf-export.controls.mjs
@@ -2,10 +2,10 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { Button } = ReactPCUI;
     return jsx(Button, {
         text: 'Download GLTF',
         onClick: () => observer.emit('download')
     });
-}
+};
diff --git a/examples/src/examples/loaders/gsplat-many.controls.mjs b/examples/src/examples/loaders/gsplat-many.controls.mjs
index 2976ef5e0be..fcd6174ab62 100644
--- a/examples/src/examples/loaders/gsplat-many.controls.mjs
+++ b/examples/src/examples/loaders/gsplat-many.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { Button } = ReactPCUI;
     return fragment(
         jsx(Button, {
@@ -12,4 +12,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             }
         })
     );
-}
+};
diff --git a/examples/src/examples/loaders/usdz-export.controls.mjs b/examples/src/examples/loaders/usdz-export.controls.mjs
index 2ea6247a9ff..9ad2ef4a2f3 100644
--- a/examples/src/examples/loaders/usdz-export.controls.mjs
+++ b/examples/src/examples/loaders/usdz-export.controls.mjs
@@ -2,10 +2,10 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { Button } = ReactPCUI;
     return jsx(Button, {
         text: 'Download USDZ',
         onClick: () => observer.emit('download')
     });
-}
+};
diff --git a/examples/src/examples/misc/editor.controls.mjs b/examples/src/examples/misc/editor.controls.mjs
index 529db36d190..64ed57e3689 100644
--- a/examples/src/examples/misc/editor.controls.mjs
+++ b/examples/src/examples/misc/editor.controls.mjs
@@ -4,17 +4,35 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
+    const { useState } = React;
 
-    const [type, setType] = React.useState('translate');
-    const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
+    const [type, setType] = useState('translate');
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
 
-    // @ts-ignore
-    window.setType = (/** @type {string} */ value) => setType(value);
-
-    // @ts-ignore
-    window.setProj = (/** @type {number} */ value) => setProj(value);
+    // observe changes to the camera and gizmo type
+    observer.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
+        const [category, key] = path.split('.');
+        switch (category) {
+            case 'camera': {
+                switch (key) {
+                    case 'proj':
+                        setType(value);
+                        break;
+                }
+                break;
+            }
+            case 'gizmo': {
+                switch (key) {
+                    case 'type':
+                        setType(value);
+                        break;
+                }
+                break;
+            }
+        }
+    });
 
     return fragment(
         jsx(
@@ -98,4 +116,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                 )
         )
     );
-}
+};
diff --git a/examples/src/examples/misc/editor.example.mjs b/examples/src/examples/misc/editor.example.mjs
index 851959c20b2..0b70e37a5eb 100644
--- a/examples/src/examples/misc/editor.example.mjs
+++ b/examples/src/examples/misc/editor.example.mjs
@@ -168,22 +168,6 @@ const resize = () => {
 window.addEventListener('resize', resize);
 resize();
 
-// wrappers for control state changes
-const setType = (/** @type {string} */ value) => {
-    data.set('gizmo.type', value);
-
-    // call method from top context (same as controls)
-    // @ts-ignore
-    window.top.setType?.(value);
-};
-const setProj = (/** @type {number} */ value) => {
-    data.set('camera.proj', value + 1);
-
-    // call method from top context (same as controls)
-    // @ts-ignore
-    window.top.setProj?.(value);
-};
-
 // key event handlers
 const keydown = (/** @type {KeyboardEvent} */ e) => {
     gizmoHandler.gizmo.snap = !!e.shiftKey;
@@ -199,19 +183,19 @@ const keypress = (/** @type {KeyboardEvent} */ e) => {
             data.set('gizmo.coordSpace', data.get('gizmo.coordSpace') === 'world' ? 'local' : 'world');
             break;
         case '1':
-            setType('translate');
+            data.set('gizmo.type', 'translate');
             break;
         case '2':
-            setType('rotate');
+            data.set('gizmo.type', 'rotate');
             break;
         case '3':
-            setType('scale');
+            data.set('gizmo.type', 'scale');
             break;
         case 'p':
-            setProj(pc.PROJECTION_PERSPECTIVE);
+            data.set('camera.proj', pc.PROJECTION_PERSPECTIVE + 1);
             break;
         case 'o':
-            setProj(pc.PROJECTION_ORTHOGRAPHIC);
+            data.set('camera.proj', pc.PROJECTION_ORTHOGRAPHIC + 1);
             break;
     }
 };
diff --git a/examples/src/examples/misc/multi-app.controls.mjs b/examples/src/examples/misc/multi-app.controls.mjs
index b228940402c..79282ba700a 100644
--- a/examples/src/examples/misc/multi-app.controls.mjs
+++ b/examples/src/examples/misc/multi-app.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, Panel, Label, Button } = ReactPCUI;
     return fragment(
         jsx(
@@ -57,4 +57,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             })
         )
     );
-}
+};