diff --git a/examples/02_gui.py b/examples/02_gui.py
index 7825fcae5..efc51ef3f 100644
--- a/examples/02_gui.py
+++ b/examples/02_gui.py
@@ -16,7 +16,7 @@ def main():
     with server.add_gui_folder("Read-only"):
         gui_counter = server.add_gui_number(
             "Counter",
-            initial_value=0,
+            value=0,
             disabled=True,
         )
 
@@ -25,38 +25,38 @@ def main():
             min=0,
             max=100,
             step=1,
-            initial_value=0,
+            value=0,
             disabled=True,
         )
 
     with server.add_gui_folder("Editable"):
         gui_vector2 = server.add_gui_vector2(
             "Position",
-            initial_value=(0.0, 0.0),
+            value=(0.0, 0.0),
             step=0.1,
         )
         gui_vector3 = server.add_gui_vector3(
             "Size",
-            initial_value=(1.0, 1.0, 1.0),
+            value=(1.0, 1.0, 1.0),
             step=0.25,
         )
         with server.add_gui_folder("Text toggle"):
             gui_checkbox_hide = server.add_gui_checkbox(
                 "Hide",
-                initial_value=False,
+                value=False,
             )
             gui_text = server.add_gui_text(
                 "Text",
-                initial_value="Hello world",
+                value="Hello world",
             )
             gui_button = server.add_gui_button("Button")
             gui_checkbox_disable = server.add_gui_checkbox(
                 "Disable",
-                initial_value=False,
+                value=False,
             )
             gui_rgb = server.add_gui_rgb(
                 "Color",
-                initial_value=(255, 255, 0),
+                value=(255, 255, 0),
             )
 
     # Pre-generate a point cloud to send.
diff --git a/src/viser/_gui_api.py b/src/viser/_gui_api.py
index 16b188fa3..b21d94a2a 100644
--- a/src/viser/_gui_api.py
+++ b/src/viser/_gui_api.py
@@ -4,6 +4,28 @@
 # - https://github.com/python/mypy/issues/12554
 from __future__ import annotations
 
+
+from dataclasses import field, InitVar
+from functools import wraps
+import time
+from typing import Optional, Literal, Union, TypeVar, Generic, Tuple, Type
+from typing import Callable, Any
+from dataclasses import dataclass
+try:
+    from typing import Concatenate
+except ImportError:
+    from typing_extensions import Concatenate
+try:
+    from typing import Protocol
+except ImportError:
+    from typing_extensions import Protocol
+try:
+    from typing import ParamSpec
+except ImportError:
+    from typing_extensions import ParamSpec
+from ._gui_components import GuiApiMixin
+
+
 import abc
 import dataclasses
 import threading
@@ -45,6 +67,7 @@
 from ._icons import base64_from_icon
 from ._icons_enum import Icon
 from ._message_api import MessageApi, cast_vector
+from ._gui_components import Property
 
 if TYPE_CHECKING:
     from .infra import ClientId
@@ -52,6 +75,9 @@
 IntOrFloat = TypeVar("IntOrFloat", int, float)
 TString = TypeVar("TString", bound=str)
 TLiteralString = TypeVar("TLiteralString", bound=LiteralString)
+TProps = TypeVar("TProps")
+TReturn = TypeVar('TReturn')
+TArgs = ParamSpec('TArgs')
 T = TypeVar("T")
 
 
@@ -106,7 +132,86 @@ def _apply_default_order(order: Optional[float]) -> float:
     return _global_order_counter
 
 
-class GuiApi(abc.ABC):
+
+class ComponentHandle(Generic[TProps]):
+    _id: str
+    _props: TProps
+    _gui_api: 'GuiApi'
+    _update_timestamp: float
+    _container_id: str
+    _backup_container_id: Optional[str] = None
+
+    def __init__(self, gui_api: 'GuiApi', id: str, props: TProps):
+        self._id = id
+        self._props = props
+        self._gui_api = gui_api
+        self._update_timestamp = time.time()
+        self._container_id = gui_api._get_container_id()
+        props._order = _apply_default_order(props._order)
+        self._register()
+
+    def _register(self):
+        self._gui_api._get_api()._queue(_messages.GuiAddComponentMessage(
+            order=self.order,
+            id=self.id,
+            props=self._props,
+            container_id=self._container_id,
+        ))
+
+    @property
+    def id(self):
+        return self._id
+
+    def __enter__(self):
+        self._backup_container_id = self._gui_api._get_container_id()
+        self._gui_api._set_container_id(self.id)
+        return self
+
+    def __exit__(self, exc_type, exc_value, traceback):
+        self._gui_api._set_container_id(self._backup_container_id)
+        return None
+
+    def _update(self, **kwargs):
+        for k, v in kwargs.items():
+            if not hasattr(self._props, k):
+                raise AttributeError(f"Component has no property {k}")
+            setattr(self._props, k, v)
+        self._update_timestamp = time.time()
+
+        # Raise message to update component.
+        self._gui_api._get_api()._queue(_messages.GuiUpdateComponentMessage(id=id, **kwargs))
+
+    def property(self, name: str) -> Property[T]:
+        props = object.__getattribute__(self, "_props")
+        update = object.__getattribute__(self, "_update")
+        if not hasattr(props, name):
+            raise AttributeError(f"Component has no property {name}")
+        return Property(
+            lambda: getattr(props, name),
+            lambda value: update(**{name: value}),
+        )
+
+    def __getattr__(self, name: str) -> T:
+        if not hasattr(ComponentHandle, name):
+            props = object.__getattribute__(self, "_props")
+            if hasattr(props, name):
+                return self.property(name).get()
+            else:
+                raise AttributeError(f"Component has no property {name}")
+        return super().__getattribute__(name)
+
+    def __setattr__(self, __name: str, __value: Any) -> None:
+        if hasattr(self, "_props"):
+            props = object.__getattribute__(self, "_props")
+            if hasattr(props, __name):
+                return self.property(__name).set(__value)
+        return super().__setattr__(__name, __value)
+
+
+
+
+
+class GuiApi(abc.ABC, GuiApiMixin):
     _target_container_from_thread_id: Dict[int, str] = {}
     """ID of container to put GUI elements into."""
 
@@ -129,44 +234,44 @@ def _handle_gui_updates(
         if handle is None:
             return
 
-        handle_state = handle._impl
-
-        # Do some type casting. This is necessary when we expect floats but the
-        # Javascript side gives us integers.
-        if handle_state.typ is tuple:
-            assert len(message.value) == len(handle_state.value)
-            value = tuple(
-                type(handle_state.value[i])(message.value[i])
-                for i in range(len(message.value))
-            )
-        else:
-            value = handle_state.typ(message.value)
-
-        # Only call update when value has actually changed.
-        if not handle_state.is_button and value == handle_state.value:
-            return
-
-        # Update state.
-        with self._get_api()._atomic_lock:
-            handle_state.value = value
-            handle_state.update_timestamp = time.time()
-
-        # Trigger callbacks.
-        for cb in handle_state.update_cb:
-            from ._viser import ClientHandle, ViserServer
-
-            # Get the handle of the client that triggered this event.
-            api = self._get_api()
-            if isinstance(api, ClientHandle):
-                client = api
-            elif isinstance(api, ViserServer):
-                client = api.get_clients()[client_id]
-            else:
-                assert False
-
-            cb(GuiEvent(client, client_id, handle))
-        if handle_state.sync_cb is not None:
-            handle_state.sync_cb(client_id, value)
+        # handle_state = handle._impl
+
+        # # Do some type casting. This is necessary when we expect floats but the
+        # # Javascript side gives us integers.
+        # if handle_state.typ is tuple:
+        #     assert len(message.value) == len(handle_state.value)
+        #     value = tuple(
+        #         type(handle_state.value[i])(message.value[i])
+        #         for i in range(len(message.value))
+        #     )
+        # else:
+        #     value = handle_state.typ(message.value)
+
+        # # Only call update when value has actually changed.
+        # if not handle_state.is_button and value == handle_state.value:
+        #     return
+
+        # # Update state.
+        # with self._get_api()._atomic_lock:
+        #     handle_state.value = value
+        #     handle_state.update_timestamp = time.time()
+
+        # # Trigger callbacks.
+        # for cb in handle_state.update_cb:
+        #     from ._viser import ClientHandle, ViserServer
+
+        #     # Get the handle of the client that triggered this event.
+        #     api = self._get_api()
+        #     if isinstance(api, ClientHandle):
+        #         client = api
+        #     elif isinstance(api, ViserServer):
+        #         client = api.get_clients()[client_id]
+        #     else:
+        #         assert False
+
+        #     cb(GuiEvent(client, client_id, handle))
+        # if handle_state.sync_cb is not None:
+        #     handle_state.sync_cb(client_id, value)
 
     def _get_container_id(self) -> str:
         """Get container ID associated with the current thread."""
@@ -181,803 +286,11 @@ def _get_api(self) -> MessageApi:
         """Message API to use."""
         ...
 
-    if not TYPE_CHECKING:
-
-        def gui_folder(self, label: str) -> GuiFolderHandle:
-            """Deprecated."""
-            warnings.warn(
-                "gui_folder() is deprecated. Use add_gui_folder() instead!",
-                stacklevel=2,
-            )
-            return self.add_gui_folder(label)
-
-    def add_gui_folder(
-        self,
-        label: str,
-        order: Optional[float] = None,
-        expand_by_default: bool = True,
-    ) -> GuiFolderHandle:
-        """Add a folder, and return a handle that can be used to populate it.
-
-        Args:
-            label: Label to display on the folder.
-            order: Optional ordering, smallest values will be displayed first.
-            expand_by_default: Open the folder by default. Set to False to collapse it by
-                default.
-
-        Returns:
-            A handle that can be used as a context to populate the folder.
-        """
-        folder_container_id = _make_unique_id()
-        order = _apply_default_order(order)
-        self._get_api()._queue(
-            _messages.GuiAddFolderMessage(
-                order=order,
-                id=folder_container_id,
-                label=label,
-                container_id=self._get_container_id(),
-                expand_by_default=expand_by_default,
-            )
-        )
-        return GuiFolderHandle(
-            _gui_api=self,
-            _id=folder_container_id,
-            _parent_container_id=self._get_container_id(),
-            _order=order,
-        )
-
-    def add_gui_modal(
-        self,
-        title: str,
-        order: Optional[float] = None,
-    ) -> GuiModalHandle:
-        """Show a modal window, which can be useful for popups and messages, then return
-        a handle that can be used to populate it.
-
-        Args:
-            title: Title to display on the modal.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used as a context to populate the modal.
-        """
-        modal_container_id = _make_unique_id()
-        order = _apply_default_order(order)
-        self._get_api()._queue(
-            _messages.GuiModalMessage(
-                order=order,
-                id=modal_container_id,
-                title=title,
-            )
-        )
-        return GuiModalHandle(
-            _gui_api=self,
-            _id=modal_container_id,
-        )
-
-    def add_gui_tab_group(
-        self,
-        order: Optional[float] = None,
-    ) -> GuiTabGroupHandle:
-        """Add a tab group.
-
-        Args:
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used as a context to populate the tab group.
-        """
-        tab_group_id = _make_unique_id()
-        order = _apply_default_order(order)
-        return GuiTabGroupHandle(
-            _tab_group_id=tab_group_id,
-            _labels=[],
-            _icons_base64=[],
-            _tabs=[],
-            _gui_api=self,
-            _container_id=self._get_container_id(),
-            _order=order,
-        )
-
-    def add_gui_markdown(
-        self,
-        content: str,
-        image_root: Optional[Path] = None,
-        order: Optional[float] = None,
-    ) -> GuiMarkdownHandle:
-        """Add markdown to the GUI.
-
-        Args:
-            content: Markdown content to display.
-            image_root: Optional root directory to resolve relative image paths.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-        handle = GuiMarkdownHandle(
-            _gui_api=self,
-            _id=_make_unique_id(),
-            _visible=True,
-            _container_id=self._get_container_id(),
-            _order=_apply_default_order(order),
-            _image_root=image_root,
-            _content=None,
-        )
-
-        # Assigning content will send a GuiAddMarkdownMessage.
-        handle.content = content
-        return handle
-
-    def add_gui_button(
-        self,
-        label: str,
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        color: Optional[
-            Literal[
-                "dark",
-                "gray",
-                "red",
-                "pink",
-                "grape",
-                "violet",
-                "indigo",
-                "blue",
-                "cyan",
-                "green",
-                "lime",
-                "yellow",
-                "orange",
-                "teal",
-            ]
-        ] = None,
-        icon: Optional[Icon] = None,
-        order: Optional[float] = None,
-    ) -> GuiButtonHandle:
-        """Add a button to the GUI. The value of this input is set to `True` every time
-        it is clicked; to detect clicks, we can manually set it back to `False`.
-
-        Args:
-            label: Label to display on the button.
-            visible: Whether the button is visible.
-            disabled: Whether the button is disabled.
-            hint: Optional hint to display on hover.
-            color: Optional color to use for the button.
-            icon: Optional icon to display on the button.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-
-        # Re-wrap the GUI handle with a button interface.
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-        return GuiButtonHandle(
-            self._create_gui_input(
-                initial_value=False,
-                message=_messages.GuiAddButtonMessage(
-                    order=order,
-                    id=id,
-                    label=label,
-                    container_id=self._get_container_id(),
-                    hint=hint,
-                    initial_value=False,
-                    color=color,
-                    icon_base64=None if icon is None else base64_from_icon(icon),
-                ),
-                disabled=disabled,
-                visible=visible,
-                is_button=True,
-            )._impl
-        )
-
-    # The TLiteralString overload tells pyright to resolve the value type to a Literal
-    # whenever possible.
-    #
-    # TString is helpful when the input types are generic (could be str, could be
-    # Literal).
-    @overload
-    def add_gui_button_group(
-        self,
-        label: str,
-        options: Sequence[TLiteralString],
-        visible: bool = True,
-        disabled: bool = False,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiButtonGroupHandle[TLiteralString]:
-        ...
-
-    @overload
-    def add_gui_button_group(
-        self,
-        label: str,
-        options: Sequence[TString],
-        visible: bool = True,
-        disabled: bool = False,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiButtonGroupHandle[TString]:
-        ...
-
-    def add_gui_button_group(
-        self,
-        label: str,
-        options: Sequence[TLiteralString] | Sequence[TString],
-        visible: bool = True,
-        disabled: bool = False,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiButtonGroupHandle[Any]:  # Return types are specified in overloads.
-        """Add a button group to the GUI.
-
-        Args:
-            label: Label to display on the button group.
-            options: Sequence of options to display as buttons.
-            visible: Whether the button group is visible.
-            disabled: Whether the button group is disabled.
-            hint: Optional hint to display on hover.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-        initial_value = options[0]
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-        return GuiButtonGroupHandle(
-            self._create_gui_input(
-                initial_value,
-                message=_messages.GuiAddButtonGroupMessage(
-                    order=order,
-                    id=id,
-                    label=label,
-                    container_id=self._get_container_id(),
-                    hint=hint,
-                    initial_value=initial_value,
-                    options=tuple(options),
-                ),
-                disabled=disabled,
-                visible=visible,
-            )._impl,
-        )
-
-    def add_gui_checkbox(
-        self,
-        label: str,
-        initial_value: bool,
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiInputHandle[bool]:
-        """Add a checkbox to the GUI.
-
-        Args:
-            label: Label to display on the checkbox.
-            initial_value: Initial value of the checkbox.
-            disabled: Whether the checkbox is disabled.
-            visible: Whether the checkbox is visible.
-            hint: Optional hint to display on hover.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-        assert isinstance(initial_value, bool)
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-        return self._create_gui_input(
-            initial_value,
-            message=_messages.GuiAddCheckboxMessage(
-                order=order,
-                id=id,
-                label=label,
-                container_id=self._get_container_id(),
-                hint=hint,
-                initial_value=initial_value,
-            ),
-            disabled=disabled,
-            visible=visible,
-        )
-
-    def add_gui_text(
-        self,
-        label: str,
-        initial_value: str,
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiInputHandle[str]:
-        """Add a text input to the GUI.
-
-        Args:
-            label: Label to display on the text input.
-            initial_value: Initial value of the text input.
-            disabled: Whether the text input is disabled.
-            visible: Whether the text input is visible.
-            hint: Optional hint to display on hover.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-        assert isinstance(initial_value, str)
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-        return self._create_gui_input(
-            initial_value,
-            message=_messages.GuiAddTextMessage(
-                order=order,
-                id=id,
-                label=label,
-                container_id=self._get_container_id(),
-                hint=hint,
-                initial_value=initial_value,
-            ),
-            disabled=disabled,
-            visible=visible,
-        )
-
-    def add_gui_number(
-        self,
-        label: str,
-        initial_value: IntOrFloat,
-        min: Optional[IntOrFloat] = None,
-        max: Optional[IntOrFloat] = None,
-        step: Optional[IntOrFloat] = None,
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiInputHandle[IntOrFloat]:
-        """Add a number input to the GUI, with user-specifiable bound and precision parameters.
-
-        Args:
-            label: Label to display on the number input.
-            initial_value: Initial value of the number input.
-            min: Optional minimum value of the number input.
-            max: Optional maximum value of the number input.
-            step: Optional step size of the number input. Computed automatically if not
-                specified.
-            disabled: Whether the number input is disabled.
-            visible: Whether the number input is visible.
-            hint: Optional hint to display on hover.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-
-        assert isinstance(initial_value, (int, float))
-
-        if step is None:
-            # It's ok that `step` is always a float, even if the value is an integer,
-            # because things all become `number` types after serialization.
-            step = float(  # type: ignore
-                onp.min(
-                    [
-                        _compute_step(initial_value),
-                        _compute_step(min),
-                        _compute_step(max),
-                    ]
-                )
-            )
-
-        assert step is not None
-
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-        return self._create_gui_input(
-            initial_value=initial_value,
-            message=_messages.GuiAddNumberMessage(
-                order=order,
-                id=id,
-                label=label,
-                container_id=self._get_container_id(),
-                hint=hint,
-                initial_value=initial_value,
-                min=min,
-                max=max,
-                precision=_compute_precision_digits(step),
-                step=step,
-            ),
-            disabled=disabled,
-            visible=visible,
-            is_button=False,
-        )
-
-    def add_gui_vector2(
-        self,
-        label: str,
-        initial_value: Tuple[float, float] | onp.ndarray,
-        min: Tuple[float, float] | onp.ndarray | None = None,
-        max: Tuple[float, float] | onp.ndarray | None = None,
-        step: Optional[float] = None,
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiInputHandle[Tuple[float, float]]:
-        """Add a length-2 vector input to the GUI.
-
-        Args:
-            label: Label to display on the vector input.
-            initial_value: Initial value of the vector input.
-            min: Optional minimum value of the vector input.
-            max: Optional maximum value of the vector input.
-            step: Optional step size of the vector input. Computed automatically if not
-            disabled: Whether the vector input is disabled.
-            visible: Whether the vector input is visible.
-            hint: Optional hint to display on hover.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-        initial_value = cast_vector(initial_value, 2)
-        min = cast_vector(min, 2) if min is not None else None
-        max = cast_vector(max, 2) if max is not None else None
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-
-        if step is None:
-            possible_steps: List[float] = []
-            possible_steps.extend([_compute_step(x) for x in initial_value])
-            if min is not None:
-                possible_steps.extend([_compute_step(x) for x in min])
-            if max is not None:
-                possible_steps.extend([_compute_step(x) for x in max])
-            step = float(onp.min(possible_steps))
-
-        return self._create_gui_input(
-            initial_value,
-            message=_messages.GuiAddVector2Message(
-                order=order,
-                id=id,
-                label=label,
-                container_id=self._get_container_id(),
-                hint=hint,
-                initial_value=initial_value,
-                min=min,
-                max=max,
-                step=step,
-                precision=_compute_precision_digits(step),
-            ),
-            disabled=disabled,
-            visible=visible,
-        )
-
-    def add_gui_vector3(
-        self,
-        label: str,
-        initial_value: Tuple[float, float, float] | onp.ndarray,
-        min: Tuple[float, float, float] | onp.ndarray | None = None,
-        max: Tuple[float, float, float] | onp.ndarray | None = None,
-        step: Optional[float] = None,
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiInputHandle[Tuple[float, float, float]]:
-        """Add a length-3 vector input to the GUI.
-
-        Args:
-            label: Label to display on the vector input.
-            initial_value: Initial value of the vector input.
-            min: Optional minimum value of the vector input.
-            max: Optional maximum value of the vector input.
-            step: Optional step size of the vector input. Computed automatically if not
-            disabled: Whether the vector input is disabled.
-            visible: Whether the vector input is visible.
-            hint: Optional hint to display on hover.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-        initial_value = cast_vector(initial_value, 2)
-        min = cast_vector(min, 3) if min is not None else None
-        max = cast_vector(max, 3) if max is not None else None
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-
-        if step is None:
-            possible_steps: List[float] = []
-            possible_steps.extend([_compute_step(x) for x in initial_value])
-            if min is not None:
-                possible_steps.extend([_compute_step(x) for x in min])
-            if max is not None:
-                possible_steps.extend([_compute_step(x) for x in max])
-            step = float(onp.min(possible_steps))
-
-        return self._create_gui_input(
-            initial_value,
-            message=_messages.GuiAddVector3Message(
-                order=order,
-                id=id,
-                label=label,
-                container_id=self._get_container_id(),
-                hint=hint,
-                initial_value=initial_value,
-                min=min,
-                max=max,
-                step=step,
-                precision=_compute_precision_digits(step),
-            ),
-            disabled=disabled,
-            visible=visible,
-        )
-
-    # See add_gui_dropdown for notes on overloads.
-    @overload
-    def add_gui_dropdown(
-        self,
-        label: str,
-        options: Sequence[TLiteralString],
-        initial_value: Optional[TLiteralString] = None,
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiDropdownHandle[TLiteralString]:
-        ...
-
-    @overload
-    def add_gui_dropdown(
-        self,
-        label: str,
-        options: Sequence[TString],
-        initial_value: Optional[TString] = None,
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiDropdownHandle[TString]:
-        ...
-
-    def add_gui_dropdown(
-        self,
-        label: str,
-        options: Sequence[TLiteralString] | Sequence[TString],
-        initial_value: Optional[TLiteralString | TString] = None,
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiDropdownHandle[Any]:  # Output type is specified in overloads.
-        """Add a dropdown to the GUI.
-
-        Args:
-            label: Label to display on the dropdown.
-            options: Sequence of options to display in the dropdown.
-            initial_value: Initial value of the dropdown.
-            disabled: Whether the dropdown is disabled.
-            visible: Whether the dropdown is visible.
-            hint: Optional hint to display on hover.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-        if initial_value is None:
-            initial_value = options[0]
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-        return GuiDropdownHandle(
-            self._create_gui_input(
-                initial_value,
-                message=_messages.GuiAddDropdownMessage(
-                    order=order,
-                    id=id,
-                    label=label,
-                    container_id=self._get_container_id(),
-                    hint=hint,
-                    initial_value=initial_value,
-                    options=tuple(options),
-                ),
-                disabled=disabled,
-                visible=visible,
-            )._impl,
-            _impl_options=tuple(options),
-        )
-
-    def add_gui_slider(
-        self,
-        label: str,
-        min: IntOrFloat,
-        max: IntOrFloat,
-        step: IntOrFloat,
-        initial_value: IntOrFloat,
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiInputHandle[IntOrFloat]:
-        """Add a slider to the GUI. Types of the min, max, step, and initial value should match.
-
-        Args:
-            label: Label to display on the slider.
-            min: Minimum value of the slider.
-            max: Maximum value of the slider.
-            step: Step size of the slider.
-            initial_value: Initial value of the slider.
-            disabled: Whether the slider is disabled.
-            visible: Whether the slider is visible.
-            hint: Optional hint to display on hover.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-        assert max >= min
-        if step > max - min:
-            step = max - min
-        assert max >= initial_value >= min
-
-        # GUI callbacks cast incoming values to match the type of the initial value. If
-        # the min, max, or step is a float, we should cast to a float.
-        if type(initial_value) is int and (
-            type(min) is float or type(max) is float or type(step) is float
-        ):
-            initial_value = float(initial_value)  # type: ignore
-
-        # TODO: as of 6/5/2023, this assert will break something in nerfstudio. (at
-        # least LERF)
-        #
-        # assert type(min) == type(max) == type(step) == type(initial_value)
-
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-        return self._create_gui_input(
-            initial_value=initial_value,
-            message=_messages.GuiAddSliderMessage(
-                order=order,
-                id=id,
-                label=label,
-                container_id=self._get_container_id(),
-                hint=hint,
-                min=min,
-                max=max,
-                step=step,
-                initial_value=initial_value,
-                precision=_compute_precision_digits(step),
-            ),
-            disabled=disabled,
-            visible=visible,
-            is_button=False,
-        )
-
-    def add_gui_rgb(
-        self,
-        label: str,
-        initial_value: Tuple[int, int, int],
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiInputHandle[Tuple[int, int, int]]:
-        """Add an RGB picker to the GUI.
-
-        Args:
-            label: Label to display on the RGB picker.
-            initial_value: Initial value of the RGB picker.
-            disabled: Whether the RGB picker is disabled.
-            visible: Whether the RGB picker is visible.
-            hint: Optional hint to display on hover.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-        return self._create_gui_input(
-            initial_value,
-            message=_messages.GuiAddRgbMessage(
-                order=order,
-                id=id,
-                label=label,
-                container_id=self._get_container_id(),
-                hint=hint,
-                initial_value=initial_value,
-            ),
-            disabled=disabled,
-            visible=visible,
-        )
-
-    def add_gui_rgba(
-        self,
-        label: str,
-        initial_value: Tuple[int, int, int, int],
-        disabled: bool = False,
-        visible: bool = True,
-        hint: Optional[str] = None,
-        order: Optional[float] = None,
-    ) -> GuiInputHandle[Tuple[int, int, int, int]]:
-        """Add an RGBA picker to the GUI.
-
-        Args:
-            label: Label to display on the RGBA picker.
-            initial_value: Initial value of the RGBA picker.
-            disabled: Whether the RGBA picker is disabled.
-            visible: Whether the RGBA picker is visible.
-            hint: Optional hint to display on hover.
-            order: Optional ordering, smallest values will be displayed first.
-
-        Returns:
-            A handle that can be used to interact with the GUI element.
-        """
-        id = _make_unique_id()
-        order = _apply_default_order(order)
-        return self._create_gui_input(
-            initial_value,
-            message=_messages.GuiAddRgbaMessage(
-                order=order,
-                id=id,
-                label=label,
-                container_id=self._get_container_id(),
-                hint=hint,
-                initial_value=initial_value,
-            ),
-            disabled=disabled,
-            visible=visible,
-        )
-
-    def _create_gui_input(
-        self,
-        initial_value: T,
-        message: _messages._GuiAddInputBase,
-        disabled: bool,
-        visible: bool,
-        is_button: bool = False,
-    ) -> GuiInputHandle[T]:
-        """Private helper for adding a simple GUI element."""
-
-        # Send add GUI input message.
-        self._get_api()._queue(message)
-
-        # Construct handle.
-        handle_state = _GuiHandleState(
-            label=message.label,
-            typ=type(initial_value),
-            gui_api=self,
-            value=initial_value,
-            update_timestamp=time.time(),
-            container_id=self._get_container_id(),
-            update_cb=[],
-            is_button=is_button,
-            sync_cb=None,
-            disabled=False,
-            visible=True,
-            id=message.id,
-            order=message.order,
-            initial_value=initial_value,
-            hint=message.hint,
-        )
-
-        # For broadcasted GUI handles, we should synchronize all clients.
-        # This will be a no-op for client handles.
-        if not is_button:
-
-            def sync_other_clients(client_id: ClientId, value: Any) -> None:
-                message = _messages.GuiSetValueMessage(id=handle_state.id, value=value)
-                message.excluded_self_client = client_id
-                self._get_api()._queue(message)
-
-            handle_state.sync_cb = sync_other_clients
-
-        handle = GuiInputHandle(handle_state)
-
-        # Set the disabled/visible fields. These will queue messages under-the-hood.
-        if disabled:
-            handle.disabled = disabled
-        if not visible:
-            handle.visible = visible
+    def _update_component_props(self, id: str, kwargs: Dict[str, Any]) -> None:
+        """Update properties of a GUI element."""
+        self._get_api()._queue(_messages.GuiUpdateMessage(id=id, **kwargs))
 
+    def gui_add_component(self, props: TProps) -> TProps:
+        handle = ComponentHandle(self, id=_make_unique_id(), props=props)
+        self._gui_handle_from_id[handle.id] = handle
         return handle
diff --git a/src/viser/_gui_components.py b/src/viser/_gui_components.py
new file mode 100644
index 000000000..dd7e9c003
--- /dev/null
+++ b/src/viser/_gui_components.py
@@ -0,0 +1,312 @@
+import typing
+from dataclasses import field, InitVar, KW_ONLY
+from functools import wraps
+import time
+from typing import Optional, Literal, Union, TypeVar, Generic, Tuple, Type
+from typing import Callable, Any
+from dataclasses import dataclass
+
+try:
+    from typing import Concatenate
+except ImportError:
+    from typing_extensions import Concatenate
+try:
+    from typing import Self
+except ImportError:
+    from typing_extensions import Self
+try:
+    from typing import Protocol
+except ImportError:
+    from typing_extensions import Protocol
+try:
+    from typing import ParamSpec
+except ImportError:
+    from typing_extensions import ParamSpec
+
+
+TProps = TypeVar("TProps")
+TReturn = TypeVar("TReturn")
+TArgs = ParamSpec("TArgs")
+T = TypeVar("T")
+
+
+def copy_signature(fn_signature: Callable[TArgs, Any]):
+    def wrapper(
+        fn: Callable[..., TReturn]
+    ) -> Callable[Concatenate[Any, TArgs], TReturn]:
+        out = wraps(fn_signature)(fn)
+        # TODO: perhaps copy signature from fn_signature and get help for arguments
+        out.__doc__ = f"""Creates a new GUI {fn_signature.__name__} component and returns a handle to it.
+
+Returns:
+    The component handle.
+"""
+        return out
+
+    return wrapper
+
+
+class Property(Generic[T]):
+    def __init__(self, getter, setter):
+        self.getter = getter
+        self.setter = setter
+
+    def get(self) -> T:
+        return self.getter()
+
+    def set(self, value: T):
+        self.setter(value)
+
+
+@dataclass(kw_only=True)
+class GuiComponent(Protocol):
+    order: InitVar[Optional[float]] = None
+
+    @property
+    def order(self) -> Optional[float]:
+        return object.__getattribute__(self, "_order")
+
+    @property
+    def id(self):
+        raise NotImplementedError()
+
+    def __post_init__(self, order: Optional[float]):
+        object.__setattr__(self, "_order", order)
+
+    def property(self, name: str) -> Property[T]:
+        raise NotImplementedError()
+
+
+class GuiContainer(Protocol):
+    def __enter__(self) -> Self:
+        raise NotImplementedError()
+
+    def __exit__(self, exc_type, exc_value, traceback):
+        return None
+
+
+@dataclass
+class Button(GuiComponent, Protocol):
+    """Button component"""
+
+    label: str
+    """Button label"""
+    color: Optional[
+        Literal[
+            "dark",
+            "gray",
+            "red",
+            "pink",
+            "grape",
+            "violet",
+            "indigo",
+            "blue",
+            "cyan",
+            "green",
+            "lime",
+            "yellow",
+            "orange",
+            "teal",
+        ]
+    ] = None
+    """Button color"""
+    icon_base64: Optional[str] = None
+    """Icon to display on the button, as a base64-encoded SVG image."""
+    disabled: bool = False
+    """Whether the button is disabled."""
+    hint: Optional[str] = None
+    """Button tooltip."""
+
+
+@dataclass
+class Input(GuiComponent, Protocol):
+    label: str
+    _: KW_ONLY
+    hint: Optional[str] = None
+    disabled: bool = False
+
+
+@dataclass(kw_only=True)
+class TextInput(Input, Protocol):
+    value: str
+
+
+@dataclass
+class Folder(GuiComponent, GuiContainer, Protocol):
+    label: str
+    _: KW_ONLY
+    expand_by_default: bool = True
+
+
+@dataclass(kw_only=True)
+class Markdown(GuiComponent, Protocol):
+    markdown: str
+
+
+@dataclass(kw_only=True)
+class TabGroup(GuiComponent, Protocol):
+    tab_labels: Tuple[str, ...]
+    tab_icons_base64: Tuple[Union[str, None], ...]
+    tab_container_ids: Tuple[str, ...]
+
+
+@dataclass(kw_only=True)
+class Modal(GuiComponent, Protocol):
+    order: float
+    id: str
+    title: str
+
+
+@dataclass(kw_only=True)
+class Slider(Input, Protocol):
+    value: float
+    min: Optional[float] = None
+    max: Optional[float] = None
+    step: Optional[float] = None
+    precision: Optional[int] = None
+
+
+@dataclass
+class NumberInput(Input, Protocol):
+    value: float
+    step: Optional[float] = None
+    min: Optional[float] = None
+    max: Optional[float] = None
+    precision: Optional[int] = None
+
+
+@dataclass(kw_only=True)
+class RgbInput(Input, Protocol):
+    value: Tuple[int, int, int]
+
+
+@dataclass
+class RgbaInput(Input, Protocol):
+    value: Tuple[int, int, int, int]
+
+
+@dataclass
+class Checkbox(Input, Protocol):
+    value: bool
+
+
+@dataclass
+class Vector2Input(Input, Protocol):
+    value: Tuple[float, float]
+    step: float
+    min: Optional[Tuple[float, float]] = None
+    max: Optional[Tuple[float, float]] = None
+    precision: Optional[int] = None
+
+
+@dataclass
+class Vector3Input(Input, Protocol):
+    value: Tuple[float, float, float]
+    step: float
+    min: Optional[Tuple[float, float, float]] = None
+    max: Optional[Tuple[float, float, float]] = None
+    precision: Optional[int] = None
+
+
+@dataclass
+class Dropdown(Input, Protocol):
+    options: Tuple[str, ...]
+    value: Optional[str] = None
+
+    def __post_init__(self, *args, **kwargs):
+        if self.value is None and len(self.options) > 0:
+            self.value = self.options[0]
+        return super().__post_init__(*args, **kwargs)
+
+
+class GuiApiMixin:
+    @copy_signature(Button)
+    def add_gui_button(self, *args, **kwargs) -> Button:
+        props = Button(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(TextInput)
+    def add_gui_text(self, *args, **kwargs) -> TextInput:
+        props = TextInput(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(NumberInput)
+    def add_gui_number(self, *args, **kwargs) -> NumberInput:
+        props = NumberInput(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(Modal)
+    def add_gui_modal(self, *args, **kwargs) -> Modal:
+        props = Modal(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(Slider)
+    def add_gui_slider(self, *args, **kwargs) -> Slider:
+        props = Slider(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(Checkbox)
+    def add_gui_checkbox(self, *args, **kwargs) -> Checkbox:
+        props = Checkbox(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(RgbInput)
+    def add_gui_rgb(self, *args, **kwargs) -> RgbInput:
+        props = RgbInput(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(RgbaInput)
+    def add_gui_rgba(self, *args, **kwargs) -> RgbaInput:
+        props = RgbaInput(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(Folder)
+    def add_gui_folder(self, *args, **kwargs) -> Folder:
+        props = Folder(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(Markdown)
+    def add_gui_markdown(self, *args, **kwargs) -> Markdown:
+        props = Markdown(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(TabGroup)
+    def add_gui_tab_group(self, *args, **kwargs) -> TabGroup:
+        props = TabGroup(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(Vector2Input)
+    def add_gui_vector2(self, *args, **kwargs) -> Vector2Input:
+        props = Vector2Input(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(Vector3Input)
+    def add_gui_vector3(self, *args, **kwargs) -> Vector3Input:
+        props = Vector3Input(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    @copy_signature(Dropdown)
+    def add_gui_dropdown(self, *args, **kwargs) -> Dropdown:
+        props = Dropdown(*args, **kwargs)
+        return self.gui_add_component(props)
+
+    def gui_add_component(self, props: TProps) -> TProps:
+        raise NotImplementedError()
+
+
+Component = Union[
+    Button,
+    TextInput,
+    NumberInput,
+    Slider,
+    Checkbox,
+    RgbInput,
+    RgbaInput,
+    Folder,
+    Markdown,
+    TabGroup,
+    Modal,
+    Vector2Input,
+    Vector3Input,
+    Dropdown,
+]
diff --git a/src/viser/_gui_handles.py b/src/viser/_gui_handles.py
index 614a2f839..e7810c156 100644
--- a/src/viser/_gui_handles.py
+++ b/src/viser/_gui_handles.py
@@ -30,10 +30,6 @@
 from ._icons_enum import Icon
 from ._message_api import _encode_image_base64
 from ._messages import (
-    GuiAddDropdownMessage,
-    GuiAddMarkdownMessage,
-    GuiAddTabGroupMessage,
-    GuiCloseModalMessage,
     GuiRemoveMessage,
     GuiSetDisabledMessage,
     GuiSetValueMessage,
diff --git a/src/viser/_messages.py b/src/viser/_messages.py
index 24819e3cb..06ac17314 100644
--- a/src/viser/_messages.py
+++ b/src/viser/_messages.py
@@ -11,6 +11,7 @@
 from typing_extensions import Literal, override
 
 from . import infra, theme
+from ._gui_components import Component
 
 
 class Message(infra.Message):
@@ -37,6 +38,17 @@ def redundancy_key(self) -> str:
         return "_".join(parts)
 
 
+@dataclasses.dataclass
+class GuiAddComponentMessage(Message):
+    """Add a GUI component."""
+
+    order: float
+    id: str
+    container_id: str
+
+    props: Component
+
+
 @dataclasses.dataclass
 class ViewerCameraMessage(Message):
     """Message for a posed viewer camera.
@@ -334,151 +346,6 @@ class ResetSceneMessage(Message):
     """Reset scene."""
 
 
-@dataclasses.dataclass
-class GuiAddFolderMessage(Message):
-    order: float
-    id: str
-    label: str
-    container_id: str
-    expand_by_default: bool
-
-
-@dataclasses.dataclass
-class GuiAddMarkdownMessage(Message):
-    order: float
-    id: str
-    markdown: str
-    container_id: str
-
-
-@dataclasses.dataclass
-class GuiAddTabGroupMessage(Message):
-    order: float
-    id: str
-    container_id: str
-    tab_labels: Tuple[str, ...]
-    tab_icons_base64: Tuple[Union[str, None], ...]
-    tab_container_ids: Tuple[str, ...]
-
-
-@dataclasses.dataclass
-class _GuiAddInputBase(Message):
-    """Base message type containing fields commonly used by GUI inputs."""
-
-    order: float
-    id: str
-    label: str
-    container_id: str
-    hint: Optional[str]
-    initial_value: Any
-
-
-@dataclasses.dataclass
-class GuiModalMessage(Message):
-    order: float
-    id: str
-    title: str
-
-
-@dataclasses.dataclass
-class GuiCloseModalMessage(Message):
-    id: str
-
-
-@dataclasses.dataclass
-class GuiAddButtonMessage(_GuiAddInputBase):
-    # All GUI elements currently need an `initial_value` field.
-    # This makes our job on the frontend easier.
-    initial_value: bool
-    color: Optional[
-        Literal[
-            "dark",
-            "gray",
-            "red",
-            "pink",
-            "grape",
-            "violet",
-            "indigo",
-            "blue",
-            "cyan",
-            "green",
-            "lime",
-            "yellow",
-            "orange",
-            "teal",
-        ]
-    ]
-    icon_base64: Optional[str]
-
-
-@dataclasses.dataclass
-class GuiAddSliderMessage(_GuiAddInputBase):
-    min: float
-    max: float
-    step: Optional[float]
-    initial_value: float
-    precision: int
-
-
-@dataclasses.dataclass
-class GuiAddNumberMessage(_GuiAddInputBase):
-    initial_value: float
-    precision: int
-    step: float
-    min: Optional[float]
-    max: Optional[float]
-
-
-@dataclasses.dataclass
-class GuiAddRgbMessage(_GuiAddInputBase):
-    initial_value: Tuple[int, int, int]
-
-
-@dataclasses.dataclass
-class GuiAddRgbaMessage(_GuiAddInputBase):
-    initial_value: Tuple[int, int, int, int]
-
-
-@dataclasses.dataclass
-class GuiAddCheckboxMessage(_GuiAddInputBase):
-    initial_value: bool
-
-
-@dataclasses.dataclass
-class GuiAddVector2Message(_GuiAddInputBase):
-    initial_value: Tuple[float, float]
-    min: Optional[Tuple[float, float]]
-    max: Optional[Tuple[float, float]]
-    step: float
-    precision: int
-
-
-@dataclasses.dataclass
-class GuiAddVector3Message(_GuiAddInputBase):
-    initial_value: Tuple[float, float, float]
-    min: Optional[Tuple[float, float, float]]
-    max: Optional[Tuple[float, float, float]]
-    step: float
-    precision: int
-
-
-@dataclasses.dataclass
-class GuiAddTextMessage(_GuiAddInputBase):
-    initial_value: str
-
-
-@dataclasses.dataclass
-class GuiAddDropdownMessage(_GuiAddInputBase):
-    initial_value: str
-    options: Tuple[str, ...]
-
-
-@dataclasses.dataclass
-class GuiAddButtonGroupMessage(_GuiAddInputBase):
-    initial_value: str
-    options: Tuple[str, ...]
-
-
 @dataclasses.dataclass
 class GuiRemoveMessage(Message):
     """Sent server->client to remove a GUI element."""
diff --git a/src/viser/client/src/ControlPanel/Generated.tsx b/src/viser/client/src/ControlPanel/Generated.tsx
index 093aa46bb..1eb87f00b 100644
--- a/src/viser/client/src/ControlPanel/Generated.tsx
+++ b/src/viser/client/src/ControlPanel/Generated.tsx
@@ -1,4 +1,5 @@
 import {
+  AllComponentProps,
   GuiAddFolderMessage,
   GuiAddTabGroupMessage,
 } from "../WebsocketMessages";
@@ -32,19 +33,31 @@ import Markdown from "../Markdown";
 import { ErrorBoundary } from "react-error-boundary";
 import { useDisclosure } from "@mantine/hooks";
 import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { GuiGenerateContext, SetProps } from "./GuiState";
+import GeneratedComponent from "../GeneratedComponent";
+
+
+function GeneratedComponentFromId<T extends AllComponentProps>({ id }: { id: string }) {
+  const viewer = React.useContext(ViewerContext)!;
+  const props = viewer.useGui((state) => state.guiPropsFromId[id]) ?? {};
+  const attributes = viewer.useGui((state) => state.guiAttributeFromId[id]) ?? {};
+  const contextValue = React.useContext(GuiGenerateContext)!;
+  const update = (callback: SetProps<AllComponentProps>) => viewer.useGui((state) => state.setProps<T>(id, callback));
+  return <GuiGenerateContext.Provider value={{ ...contextValue, id, update }}>
+    <GeneratedComponent {...props} />
+  </GuiGenerateContext.Provider>;
+}
 
 /** Root of generated inputs. */
 export default function GeneratedGuiContainer({
   // We need to take viewer as input in drei's <Html /> elements, where contexts break.
   containerId,
-  viewer,
   folderDepth,
 }: {
   containerId: string;
-  viewer?: ViewerContextContents;
   folderDepth?: number;
 }) {
-  if (viewer === undefined) viewer = React.useContext(ViewerContext)!;
+  const viewer = React.useContext(ViewerContext)!;
 
   const guiIdSet =
     viewer.useGui((state) => state.guiIdSetFromContainerId[containerId]) ?? {};
@@ -62,15 +75,13 @@ export default function GeneratedGuiContainer({
     <Box pt="0.75em">
       {guiIdOrderPairArray
         .sort((a, b) => a.order - b.order)
-        .map((pair, index) => (
-          <GeneratedInput
-            key={pair.id}
-            id={pair.id}
-            viewer={viewer}
-            folderDepth={folderDepth ?? 0}
-            last={index === guiIdOrderPairArray.length - 1}
-          />
-        ))}
+        .map((pair, index) => <GeneratedInput
+              id={pair.id}
+              viewer={viewer}
+              folderDepth={folderDepth ?? 0}
+              last={index === guiIdOrderPairArray.length - 1}
+            />
+        )}
     </Box>
   );
   return out;
@@ -95,31 +106,10 @@ function GeneratedInput({
   // Handle nested containers.
   if (conf.type == "GuiAddFolderMessage")
     return (
-      <Box pb={!last ? "0.125em" : 0}>
-        <GeneratedFolder
-          conf={conf}
-          folderDepth={folderDepth}
-          viewer={viewer}
-        />
-      </Box>
+  <></>
     );
   if (conf.type == "GuiAddTabGroupMessage")
-    return <GeneratedTabGroup conf={conf} />;
-  if (conf.type == "GuiAddMarkdownMessage") {
-    let { visible } =
-      viewer.useGui((state) => state.guiAttributeFromId[conf.id]) || {};
-    visible = visible ?? true;
-    if (!visible) return <></>;
-    return (
-      <Box pb="xs" px="sm" style={{ maxWidth: "95%" }}>
-        <ErrorBoundary
-          fallback={<Text align="center">Markdown Failed to Render</Text>}
-        >
-          <Markdown>{conf.markdown}</Markdown>
-        </ErrorBoundary>
-      </Box>
-    );
-  }
+    return <></>;
 
   const messageSender = makeThrottledMessageSender(viewer.websocketRef, 50);
   function updateValue(value: any) {
@@ -139,600 +129,4 @@ function GeneratedInput({
   visible = visible ?? true;
   disabled = disabled ?? false;
 
-  if (!visible) return <></>;
-
-  let inputColor =
-    computeRelativeLuminance(theme.fn.primaryColor()) > 50.0
-      ? theme.colors.gray[9]
-      : theme.white;
-
-  let labeled = true;
-  let input = null;
-  switch (conf.type) {
-    case "GuiAddButtonMessage":
-      labeled = false;
-      if (conf.color !== null) {
-        inputColor =
-          computeRelativeLuminance(
-            theme.colors[conf.color][theme.fn.primaryShade()],
-          ) > 50.0
-            ? theme.colors.gray[9]
-            : theme.white;
-      }
-
-      input = (
-        <Button
-          id={conf.id}
-          fullWidth
-          color={conf.color ?? undefined}
-          onClick={() =>
-            messageSender({
-              type: "GuiUpdateMessage",
-              id: conf.id,
-              value: true,
-            })
-          }
-          style={{ height: "2.125em" }}
-          styles={{ inner: { color: inputColor + " !important" } }}
-          disabled={disabled}
-          size="sm"
-          leftIcon={
-            conf.icon_base64 === null ? undefined : (
-              <Image
-                /*^In Safari, both the icon's height and width need to be set, otherwise the icon is clipped.*/
-                height="1em"
-                width="1em"
-                opacity={disabled ? 0.3 : 1.0}
-                mr="-0.125em"
-                sx={
-                  inputColor === theme.white
-                    ? {
-                        // Make the color white.
-                        filter: !disabled ? "invert(1)" : undefined,
-                      }
-                    : // Icon will be black by default.
-                      undefined
-                }
-                src={"data:image/svg+xml;base64," + conf.icon_base64}
-              />
-            )
-          }
-        >
-          {conf.label}
-        </Button>
-      );
-      break;
-    case "GuiAddSliderMessage":
-      input = (
-        <Flex justify="space-between">
-          <Box sx={{ flexGrow: 1 }}>
-            <Slider
-              id={conf.id}
-              size="xs"
-              thumbSize={0}
-              styles={(theme) => ({
-                thumb: {
-                  background: theme.fn.primaryColor(),
-                  borderRadius: "0.1em",
-                  height: "0.75em",
-                  width: "0.625em",
-                },
-              })}
-              pt="0.2em"
-              showLabelOnHover={false}
-              min={conf.min}
-              max={conf.max}
-              step={conf.step ?? undefined}
-              precision={conf.precision}
-              value={value}
-              onChange={updateValue}
-              marks={[{ value: conf.min }, { value: conf.max }]}
-              disabled={disabled}
-            />
-            <Flex
-              justify="space-between"
-              fz="0.6rem"
-              c="dimmed"
-              lh="1.2em"
-              lts="-0.5px"
-              mt="-0.0625em"
-              mb="-0.4em"
-            >
-              <Text>{parseInt(conf.min.toFixed(6))}</Text>
-              <Text>{parseInt(conf.max.toFixed(6))}</Text>
-            </Flex>
-          </Box>
-          <NumberInput
-            value={value}
-            onChange={(newValue) => {
-              // Ignore empty values.
-              newValue !== "" && updateValue(newValue);
-            }}
-            size="xs"
-            min={conf.min}
-            max={conf.max}
-            hideControls
-            step={conf.step ?? undefined}
-            precision={conf.precision}
-            sx={{ width: "3rem" }}
-            styles={{
-              input: {
-                padding: "0.375em",
-                letterSpacing: "-0.5px",
-                minHeight: "1.875em",
-                height: "1.875em",
-              },
-            }}
-            ml="xs"
-          />
-        </Flex>
-      );
-      break;
-    case "GuiAddNumberMessage":
-      input = (
-        <NumberInput
-          id={conf.id}
-          value={value ?? conf.initial_value}
-          precision={conf.precision}
-          min={conf.min ?? undefined}
-          max={conf.max ?? undefined}
-          step={conf.step}
-          size="xs"
-          onChange={(newValue) => {
-            // Ignore empty values.
-            newValue !== "" && updateValue(newValue);
-          }}
-          styles={{
-            input: {
-              minHeight: "1.625rem",
-              height: "1.625rem",
-            },
-          }}
-          disabled={disabled}
-          stepHoldDelay={500}
-          stepHoldInterval={(t) => Math.max(1000 / t ** 2, 25)}
-        />
-      );
-      break;
-    case "GuiAddTextMessage":
-      input = (
-        <TextInput
-          value={value ?? conf.initial_value}
-          size="xs"
-          onChange={(value) => {
-            updateValue(value.target.value);
-          }}
-          styles={{
-            input: {
-              minHeight: "1.625rem",
-              height: "1.625rem",
-              padding: "0 0.5em",
-            },
-          }}
-          disabled={disabled}
-        />
-      );
-      break;
-    case "GuiAddCheckboxMessage":
-      input = (
-        <Checkbox
-          id={conf.id}
-          checked={value ?? conf.initial_value}
-          size="xs"
-          onChange={(value) => {
-            updateValue(value.target.checked);
-          }}
-          disabled={disabled}
-          styles={{
-            icon: {
-              color: inputColor + " !important",
-            },
-          }}
-        />
-      );
-      break;
-    case "GuiAddVector2Message":
-      input = (
-        <VectorInput
-          id={conf.id}
-          n={2}
-          value={value ?? conf.initial_value}
-          onChange={updateValue}
-          min={conf.min}
-          max={conf.max}
-          step={conf.step}
-          precision={conf.precision}
-          disabled={disabled}
-        />
-      );
-      break;
-    case "GuiAddVector3Message":
-      input = (
-        <VectorInput
-          id={conf.id}
-          n={3}
-          value={value ?? conf.initial_value}
-          onChange={updateValue}
-          min={conf.min}
-          max={conf.max}
-          step={conf.step}
-          precision={conf.precision}
-          disabled={disabled}
-        />
-      );
-      break;
-    case "GuiAddDropdownMessage":
-      input = (
-        <Select
-          id={conf.id}
-          radius="xs"
-          value={value}
-          data={conf.options}
-          onChange={updateValue}
-          searchable
-          maxDropdownHeight={400}
-          size="xs"
-          styles={{
-            input: {
-              padding: "0.5em",
-              letterSpacing: "-0.5px",
-              minHeight: "1.625rem",
-              height: "1.625rem",
-            },
-          }}
-          // zIndex of dropdown should be >modal zIndex.
-          // On edge cases: it seems like existing dropdowns are always closed when a new modal is opened.
-          zIndex={1000}
-          withinPortal={true}
-        />
-      );
-      break;
-    case "GuiAddRgbMessage":
-      input = (
-        <ColorInput
-          disabled={disabled}
-          size="xs"
-          value={rgbToHex(value)}
-          onChange={(v) => updateValue(hexToRgb(v))}
-          format="hex"
-          // zIndex of dropdown should be >modal zIndex.
-          // On edge cases: it seems like existing dropdowns are always closed when a new modal is opened.
-          dropdownZIndex={1000}
-          withinPortal={true}
-          styles={{
-            input: { height: "1.625rem", minHeight: "1.625rem" },
-            icon: { transform: "scale(0.8)" },
-          }}
-        />
-      );
-      break;
-    case "GuiAddRgbaMessage":
-      input = (
-        <ColorInput
-          disabled={disabled}
-          size="xs"
-          value={rgbaToHex(value)}
-          onChange={(v) => updateValue(hexToRgba(v))}
-          format="hexa"
-          // zIndex of dropdown should be >modal zIndex.
-          // On edge cases: it seems like existing dropdowns are always closed when a new modal is opened.
-          dropdownZIndex={1000}
-          withinPortal={true}
-          styles={{ input: { height: "1.625rem", minHeight: "1.625rem" } }}
-        />
-      );
-      break;
-    case "GuiAddButtonGroupMessage":
-      input = (
-        <Flex justify="space-between" columnGap="xs">
-          {conf.options.map((option, index) => (
-            <Button
-              key={index}
-              onClick={() =>
-                messageSender({
-                  type: "GuiUpdateMessage",
-                  id: conf.id,
-                  value: option,
-                })
-              }
-              style={{ flexGrow: 1, width: 0 }}
-              disabled={disabled}
-              compact
-              size="xs"
-              variant="outline"
-            >
-              {option}
-            </Button>
-          ))}
-        </Flex>
-      );
-  }
-
-  if (conf.hint !== null)
-    input = // We need to add <Box /> for inputs that we can't assign refs to.
-      (
-        <Tooltip
-          zIndex={100}
-          label={conf.hint}
-          multiline
-          w="15rem"
-          withArrow
-          openDelay={500}
-          withinPortal
-        >
-          <Box
-            sx={{
-              display:
-                // For checkboxes, we want to make sure that the wrapper
-                // doesn't expand to the full width of the parent. This will
-                // de-center the tooltip.
-                conf.type === "GuiAddCheckboxMessage"
-                  ? "inline-block"
-                  : "block",
-            }}
-          >
-            {input}
-          </Box>
-        </Tooltip>
-      );
-
-  if (labeled)
-    input = (
-      <LabeledInput
-        id={conf.id}
-        label={conf.label}
-        input={input}
-        folderDepth={folderDepth}
-      />
-    );
-
-  return (
-    <Box pb="0.5em" px="xs">
-      {input}
-    </Box>
-  );
-}
-
-function GeneratedFolder({
-  conf,
-  folderDepth,
-  viewer,
-}: {
-  conf: GuiAddFolderMessage;
-  folderDepth: number;
-  viewer: ViewerContextContents;
-}) {
-  const [opened, { toggle }] = useDisclosure(conf.expand_by_default);
-  const guiIdSet = viewer.useGui(
-    (state) => state.guiIdSetFromContainerId[conf.id],
-  );
-  const isEmpty = guiIdSet === undefined || Object.keys(guiIdSet).length === 0;
-
-  const ToggleIcon = opened ? IconChevronUp : IconChevronDown;
-  return (
-    <Paper
-      withBorder
-      pt="0.0625em"
-      mx="xs"
-      mt="xs"
-      mb="sm"
-      sx={{ position: "relative" }}
-    >
-      <Paper
-        sx={{
-          fontSize: "0.875em",
-          position: "absolute",
-          padding: "0 0.375em 0 0.375em",
-          top: 0,
-          left: "0.375em",
-          transform: "translateY(-50%)",
-          cursor: isEmpty ? undefined : "pointer",
-          userSelect: "none",
-          fontWeight: 500,
-        }}
-        onClick={toggle}
-      >
-        {conf.label}
-        <ToggleIcon
-          style={{
-            width: "0.9em",
-            height: "0.9em",
-            strokeWidth: 3,
-            top: "0.1em",
-            position: "relative",
-            marginLeft: "0.25em",
-            marginRight: "-0.1em",
-            opacity: 0.5,
-            display: isEmpty ? "none" : undefined,
-          }}
-        />
-      </Paper>
-      <Collapse in={opened && !isEmpty} pt="0.2em">
-        <GeneratedGuiContainer
-          containerId={conf.id}
-          folderDepth={folderDepth + 1}
-        />
-      </Collapse>
-      <Collapse in={!(opened && !isEmpty)}>
-        <Box p="xs"></Box>
-      </Collapse>
-    </Paper>
-  );
-}
-
-function GeneratedTabGroup({ conf }: { conf: GuiAddTabGroupMessage }) {
-  const [tabState, setTabState] = React.useState<TabsValue>("0");
-  const icons = conf.tab_icons_base64;
-
-  return (
-    <Tabs
-      radius="xs"
-      value={tabState}
-      onTabChange={setTabState}
-      sx={{ marginTop: "-0.75em" }}
-    >
-      <Tabs.List>
-        {conf.tab_labels.map((label, index) => (
-          <Tabs.Tab
-            value={index.toString()}
-            key={index}
-            icon={
-              icons[index] === null ? undefined : (
-                <Image
-                  /*^In Safari, both the icon's height and width need to be set, otherwise the icon is clipped.*/
-                  height={"1.125em"}
-                  width={"1.125em"}
-                  sx={(theme) => ({
-                    filter:
-                      theme.colorScheme == "dark" ? "invert(1)" : undefined,
-                  })}
-                  src={"data:image/svg+xml;base64," + icons[index]}
-                />
-              )
-            }
-          >
-            {label}
-          </Tabs.Tab>
-        ))}
-      </Tabs.List>
-      {conf.tab_container_ids.map((containerId, index) => (
-        <Tabs.Panel value={index.toString()} key={containerId}>
-          <GeneratedGuiContainer containerId={containerId} />
-        </Tabs.Panel>
-      ))}
-    </Tabs>
-  );
-}
-
-function VectorInput(
-  props:
-    | {
-        id: string;
-        n: 2;
-        value: [number, number];
-        min: [number, number] | null;
-        max: [number, number] | null;
-        step: number;
-        precision: number;
-        onChange: (value: number[]) => void;
-        disabled: boolean;
-      }
-    | {
-        id: string;
-        n: 3;
-        value: [number, number, number];
-        min: [number, number, number] | null;
-        max: [number, number, number] | null;
-        step: number;
-        precision: number;
-        onChange: (value: number[]) => void;
-        disabled: boolean;
-      },
-) {
-  return (
-    <Flex justify="space-between" style={{ columnGap: "0.5em" }}>
-      {[...Array(props.n).keys()].map((i) => (
-        <NumberInput
-          id={i === 0 ? props.id : undefined}
-          key={i}
-          value={props.value[i]}
-          onChange={(v) => {
-            const updated = [...props.value];
-            updated[i] = v === "" ? 0.0 : v;
-            props.onChange(updated);
-          }}
-          size="xs"
-          styles={{
-            root: { flexGrow: 1, width: 0 },
-            input: {
-              paddingLeft: "0.5em",
-              paddingRight: "1.75em",
-              textAlign: "right",
-              minHeight: "1.875em",
-              height: "1.875em",
-            },
-            rightSection: { width: "1.2em" },
-            control: {
-              width: "1.1em",
-            },
-          }}
-          precision={props.precision}
-          step={props.step}
-          min={props.min === null ? undefined : props.min[i]}
-          max={props.max === null ? undefined : props.max[i]}
-          stepHoldDelay={500}
-          stepHoldInterval={(t) => Math.max(1000 / t ** 2, 25)}
-          disabled={props.disabled}
-        />
-      ))}
-    </Flex>
-  );
-}
-
-/** GUI input with a label horizontally placed to the left of it. */
-function LabeledInput(props: {
-  id: string;
-  label: string;
-  input: React.ReactNode;
-  folderDepth: number;
-}) {
-  return (
-    <Flex align="center">
-      <Box
-        // The per-layer offset here is just eyeballed.
-        w={`${7.25 - props.folderDepth * 0.6375}em`}
-        pr="xs"
-        sx={{ flexShrink: 0, position: "relative" }}
-      >
-        <Text
-          c="dimmed"
-          fz="0.875em"
-          fw="450"
-          lh="1.375em"
-          lts="-0.75px"
-          unselectable="off"
-          sx={{
-            width: "100%",
-            boxSizing: "content-box",
-          }}
-        >
-          <label htmlFor={props.id}>{props.label}</label>
-        </Text>
-      </Box>
-      <Box sx={{ flexGrow: 1 }}>{props.input}</Box>
-    </Flex>
-  );
-}
-
-// Color conversion helpers.
-
-function rgbToHex([r, g, b]: [number, number, number]): string {
-  const hexR = r.toString(16).padStart(2, "0");
-  const hexG = g.toString(16).padStart(2, "0");
-  const hexB = b.toString(16).padStart(2, "0");
-  return `#${hexR}${hexG}${hexB}`;
-}
-
-function hexToRgb(hexColor: string): [number, number, number] {
-  const hex = hexColor.slice(1); // Remove the # in #ffffff.
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  return [r, g, b];
-}
-function rgbaToHex([r, g, b, a]: [number, number, number, number]): string {
-  const hexR = r.toString(16).padStart(2, "0");
-  const hexG = g.toString(16).padStart(2, "0");
-  const hexB = b.toString(16).padStart(2, "0");
-  const hexA = a.toString(16).padStart(2, "0");
-  return `#${hexR}${hexG}${hexB}${hexA}`;
-}
-
-function hexToRgba(hexColor: string): [number, number, number, number] {
-  const hex = hexColor.slice(1); // Remove the # in #ffffff.
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  const a = parseInt(hex.substring(6, 8), 16);
-  return [r, g, b, a];
 }
diff --git a/src/viser/client/src/ControlPanel/GuiState.tsx b/src/viser/client/src/ControlPanel/GuiState.tsx
index 2efe5c73b..4d1635376 100644
--- a/src/viser/client/src/ControlPanel/GuiState.tsx
+++ b/src/viser/client/src/ControlPanel/GuiState.tsx
@@ -7,24 +7,25 @@ import { immer } from "zustand/middleware/immer";
 import { ViewerContext } from "../App";
 import { MantineThemeOverride } from "@mantine/core";
 
-export type GuiConfig =
-  | Messages.GuiAddButtonMessage
-  | Messages.GuiAddCheckboxMessage
-  | Messages.GuiAddDropdownMessage
-  | Messages.GuiAddFolderMessage
-  | Messages.GuiAddTabGroupMessage
-  | Messages.GuiAddNumberMessage
-  | Messages.GuiAddRgbMessage
-  | Messages.GuiAddRgbaMessage
-  | Messages.GuiAddSliderMessage
-  | Messages.GuiAddButtonGroupMessage
-  | Messages.GuiAddTextMessage
-  | Messages.GuiAddVector2Message
-  | Messages.GuiAddVector3Message
-  | Messages.GuiAddMarkdownMessage;
 
-export function isGuiConfig(message: Messages.Message): message is GuiConfig {
-  return message.type.startsWith("GuiAdd");
+export type GuiGenerateContextProps<T> = T extends Omit<Messages.AllComponentProps, "type"> ? {
+  id: string,
+  update: (changes: Partial<T>) => T;
+  renderContainer: (containerId: string, incrementFolderDepth?: boolean) => React.ReactNode;
+  folderDepth: number;
+} : never;
+export const GuiGenerateContext = React.createContext<GuiGenerateContextProps<any> | null>(null);
+export type GuiProps<T> = T extends Messages.AllComponentProps ?  Omit<T, "type"> & { id: string }: never;
+export function useGuiComponentContext<T extends Messages.AllComponentProps>() {
+  return React.useContext(GuiGenerateContext)! as GuiGenerateContextProps<GuiProps<T>>;
+}
+export type SetProps<T> = T extends Messages.AllComponentProps ? (id: string, callback: (props: T) => Partial<T>) => void : never;
+
+export interface GuiAttributes {
+  containerId: string;
+  order: number;
+  visible?: boolean;
+  disabled?: boolean;
 }
 
 interface GuiState {
@@ -37,24 +38,25 @@ interface GuiState {
     [containerId: string]: { [id: string]: true } | undefined;
   };
   modals: Messages.GuiModalMessage[];
-  guiOrderFromId: { [id: string]: number };
-  guiConfigFromId: { [id: string]: GuiConfig };
-  guiValueFromId: { [id: string]: any };
+  guiCallbackFromId: { [id: string]: { [callback: string]: (value: any) => void } };
+  guiPropsFromId: { [id: string]: Messages.AllComponentProps };
+  setProps: SetProps;
+  setAttributes: (id: string, callback: (props: GuiAttributes) => GuiAttributes) => void;
   guiAttributeFromId: {
-    [id: string]: { visible?: boolean; disabled?: boolean } | undefined;
+    [id: string]: GuiAttributes | undefined;
   };
 }
 
 interface GuiActions {
   setTheme: (theme: Messages.ThemeConfigurationMessage) => void;
-  addGui: (config: GuiConfig) => void;
-  addModal: (config: Messages.GuiModalMessage) => void;
-  removeModal: (id: string) => void;
+  addGui: (config: Messages.AllComponentProps & { id: string, order: number, container_id: string }) => void;
   setGuiValue: (id: string, value: any) => void;
   setGuiVisible: (id: string, visible: boolean) => void;
   setGuiDisabled: (id: string, visible: boolean) => void;
   removeGui: (id: string) => void;
   resetGui: () => void;
+
+  dispatchCallback: (id: string, callback: string, value: any) => void;
 }
 
 const cleanGuiState: GuiState = {
@@ -73,10 +75,11 @@ const cleanGuiState: GuiState = {
   backgroundAvailable: false,
   guiIdSetFromContainerId: {},
   modals: [],
-  guiOrderFromId: {},
-  guiConfigFromId: {},
-  guiValueFromId: {},
+  setAttributes: () => {},
+  setProps: () => {},
+  guiPropsFromId: {},
   guiAttributeFromId: {},
+  guiCallbackFromId: {},
 };
 
 export function computeRelativeLuminance(color: string) {
@@ -101,43 +104,35 @@ export function useGuiState(initialServer: string) {
           set((state) => {
             state.theme = theme;
           }),
-        addGui: (guiConfig) =>
+        addGui: ({id, order, ...props }: Messages.AllComponentProps & { 
+            id: string, 
+            order: number, 
+            container_id: string }) =>
           set((state) => {
-            state.guiOrderFromId[guiConfig.id] = guiConfig.order;
-            state.guiConfigFromId[guiConfig.id] = guiConfig;
-            if (!(guiConfig.container_id in state.guiIdSetFromContainerId)) {
-              state.guiIdSetFromContainerId[guiConfig.container_id] = {};
+            if (props.type == "Modal") {
+              state.modals.push(modalConfig);
+            } else {
+              state.guiOrderFromId[id] = order;
+              state.guiConfigFromId[id] = props;
+              state.guiCallbackFromId[id] = {};
+              if (!(props.container_id in state.guiIdSetFromContainerId)) {
+                state.guiIdSetFromContainerId[props.container_id] = {};
+              }
+              state.guiIdSetFromContainerId[props.container_id]![id] = true;
             }
-            state.guiIdSetFromContainerId[guiConfig.container_id]![
-              guiConfig.id
-            ] = true;
-          }),
-        addModal: (modalConfig) =>
-          set((state) => {
-            state.modals.push(modalConfig);
           }),
         removeModal: (id) =>
           set((state) => {
             state.modals = state.modals.filter((m) => m.id !== id);
           }),
-        setGuiValue: (id, value) =>
-          set((state) => {
-            state.guiValueFromId[id] = value;
-          }),
-        setGuiVisible: (id, visible) =>
-          set((state) => {
-            state.guiAttributeFromId[id] = {
-              ...state.guiAttributeFromId[id],
-              visible: visible,
-            };
-          }),
-        setGuiDisabled: (id, disabled) =>
-          set((state) => {
-            state.guiAttributeFromId[id] = {
-              ...state.guiAttributeFromId[id],
-              disabled: disabled,
-            };
-          }),
+        setProps: (id, callback) =>
+         set((state) => {
+            state.guiPropsFromId[id] = {...state.guiPropsFromId[id], ...callback(state.guiPropsFromId[id])};
+         }),
+        setAttributes: (id, callback) =>
+         set((state) => {
+            state.guiAttributeFromId[id] = callback(state.guiAttributeFromId[id]);
+         }),
         removeGui: (id) =>
           set((state) => {
             const guiConfig = state.guiConfigFromId[id];
@@ -145,7 +140,7 @@ export function useGuiState(initialServer: string) {
             delete state.guiIdSetFromContainerId[guiConfig.container_id]![id];
             delete state.guiOrderFromId[id];
             delete state.guiConfigFromId[id];
-            delete state.guiValueFromId[id];
+            delete state.guiPropsFromId[id];
             delete state.guiAttributeFromId[id];
           }),
         resetGui: () =>
@@ -153,9 +148,15 @@ export function useGuiState(initialServer: string) {
             state.guiIdSetFromContainerId = {};
             state.guiOrderFromId = {};
             state.guiConfigFromId = {};
-            state.guiValueFromId = {};
+            state.guiPropsFromId = {};
             state.guiAttributeFromId = {};
           }),
+        dispatchCallback: (id, callback, value) =>
+          set((state) => {
+            if (id in state.guiCallbackFromId && callback in state.guiCallbackFromId[id]) {
+              state.guiCallbackFromId[id][callback](value)
+            }
+          }),
       })),
     ),
   )[0];
diff --git a/src/viser/client/src/GeneratedComponent.tsx b/src/viser/client/src/GeneratedComponent.tsx
new file mode 100644
index 000000000..2c9e278c4
--- /dev/null
+++ b/src/viser/client/src/GeneratedComponent.tsx
@@ -0,0 +1,68 @@
+// AUTOMATICALLY GENERATED message interfaces, from Python dataclass definitions.
+// This file should not be manually modified.
+import {
+  AllComponentProps,
+  ButtonProps,
+  TextInputProps,
+  NumberInputProps,
+  SliderProps,
+  CheckboxProps,
+  RgbInputProps,
+  RgbaInputProps,
+  FolderProps,
+  MarkdownProps,
+  TabGroupProps,
+  ModalProps,
+  Vector2InputProps,
+  Vector3InputProps,
+  DropdownProps,
+} from "./WebsocketMessages";
+import Button from "./components/Button";
+import TextInput from "./components/TextInput";
+import NumberInput from "./components/NumberInput";
+import Slider from "./components/Slider";
+import Checkbox from "./components/Checkbox";
+import RgbInput from "./components/RgbInput";
+import RgbaInput from "./components/RgbaInput";
+import Folder from "./components/Folder";
+import Markdown from "./components/Markdown";
+import TabGroup from "./components/TabGroup";
+import Modal from "./components/Modal";
+import Vector2Input from "./components/Vector2Input";
+import Vector3Input from "./components/Vector3Input";
+import Dropdown from "./components/Dropdown";
+
+export default function GeneratedComponent({ type, props }: AllComponentProps) {
+  switch (type) {
+    case "Button":
+      return <Button {...props} />;
+    case "TextInput":
+      return <TextInput {...props} />;
+    case "NumberInput":
+      return <NumberInput {...props} />;
+    case "Slider":
+      return <Slider {...props} />;
+    case "Checkbox":
+      return <Checkbox {...props} />;
+    case "RgbInput":
+      return <RgbInput {...props} />;
+    case "RgbaInput":
+      return <RgbaInput {...props} />;
+    case "Folder":
+      return <Folder {...props} />;
+    case "Markdown":
+      return <Markdown {...props} />;
+    case "TabGroup":
+      return <TabGroup {...props} />;
+    case "Modal":
+      return <Modal {...props} />;
+    case "Vector2Input":
+      return <Vector2Input {...props} />;
+    case "Vector3Input":
+      return <Vector3Input {...props} />;
+    case "Dropdown":
+      return <Dropdown {...props} />;
+    default:
+      throw new Error(`Unknown component type ${type}`);
+  }
+}
diff --git a/src/viser/client/src/WebsocketInterface.tsx b/src/viser/client/src/WebsocketInterface.tsx
index 73dd5a1f6..1043af647 100644
--- a/src/viser/client/src/WebsocketInterface.tsx
+++ b/src/viser/client/src/WebsocketInterface.tsx
@@ -56,12 +56,10 @@ function useMessageHandler() {
   const addSceneNode = viewer.useSceneTree((state) => state.addSceneNode);
   const setTheme = viewer.useGui((state) => state.setTheme);
   const addGui = viewer.useGui((state) => state.addGui);
+  const updateGui = viewer.useGui((state) => state.updateGui);
   const addModal = viewer.useGui((state) => state.addModal);
   const removeModal = viewer.useGui((state) => state.removeModal);
   const removeGui = viewer.useGui((state) => state.removeGui);
-  const setGuiValue = viewer.useGui((state) => state.setGuiValue);
-  const setGuiVisible = viewer.useGui((state) => state.setGuiVisible);
-  const setGuiDisabled = viewer.useGui((state) => state.setGuiDisabled);
   const setClickable = viewer.useSceneTree((state) => state.setClickable);
 
   // Same as addSceneNode, but make a parent in the form of a dummy coordinate
@@ -89,12 +87,19 @@ function useMessageHandler() {
 
   // Return message handler.
   return (message: Message) => {
-    if (isGuiConfig(message)) {
-      addGui(message);
-      return;
-    }
-
     switch (message.type) {
+      case "GuiAddComponentMessage": {
+        const { id, order, props, container_id } = message;
+        addGui({ id, order, container_id, ...props });
+        return;
+      }
+
+      case "GuiUpdateComponentMessage": {
+        const { id, props } = message;
+        updateGui({ id, ...props });
+        return;
+      }
+
       // Request a render.
       case "GetRenderRequestMessage": {
         viewer.getRenderRequest.current = message;
@@ -711,17 +716,20 @@ function useMessageHandler() {
       }
       // Set the value of a GUI input.
       case "GuiSetValueMessage": {
-        setGuiValue(message.id, message.value);
+        const { id, value } = message;
+        updateGui({ id, value });
         return;
       }
       // Set the hidden state of a GUI input.
       case "GuiSetVisibleMessage": {
-        setGuiVisible(message.id, message.visible);
+        const { id, visible } = message;
+        updateGui({ id, visible });
         return;
       }
       // Set the disabled state of a GUI input.
       case "GuiSetDisabledMessage": {
-        setGuiDisabled(message.id, message.disabled);
+        const { id, disabled } = message;
+        updateGui({ id, disabled });
         return;
       }
       // Remove a GUI input.
diff --git a/src/viser/client/src/WebsocketMessages.tsx b/src/viser/client/src/WebsocketMessages.tsx
index 910daa3e5..395537ce2 100644
--- a/src/viser/client/src/WebsocketMessages.tsx
+++ b/src/viser/client/src/WebsocketMessages.tsx
@@ -1,5 +1,200 @@
 // AUTOMATICALLY GENERATED message interfaces, from Python dataclass definitions.
 // This file should not be manually modified.
+export type Property<T> = { path: string } | { value: T };
+
+/** Button component
+ *
+ *
+ * (automatically generated)
+ */
+export interface ButtonProps {
+  type: "Button";
+  label: string;
+  color:
+    | "dark"
+    | "gray"
+    | "red"
+    | "pink"
+    | "grape"
+    | "violet"
+    | "indigo"
+    | "blue"
+    | "cyan"
+    | "green"
+    | "lime"
+    | "yellow"
+    | "orange"
+    | "teal"
+    | null;
+  icon_base64: string | null;
+  disabled: boolean;
+  hint: string | null;
+}
+/** TextInput(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, value: str, label: str, hint: Optional[str], disabled: bool = False)
+ *
+ * (automatically generated)
+ */
+export interface TextInputProps {
+  type: "TextInput";
+  value: string;
+  label: string;
+  hint: string | null;
+  disabled: boolean;
+}
+/** NumberInput(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, value: float, label: str, hint: Optional[str], disabled: bool = False, step: float, min: Optional[float] = None, max: Optional[float] = None, precision: Optional[int] = None)
+ *
+ * (automatically generated)
+ */
+export interface NumberInputProps {
+  type: "NumberInput";
+  value: number;
+  label: string;
+  hint: string | null;
+  disabled: boolean;
+  step: number;
+  min: number | null;
+  max: number | null;
+  precision: number | null;
+}
+/** Slider(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, value: float, label: str, hint: Optional[str], disabled: bool = False, min: Optional[float] = None, max: Optional[float] = None, step: Optional[float] = None, precision: Optional[int] = None)
+ *
+ * (automatically generated)
+ */
+export interface SliderProps {
+  type: "Slider";
+  value: number;
+  label: string;
+  hint: string | null;
+  disabled: boolean;
+  min: number | null;
+  max: number | null;
+  step: number | null;
+  precision: number | null;
+}
+/** Checkbox(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, value: bool, label: str, hint: Optional[str], disabled: bool = False)
+ *
+ * (automatically generated)
+ */
+export interface CheckboxProps {
+  type: "Checkbox";
+  value: boolean;
+  label: string;
+  hint: string | null;
+  disabled: boolean;
+}
+/** RgbInput(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, value: Tuple[int, int, int], label: str, hint: Optional[str], disabled: bool = False)
+ *
+ * (automatically generated)
+ */
+export interface RgbInputProps {
+  type: "RgbInput";
+  value: [number, number, number];
+  label: string;
+  hint: string | null;
+  disabled: boolean;
+}
+/** RgbaInput(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, value: Tuple[int, int, int, int], label: str, hint: Optional[str], disabled: bool = False)
+ *
+ * (automatically generated)
+ */
+export interface RgbaInputProps {
+  type: "RgbaInput";
+  value: [number, number, number, number];
+  label: string;
+  hint: string | null;
+  disabled: boolean;
+}
+/** Folder(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, label: str, expand_by_default: bool = True)
+ *
+ * (automatically generated)
+ */
+export interface FolderProps {
+  type: "Folder";
+  label: string;
+  expand_by_default: boolean;
+}
+/** Markdown(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, markdown: str)
+ *
+ * (automatically generated)
+ */
+export interface MarkdownProps {
+  type: "Markdown";
+  markdown: string;
+}
+/** TabGroup(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, tab_labels: Tuple[str, ...], tab_icons_base64: Tuple[Optional[str], ...], tab_container_ids: Tuple[str, ...])
+ *
+ * (automatically generated)
+ */
+export interface TabGroupProps {
+  type: "TabGroup";
+  tab_labels: string[];
+  tab_icons_base64: (string | null)[];
+  tab_container_ids: string[];
+}
+/** Modal(*, order: float = <property object at 0x7fb18dbf9c10>, id: str = <property object at 0x7fb18dbf9bc0>, title: str)
+ *
+ * (automatically generated)
+ */
+export interface ModalProps {
+  type: "Modal";
+  order: number;
+  id: string;
+  title: string;
+}
+/** Vector2Input(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, value: Tuple[float, float], label: str, hint: Optional[str], disabled: bool = False, step: float, min: Optional[Tuple[float, float]] = None, max: Optional[Tuple[float, float]] = None, precision: Optional[int] = None)
+ *
+ * (automatically generated)
+ */
+export interface Vector2InputProps {
+  type: "Vector2Input";
+  value: [number, number];
+  label: string;
+  hint: string | null;
+  disabled: boolean;
+  step: number;
+  min: [number, number] | null;
+  max: [number, number] | null;
+  precision: number | null;
+}
+/** Vector3Input(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, value: Tuple[float, float, float], label: str, hint: Optional[str], disabled: bool = False, min: Optional[Tuple[float, float, float]], max: Optional[Tuple[float, float, float]], step: float, precision: int)
+ *
+ * (automatically generated)
+ */
+export interface Vector3InputProps {
+  type: "Vector3Input";
+  value: [number, number, number];
+  label: string;
+  hint: string | null;
+  disabled: boolean;
+  min: [number, number, number] | null;
+  max: [number, number, number] | null;
+  step: number;
+  precision: number;
+}
+/** Dropdown(*, order: dataclasses.InitVar[typing.Optional[float]] = <property object at 0x7fb18dbf9c10>, value: Optional[str] = None, label: str, hint: Optional[str], disabled: bool = False, options: Tuple[str, ...])
+ *
+ * (automatically generated)
+ */
+export interface DropdownProps {
+  type: "Dropdown";
+  value: string | null;
+  label: string;
+  hint: string | null;
+  disabled: boolean;
+  options: string[];
+}
+
+/** Add a GUI component.
+ *
+ * (automatically generated)
+ */
+export interface GuiAddComponentMessage {
+  type: "GuiAddComponentMessage";
+  order: number;
+  id: string;
+  container_id: string;
+  props: AllComponentProps;
+}
 /** Message for a posed viewer camera.
  * Pose is in the form T_world_camera, OpenCV convention, +Z forward.
  *
@@ -299,251 +494,6 @@ export interface SceneNodeClickMessage {
 export interface ResetSceneMessage {
   type: "ResetSceneMessage";
 }
-/** GuiAddFolderMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', expand_by_default: 'bool')
- *
- * (automatically generated)
- */
-export interface GuiAddFolderMessage {
-  type: "GuiAddFolderMessage";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  expand_by_default: boolean;
-}
-/** GuiAddMarkdownMessage(order: 'float', id: 'str', markdown: 'str', container_id: 'str')
- *
- * (automatically generated)
- */
-export interface GuiAddMarkdownMessage {
-  type: "GuiAddMarkdownMessage";
-  order: number;
-  id: string;
-  markdown: string;
-  container_id: string;
-}
-/** GuiAddTabGroupMessage(order: 'float', id: 'str', container_id: 'str', tab_labels: 'Tuple[str, ...]', tab_icons_base64: 'Tuple[Union[str, None], ...]', tab_container_ids: 'Tuple[str, ...]')
- *
- * (automatically generated)
- */
-export interface GuiAddTabGroupMessage {
-  type: "GuiAddTabGroupMessage";
-  order: number;
-  id: string;
-  container_id: string;
-  tab_labels: string[];
-  tab_icons_base64: (string | null)[];
-  tab_container_ids: string[];
-}
-/** Base message type containing fields commonly used by GUI inputs.
- *
- * (automatically generated)
- */
-export interface _GuiAddInputBase {
-  type: "_GuiAddInputBase";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: any;
-}
-/** GuiAddButtonMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'bool', color: "Optional[Literal['dark', 'gray', 'red', 'pink', 'grape', 'violet', 'indigo', 'blue', 'cyan', 'green', 'lime', 'yellow', 'orange', 'teal']]", icon_base64: 'Optional[str]')
- *
- * (automatically generated)
- */
-export interface GuiAddButtonMessage {
-  type: "GuiAddButtonMessage";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: boolean;
-  color:
-    | "dark"
-    | "gray"
-    | "red"
-    | "pink"
-    | "grape"
-    | "violet"
-    | "indigo"
-    | "blue"
-    | "cyan"
-    | "green"
-    | "lime"
-    | "yellow"
-    | "orange"
-    | "teal"
-    | null;
-  icon_base64: string | null;
-}
-/** GuiAddSliderMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'float', min: 'float', max: 'float', step: 'Optional[float]', precision: 'int')
- *
- * (automatically generated)
- */
-export interface GuiAddSliderMessage {
-  type: "GuiAddSliderMessage";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: number;
-  min: number;
-  max: number;
-  step: number | null;
-  precision: number;
-}
-/** GuiAddNumberMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'float', precision: 'int', step: 'float', min: 'Optional[float]', max: 'Optional[float]')
- *
- * (automatically generated)
- */
-export interface GuiAddNumberMessage {
-  type: "GuiAddNumberMessage";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: number;
-  precision: number;
-  step: number;
-  min: number | null;
-  max: number | null;
-}
-/** GuiAddRgbMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'Tuple[int, int, int]')
- *
- * (automatically generated)
- */
-export interface GuiAddRgbMessage {
-  type: "GuiAddRgbMessage";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: [number, number, number];
-}
-/** GuiAddRgbaMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'Tuple[int, int, int, int]')
- *
- * (automatically generated)
- */
-export interface GuiAddRgbaMessage {
-  type: "GuiAddRgbaMessage";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: [number, number, number, number];
-}
-/** GuiAddCheckboxMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'bool')
- *
- * (automatically generated)
- */
-export interface GuiAddCheckboxMessage {
-  type: "GuiAddCheckboxMessage";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: boolean;
-}
-/** GuiAddVector2Message(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'Tuple[float, float]', min: 'Optional[Tuple[float, float]]', max: 'Optional[Tuple[float, float]]', step: 'float', precision: 'int')
- *
- * (automatically generated)
- */
-export interface GuiAddVector2Message {
-  type: "GuiAddVector2Message";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: [number, number];
-  min: [number, number] | null;
-  max: [number, number] | null;
-  step: number;
-  precision: number;
-}
-/** GuiAddVector3Message(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'Tuple[float, float, float]', min: 'Optional[Tuple[float, float, float]]', max: 'Optional[Tuple[float, float, float]]', step: 'float', precision: 'int')
- *
- * (automatically generated)
- */
-export interface GuiAddVector3Message {
-  type: "GuiAddVector3Message";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: [number, number, number];
-  min: [number, number, number] | null;
-  max: [number, number, number] | null;
-  step: number;
-  precision: number;
-}
-/** GuiAddTextMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'str')
- *
- * (automatically generated)
- */
-export interface GuiAddTextMessage {
-  type: "GuiAddTextMessage";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: string;
-}
-/** GuiAddDropdownMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'str', options: 'Tuple[str, ...]')
- *
- * (automatically generated)
- */
-export interface GuiAddDropdownMessage {
-  type: "GuiAddDropdownMessage";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: string;
-  options: string[];
-}
-/** GuiAddButtonGroupMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'str', options: 'Tuple[str, ...]')
- *
- * (automatically generated)
- */
-export interface GuiAddButtonGroupMessage {
-  type: "GuiAddButtonGroupMessage";
-  order: number;
-  id: string;
-  label: string;
-  container_id: string;
-  hint: string | null;
-  initial_value: string;
-  options: string[];
-}
-/** GuiModalMessage(order: 'float', id: 'str', title: 'str')
- *
- * (automatically generated)
- */
-export interface GuiModalMessage {
-  type: "GuiModalMessage";
-  order: number;
-  id: string;
-  title: string;
-}
-/** GuiCloseModalMessage(id: 'str')
- *
- * (automatically generated)
- */
-export interface GuiCloseModalMessage {
-  type: "GuiCloseModalMessage";
-  id: string;
-}
 /** Sent server->client to remove a GUI element.
  *
  * (automatically generated)
@@ -698,7 +648,23 @@ export interface FileDownloadPart {
   content: Uint8Array;
 }
 
+export type AllComponentProps =
+  | ButtonProps
+  | TextInputProps
+  | NumberInputProps
+  | SliderProps
+  | CheckboxProps
+  | RgbInputProps
+  | RgbaInputProps
+  | FolderProps
+  | MarkdownProps
+  | TabGroupProps
+  | ModalProps
+  | Vector2InputProps
+  | Vector3InputProps
+  | DropdownProps;
 export type Message =
+  | GuiAddComponentMessage
   | ViewerCameraMessage
   | ScenePointerMessage
   | SceneClickEnableMessage
@@ -725,23 +691,6 @@ export type Message =
   | SetSceneNodeClickableMessage
   | SceneNodeClickMessage
   | ResetSceneMessage
-  | GuiAddFolderMessage
-  | GuiAddMarkdownMessage
-  | GuiAddTabGroupMessage
-  | _GuiAddInputBase
-  | GuiAddButtonMessage
-  | GuiAddSliderMessage
-  | GuiAddNumberMessage
-  | GuiAddRgbMessage
-  | GuiAddRgbaMessage
-  | GuiAddCheckboxMessage
-  | GuiAddVector2Message
-  | GuiAddVector3Message
-  | GuiAddTextMessage
-  | GuiAddDropdownMessage
-  | GuiAddButtonGroupMessage
-  | GuiModalMessage
-  | GuiCloseModalMessage
   | GuiRemoveMessage
   | GuiUpdateMessage
   | GuiSetVisibleMessage
diff --git a/src/viser/client/src/components/Button.tsx b/src/viser/client/src/components/Button.tsx
new file mode 100644
index 000000000..327dc5b66
--- /dev/null
+++ b/src/viser/client/src/components/Button.tsx
@@ -0,0 +1,66 @@
+import { ButtonProps } from '../WebsocketMessages';
+import { useComponentContext } from '../ControlPanel/GuiState';
+import { computeRelativeLuminance } from "../ControlPanel/GuiState";
+import { Box, Button, Image } from '@mantine/core';
+import { WrapInputDefault } from './utils';
+import { useMantineTheme } from '@mantine/core';
+
+
+export default function ButtonComponent({ 
+  onClick, 
+  disabled, 
+  color,
+  label,
+  icon_base64 
+} : ButtonProps) {
+  const theme = useMantineTheme();
+  const id = useComponentContext<ButtonProps>();
+  let inputColor =
+    computeRelativeLuminance(theme.fn.primaryColor()) > 50.0
+    ? theme.colors.gray[9]
+    : theme.white;
+    if (color !== null) {
+      inputColor =
+        computeRelativeLuminance(
+          theme.colors[color][theme.fn.primaryShade()],
+        ) > 50.0
+          ? theme.colors.gray[9]
+          : theme.white;
+    }
+
+  return <WrapInputDefault label={null}>
+      <Button
+        id={id}
+        fullWidth
+        color={color ?? undefined}
+        onClick={onClick}
+        style={{ height: "2.125em" }}
+        styles={{ inner: { color: inputColor + " !important" } }}
+        disabled={disabled}
+        size="sm"
+        leftIcon={
+          icon_base64 === null ? undefined : (
+            <Image
+              /*^In Safari, both the icon's height and width need to be set, otherwise the icon is clipped.*/
+              height="1em"
+              width="1em"
+              opacity={disabled ? 0.3 : 1.0}
+              mr="-0.125em"
+              sx={
+                inputColor === theme.white
+                  ? {
+                      // Make the color white.
+                      filter: !disabled ? "invert(1)" : undefined,
+                    }
+                  : // Icon will be black by default.
+                    undefined
+              }
+              src={"data:image/svg+xml;base64," + icon_base64}
+            />
+          )
+        }
+      >
+        {label}
+      </Button>
+  </WrapInputDefault>
+}
\ No newline at end of file
diff --git a/src/viser/client/src/components/Checkbox.tsx b/src/viser/client/src/components/Checkbox.tsx
new file mode 100644
index 000000000..fb9acf836
--- /dev/null
+++ b/src/viser/client/src/components/Checkbox.tsx
@@ -0,0 +1,56 @@
+import { Box, Tooltip } from '@mantine/core';
+import { WrapInputDefault } from './utils';
+import { Checkbox } from '@mantine/core';
+import { CheckboxProps } from '../WebsocketMessages';
+import { GuiProps } from '../ControlPanel/GuiState';
+import { computeRelativeLuminance } from "../ControlPanel/GuiState";
+import { useMantineTheme } from '@mantine/core';
+
+
+export default function CheckboxComponent({ id, value, disabled, update, hint, ...props}: GuiProps<CheckboxProps>) {
+  const theme = useMantineTheme();
+  let inputColor =
+    computeRelativeLuminance(theme.fn.primaryColor()) > 50.0
+      ? theme.colors.gray[9]
+      : theme.white;
+  let input = (<>
+    <Checkbox
+      id={id}
+      checked={value}
+      size="xs"
+      onChange={(value) => update({ value: value.target.checked })}
+      disabled={disabled}
+      styles={{
+        icon: {
+          color: inputColor + " !important",
+        },
+      }}
+    />
+  </>);
+  if (hint !== null)
+    input = // We need to add <Box /> for inputs that we can't assign refs to.
+      (
+        <Tooltip
+          zIndex={100}
+          label={hint}
+          multiline
+          w="15rem"
+          withArrow
+          openDelay={500}
+          withinPortal
+        >
+          <Box
+            sx={{
+              display:
+                // For checkboxes, we want to make sure that the wrapper
+                // doesn't expand to the full width of the parent. This will
+                // de-center the tooltip.
+                  "inline-block"
+            }}
+          >
+            {input}
+          </Box>
+        </Tooltip>
+      );
+  return <WrapInputDefault hint={null}>{input}</WrapInputDefault>;
+}
\ No newline at end of file
diff --git a/src/viser/client/src/components/Container.tsx b/src/viser/client/src/components/Container.tsx
new file mode 100644
index 000000000..3d1850dfe
--- /dev/null
+++ b/src/viser/client/src/components/Container.tsx
@@ -0,0 +1,41 @@
+export default function GeneratedGuiContainer({
+  // We need to take viewer as input in drei's <Html /> elements, where contexts break.
+  containerId,
+  viewer,
+  folderDepth,
+}: {
+  containerId: string;
+  viewer?: ViewerContextContents;
+  folderDepth?: number;
+}) {
+  if (viewer === undefined) viewer = React.useContext(ViewerContext)!;
+
+  const guiIdSet =
+    viewer.useGui((state) => state.guiIdSetFromContainerId[containerId]) ?? {};
+
+  // Render each GUI element in this container.
+  const guiIdArray = [...Object.keys(guiIdSet)];
+  const guiOrderFromId = viewer!.useGui((state) => state.guiOrderFromId);
+  if (guiIdSet === undefined) return null;
+
+  const guiIdOrderPairArray = guiIdArray.map((id) => ({
+    id: id,
+    order: guiOrderFromId[id],
+  }));
+  const out = (
+    <Box pt="0.75em">
+      {guiIdOrderPairArray
+        .sort((a, b) => a.order - b.order)
+        .map((pair, index) => (
+          <GeneratedInput
+            key={pair.id}
+            id={pair.id}
+            viewer={viewer}
+            folderDepth={folderDepth ?? 0}
+            last={index === guiIdOrderPairArray.length - 1}
+          />
+        ))}
+    </Box>
+  );
+  return out;
+}
\ No newline at end of file
diff --git a/src/viser/client/src/components/Dropdown.tsx b/src/viser/client/src/components/Dropdown.tsx
new file mode 100644
index 000000000..fe2b05ab9
--- /dev/null
+++ b/src/viser/client/src/components/Dropdown.tsx
@@ -0,0 +1,33 @@
+import { Select } from "@mantine/core";
+import { WrapInputDefault } from "./utils";
+import { GuiProps } from "../ControlPanel/GuiState";
+import { DropdownProps } from "../WebsocketMessages";
+
+
+export default function DropdownComponent({ value, update, ...conf }: GuiProps<DropdownProps>) {
+  return (<WrapInputDefault>
+    <Select
+      id={conf.id}
+      radius="xs"
+      value={value}
+      data={conf.options}
+      onChange={(value) => update({ value })}
+      searchable
+      maxDropdownHeight={400}
+      size="xs"
+      styles={{
+        input: {
+          padding: "0.5em",
+          letterSpacing: "-0.5px",
+          minHeight: "1.625rem",
+          height: "1.625rem",
+        },
+      }}
+      // zIndex of dropdown should be >modal zIndex.
+      // On edge cases: it seems like existing dropdowns are always closed when a new modal is opened.
+      zIndex={1000}
+      withinPortal={true}
+    />
+  </WrapInputDefault>);
+}
+
diff --git a/src/viser/client/src/components/Folder.tsx b/src/viser/client/src/components/Folder.tsx
new file mode 100644
index 000000000..7bbb0df67
--- /dev/null
+++ b/src/viser/client/src/components/Folder.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+
+import { FolderProps } from '../WebsocketMessages';
+import { ViewerContext, ViewerContextContents } from "../App";
+import {
+  Collapse,
+  Paper,
+  Box,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { GuiGenerateContext } from "../ControlPanel/GuiState";
+
+
+export default function FolderComponent(conf: FolderProps) {
+  const viewer = React.useContext(ViewerContext)!;
+  const { renderContainer } = React.useContext(GuiGenerateContext)!;
+  const [opened, { toggle }] = useDisclosure(conf.expand_by_default);
+  const guiIdSet = viewer.useGui(
+    (state) => state.guiIdSetFromContainerId[conf.id],
+  );
+  const isEmpty = guiIdSet === undefined || Object.keys(guiIdSet).length === 0;
+
+  const ToggleIcon = opened ? IconChevronUp : IconChevronDown;
+  return (<Box pb={!last ? "0.125em" : 0}>
+    <Paper
+      withBorder
+      pt="0.0625em"
+      mx="xs"
+      mt="xs"
+      mb="sm"
+      sx={{ position: "relative" }}
+    >
+      <Paper
+        sx={{
+          fontSize: "0.875em",
+          position: "absolute",
+          padding: "0 0.375em 0 0.375em",
+          top: 0,
+          left: "0.375em",
+          transform: "translateY(-50%)",
+          cursor: isEmpty ? undefined : "pointer",
+          userSelect: "none",
+          fontWeight: 500,
+        }}
+        onClick={toggle}
+      >
+        {conf.label}
+        <ToggleIcon
+          style={{
+            width: "0.9em",
+            height: "0.9em",
+            strokeWidth: 3,
+            top: "0.1em",
+            position: "relative",
+            marginLeft: "0.25em",
+            marginRight: "-0.1em",
+            opacity: 0.5,
+            display: isEmpty ? "none" : undefined,
+          }}
+        />
+      </Paper>
+      <Collapse in={opened && !isEmpty} pt="0.2em">
+        {renderContainer(conf.id, true)}
+      </Collapse>
+      <Collapse in={!(opened && !isEmpty)}>
+        <Box p="xs"></Box>
+      </Collapse>
+    </Paper>
+  </Box>
+  );
+}
\ No newline at end of file
diff --git a/src/viser/client/src/Markdown.tsx b/src/viser/client/src/components/Markdown.tsx
similarity index 91%
rename from src/viser/client/src/Markdown.tsx
rename to src/viser/client/src/components/Markdown.tsx
index fa7b7db29..dd94105f5 100644
--- a/src/viser/client/src/Markdown.tsx
+++ b/src/viser/client/src/components/Markdown.tsx
@@ -8,6 +8,7 @@ import remarkGfm from "remark-gfm";
 import rehypeColorChips from "rehype-color-chips";
 import {
   Anchor,
+  Box,
   Blockquote,
   Code,
   Image,
@@ -22,6 +23,11 @@ import { visit } from "unist-util-visit";
 import { Transformer } from "unified";
 import { Element, Root } from "hast";
 
+import { ErrorBoundary } from "react-error-boundary";
+import { MarkdownProps } from "../WebsocketMessages";
+
+
+
 // Custom Rehype to clean up code blocks (Mantine makes these annoying to style)
 // Adds "block" to any code non-inline code block, which gets directly passed into
 // the Mantine Code component.
@@ -166,7 +172,7 @@ async function parseMarkdown(markdown: string) {
  * NOTE: Only run on markdown you trust.
  * It might be worth looking into sandboxing all markdown so that it can't run JS.
  */
-export default function Markdown(props: { children?: string }) {
+export function Markdown(props: { children?: string }) {
   const [child, setChild] = useState<ReactNode>(null);
 
   useEffect(() => {
@@ -181,3 +187,16 @@ export default function Markdown(props: { children?: string }) {
 
   return child;
 }
+
+
+
+
+export default function MarkdownComponent(conf: MarkdownProps) {
+  return (<Box pb="xs" px="sm" style={{ maxWidth: "95%" }}>
+    <ErrorBoundary
+        fallback={<Text align="center">Markdown Failed to Render</Text>}
+    >
+        <Markdown>{conf.markdown}</Markdown>
+    </ErrorBoundary>
+  </Box>);
+}
\ No newline at end of file
diff --git a/src/viser/client/src/components/Modal.tsx b/src/viser/client/src/components/Modal.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/viser/client/src/components/NumberInput.tsx b/src/viser/client/src/components/NumberInput.tsx
new file mode 100644
index 000000000..f1b924ff4
--- /dev/null
+++ b/src/viser/client/src/components/NumberInput.tsx
@@ -0,0 +1,33 @@
+import { NumberInput } from "@mantine/core";
+import { WrapInputDefault } from "./utils";
+import { GuiProps } from "../ControlPanel/GuiState";
+import { NumberInputProps } from "../WebsocketMessages";
+
+
+export default function NumberInputComponent({ id, precision, min, max, step, disabled, value, update }: GuiProps<NumberInputProps>) {
+  return (<WrapInputDefault>
+    <NumberInput
+      id={id}
+      value={value}
+      precision={precision ?? undefined}
+      min={min ?? undefined}
+      max={max ?? undefined}
+      step={step ?? undefined}
+      size="xs"
+      onChange={(value) => {
+        // Ignore empty values.
+        value !== "" && update({ value });
+      }}
+      styles={{
+        input: {
+          minHeight: "1.625rem",
+          height: "1.625rem",
+        },
+      }}
+      disabled={disabled}
+      stepHoldDelay={500}
+      stepHoldInterval={(t) => Math.max(1000 / t ** 2, 25)}
+    />
+  </WrapInputDefault>);
+}
+
diff --git a/src/viser/client/src/components/RgbInput.tsx b/src/viser/client/src/components/RgbInput.tsx
new file mode 100644
index 000000000..07579b0f1
--- /dev/null
+++ b/src/viser/client/src/components/RgbInput.tsx
@@ -0,0 +1,25 @@
+import { ColorInput } from "@mantine/core";
+import { hexToRgb, rgbToHex, WrapInputDefault } from "./utils";
+import { GuiProps } from "../ControlPanel/GuiState";
+import { RgbInputProps } from "../WebsocketMessages";
+
+
+export default function RgbInputComponent({ disabled, value, update }: GuiProps<RgbInputProps>) {
+  return (<WrapInputDefault>
+    <ColorInput
+      disabled={disabled}
+      size="xs"
+      value={rgbToHex(value)}
+      onChange={(v) => update({ value: hexToRgb(v) })}
+      format="hex"
+      // zIndex of dropdown should be >modal zIndex.
+      // On edge cases: it seems like existing dropdowns are always closed when a new modal is opened.
+      dropdownZIndex={1000}
+      withinPortal={true}
+      styles={{
+        input: { height: "1.625rem", minHeight: "1.625rem" },
+        icon: { transform: "scale(0.8)" },
+      }}
+    />
+  </WrapInputDefault>);
+}
\ No newline at end of file
diff --git a/src/viser/client/src/components/RgbaInput.tsx b/src/viser/client/src/components/RgbaInput.tsx
new file mode 100644
index 000000000..7fc233331
--- /dev/null
+++ b/src/viser/client/src/components/RgbaInput.tsx
@@ -0,0 +1,22 @@
+import { ColorInput } from "@mantine/core";
+import { hexToRgba, rgbaToHex, WrapInputDefault } from "./utils";
+import { GuiProps } from "../ControlPanel/GuiState";
+import { RgbaInputProps } from "../WebsocketMessages";
+
+
+export default function RgbaInputComponent({ disabled, value, update }: GuiProps<RgbaInputProps>) {
+  return (<WrapInputDefault>
+    <ColorInput
+      disabled={disabled}
+      size="xs"
+      value={rgbaToHex(value)}
+      onChange={(v) => update({ value: hexToRgba(v)})}
+      format="hexa"
+      // zIndex of dropdown should be >modal zIndex.
+      // On edge cases: it seems like existing dropdowns are always closed when a new modal is opened.
+      dropdownZIndex={1000}
+      withinPortal={true}
+      styles={{ input: { height: "1.625rem", minHeight: "1.625rem" } }}
+    />
+  </WrapInputDefault>);
+}
\ No newline at end of file
diff --git a/src/viser/client/src/components/Slider.tsx b/src/viser/client/src/components/Slider.tsx
new file mode 100644
index 000000000..e302a99bf
--- /dev/null
+++ b/src/viser/client/src/components/Slider.tsx
@@ -0,0 +1,74 @@
+import { Flex, Box, Slider, NumberInput, Text } from '@mantine/core';
+import { WrapInputDefault } from "./utils";
+import { GuiProps } from "../ControlPanel/GuiState";
+import { SliderProps } from "../WebsocketMessages";
+
+
+export default function RgbInputComponent({ disabled, value, update, ...conf }: GuiProps<SliderProps>) {
+  const min = conf.min ?? 0;
+  const max = conf.max ?? 100;
+  return (<WrapInputDefault>
+        <Flex justify="space-between">
+          <Box sx={{ flexGrow: 1 }}>
+            <Slider
+              id={conf.id}
+              size="xs"
+              thumbSize={0}
+              styles={(theme) => ({
+                thumb: {
+                  background: theme.fn.primaryColor(),
+                  borderRadius: "0.1em",
+                  height: "0.75em",
+                  width: "0.625em",
+                },
+              })}
+              pt="0.2em"
+              showLabelOnHover={false}
+              min={min}
+              max={max}
+              step={conf.step ?? undefined}
+              precision={conf.precision ?? undefined}
+              value={value}
+              onChange={(value) => update({ value })}
+              marks={[{ value: min }, { value: max }]}
+              disabled={disabled}
+            />
+            <Flex
+              justify="space-between"
+              fz="0.6rem"
+              c="dimmed"
+              lh="1.2em"
+              lts="-0.5px"
+              mt="-0.0625em"
+              mb="-0.4em"
+            >
+              <Text>{parseInt(min.toFixed(6))}</Text>
+              <Text>{parseInt(max.toFixed(6))}</Text>
+            </Flex>
+          </Box>
+          <NumberInput
+            value={value}
+            onChange={(value) => {
+              // Ignore empty values.
+              value !== "" && update({ value });
+            }}
+            size="xs"
+            min={min}
+            max={max}
+            hideControls
+            step={conf.step ?? undefined}
+            precision={conf.precision ?? undefined}
+            sx={{ width: "3rem" }}
+            styles={{
+              input: {
+                padding: "0.375em",
+                letterSpacing: "-0.5px",
+                minHeight: "1.875em",
+                height: "1.875em",
+              },
+            }}
+            ml="xs"
+          />
+        </Flex>
+        </WrapInputDefault>);
+}
\ No newline at end of file
diff --git a/src/viser/client/src/components/TabGroup.tsx b/src/viser/client/src/components/TabGroup.tsx
new file mode 100644
index 000000000..a153d2ea0
--- /dev/null
+++ b/src/viser/client/src/components/TabGroup.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Tabs, Image } from '@mantine/core';
+import { TabGroupProps } from '../WebsocketMessages';
+import { GuiGenerateContext } from '../ControlPanel/GuiState';
+
+
+export default function GeneratedTabGroup({ conf }: { conf: TabGroupProps }) {
+    const [tabState, setTabState] = React.useState<TabsValue>("0");
+    const { renderContainer } = React.useContext(GuiGenerateContext)!;
+    const icons = conf.tab_icons_base64;
+  
+    return (
+      <Tabs
+        radius="xs"
+        value={tabState}
+        onTabChange={setTabState}
+        sx={{ marginTop: "-0.75em" }}
+      >
+        <Tabs.List>
+          {conf.tab_labels.map((label, index) => (
+            <Tabs.Tab
+              value={index.toString()}
+              key={index}
+              icon={
+                icons[index] === null ? undefined : (
+                  <Image
+                    /*^In Safari, both the icon's height and width need to be set, otherwise the icon is clipped.*/
+                    height={"1.125em"}
+                    width={"1.125em"}
+                    sx={(theme) => ({
+                      filter:
+                        theme.colorScheme == "dark" ? "invert(1)" : undefined,
+                    })}
+                    src={"data:image/svg+xml;base64," + icons[index]}
+                  />
+                )
+              }
+            >
+              {label}
+            </Tabs.Tab>
+          ))}
+        </Tabs.List>
+        {conf.tab_container_ids.map((containerId, index) => (
+          <Tabs.Panel value={index.toString()} key={containerId}>
+            {renderContainer(containerId)}
+          </Tabs.Panel>
+        ))}
+      </Tabs>
+    );
+  }
\ No newline at end of file
diff --git a/src/viser/client/src/components/TextInput.tsx b/src/viser/client/src/components/TextInput.tsx
new file mode 100644
index 000000000..3f44ec5e9
--- /dev/null
+++ b/src/viser/client/src/components/TextInput.tsx
@@ -0,0 +1,23 @@
+import { TextInput } from "@mantine/core";
+import { TextInputProps } from "../WebsocketMessages";
+import { GuiProps } from "../ControlPanel/GuiState";
+import { WrapInputDefault } from "./utils";
+
+export default function TextInputComponent({ id, value, disabled, update }: GuiProps<TextInputProps>) {
+  return <WrapInputDefault>
+    <TextInput
+      id={id}
+      value={value}
+      size="xs"
+      onChange={(e) => update({ value: e.target.value})}
+      styles={{
+      input: {
+          minHeight: "1.625rem",
+          height: "1.625rem",
+          padding: "0 0.5em",
+      },
+      }}
+      disabled={disabled}
+      />
+  </WrapInputDefault>
+}
\ No newline at end of file
diff --git a/src/viser/client/src/components/Vector2Input.tsx b/src/viser/client/src/components/Vector2Input.tsx
new file mode 100644
index 000000000..ed4d92700
--- /dev/null
+++ b/src/viser/client/src/components/Vector2Input.tsx
@@ -0,0 +1,20 @@
+import { WrapInputDefault, VectorInput } from "./utils";
+import { GuiProps } from "../ControlPanel/GuiState";
+import { Vector2InputProps } from "../WebsocketMessages";
+
+
+export default function Vector2InputComponent({ disabled, value, update, ...conf }: GuiProps<Vector2InputProps>) {
+  return (<WrapInputDefault>
+        <VectorInput
+          id={conf.id}
+          n={2}
+          value={value}
+          onChange={(value) => update({ value: value as [number, number] })}
+          min={conf.min}
+          max={conf.max}
+          step={conf.step}
+          precision={conf.precision ?? undefined}
+          disabled={disabled}
+        />
+  </WrapInputDefault>);
+}
\ No newline at end of file
diff --git a/src/viser/client/src/components/Vector3Input.tsx b/src/viser/client/src/components/Vector3Input.tsx
new file mode 100644
index 000000000..b782f9758
--- /dev/null
+++ b/src/viser/client/src/components/Vector3Input.tsx
@@ -0,0 +1,20 @@
+import { WrapInputDefault, VectorInput } from "./utils";
+import { GuiProps } from "../ControlPanel/GuiState";
+import { Vector3InputProps } from "../WebsocketMessages";
+
+
+export default function Vector3InputComponent({ disabled, value, update, ...conf }: GuiProps<Vector3InputProps>) {
+  return (<WrapInputDefault>
+    <VectorInput
+      id={conf.id}
+      n={3}
+      value={value}
+      onChange={(value) => update({ value: value as [number, number, number] })}
+      min={conf.min}
+      max={conf.max}
+      step={conf.step}
+      precision={conf.precision ?? undefined}
+      disabled={disabled}
+    />
+  </WrapInputDefault>);
+}
\ No newline at end of file
diff --git a/src/viser/client/src/components/utils.tsx b/src/viser/client/src/components/utils.tsx
new file mode 100644
index 000000000..7481b84b9
--- /dev/null
+++ b/src/viser/client/src/components/utils.tsx
@@ -0,0 +1,178 @@
+import React from 'react';
+import { Box, Tooltip, Flex, NumberInput, Text } from '@mantine/core';
+import { GuiGenerateContext } from '../ControlPanel/GuiState';
+
+
+export function WrapInputDefault({ children, label, hint }: { children: React.ReactNode, label?: string | null, hint?: string | null }) {
+  const { id, folderDepth, _hint, _label } = React.useContext(GuiGenerateContext)!;
+  label = label === undefined ? _label : label;
+  hint = hint === undefined ? _hint : hint;
+  if (hint !== null && hint !== undefined)
+    children = // We need to add <Box /> for inputs that we can't assign refs to.
+      (
+        <Tooltip
+          zIndex={100}
+          label={hint}
+          multiline
+          w="15rem"
+          withArrow
+          openDelay={500}
+          withinPortal
+        >
+          <Box sx={{ display: "block" }}>
+            {children}
+          </Box>
+        </Tooltip>
+      );
+
+  if (label !== null && label !== undefined) {
+    children = (
+      <LabeledInput
+        id={id}
+        label={label}
+        input={children}
+        folderDepth={folderDepth}
+      />
+    );
+  }
+
+  return (
+    <Box pb="0.5em" px="xs">
+      {children}
+    </Box>
+  );
+}
+
+
+// Color conversion helpers.
+export function rgbToHex([r, g, b]: [number, number, number]): string {
+  const hexR = r.toString(16).padStart(2, "0");
+  const hexG = g.toString(16).padStart(2, "0");
+  const hexB = b.toString(16).padStart(2, "0");
+  return `#${hexR}${hexG}${hexB}`;
+}
+
+export function hexToRgb(hexColor: string): [number, number, number] {
+  const hex = hexColor.slice(1); // Remove the # in #ffffff.
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return [r, g, b];
+}
+export function rgbaToHex([r, g, b, a]: [number, number, number, number]): string {
+  const hexR = r.toString(16).padStart(2, "0");
+  const hexG = g.toString(16).padStart(2, "0");
+  const hexB = b.toString(16).padStart(2, "0");
+  const hexA = a.toString(16).padStart(2, "0");
+  return `#${hexR}${hexG}${hexB}${hexA}`;
+}
+
+export function hexToRgba(hexColor: string): [number, number, number, number] {
+  const hex = hexColor.slice(1); // Remove the # in #ffffff.
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const a = parseInt(hex.substring(6, 8), 16);
+  return [r, g, b, a];
+}
+
+
+export function VectorInput(
+  props:
+    | {
+        id: string;
+        n: 2;
+        value: [number, number];
+        min: [number, number] | null;
+        max: [number, number] | null;
+        step: number;
+        precision?: number;
+        onChange: (value: number[]) => void;
+        disabled: boolean;
+      }
+    | {
+        id: string;
+        n: 3;
+        value: [number, number, number];
+        min: [number, number, number] | null;
+        max: [number, number, number] | null;
+        step: number;
+        precision?: number;
+        onChange: (value: number[]) => void;
+        disabled: boolean;
+      },
+) {
+  return (
+    <Flex justify="space-between" style={{ columnGap: "0.5em" }}>
+      {[...Array(props.n).keys()].map((i) => (
+        <NumberInput
+          id={i === 0 ? props.id : undefined}
+          key={i}
+          value={props.value[i]}
+          onChange={(v) => {
+            const updated = [...props.value];
+            updated[i] = v === "" ? 0.0 : v;
+            props.onChange(updated);
+          }}
+          size="xs"
+          styles={{
+            root: { flexGrow: 1, width: 0 },
+            input: {
+              paddingLeft: "0.5em",
+              paddingRight: "1.75em",
+              textAlign: "right",
+              minHeight: "1.875em",
+              height: "1.875em",
+            },
+            rightSection: { width: "1.2em" },
+            control: {
+              width: "1.1em",
+            },
+          }}
+          precision={props.precision}
+          step={props.step}
+          min={props.min === null ? undefined : props.min[i]}
+          max={props.max === null ? undefined : props.max[i]}
+          stepHoldDelay={500}
+          stepHoldInterval={(t) => Math.max(1000 / t ** 2, 25)}
+          disabled={props.disabled}
+        />
+      ))}
+    </Flex>
+  );
+}
+
+/** GUI input with a label horizontally placed to the left of it. */
+export function LabeledInput(props: {
+  id: string;
+  label: string;
+  input: React.ReactNode;
+  folderDepth: number;
+}) {
+  return (
+    <Flex align="center">
+      <Box
+        // The per-layer offset here is just eyeballed.
+        w={`${7.25 - props.folderDepth * 0.6375}em`}
+        pr="xs"
+        sx={{ flexShrink: 0, position: "relative" }}
+      >
+        <Text
+          c="dimmed"
+          fz="0.875em"
+          fw="450"
+          lh="1.375em"
+          lts="-0.75px"
+          unselectable="off"
+          sx={{
+            width: "100%",
+            boxSizing: "content-box",
+          }}
+        >
+          <label htmlFor={props.id}>{props.label}</label>
+        </Text>
+      </Box>
+      <Box sx={{ flexGrow: 1 }}>{props.input}</Box>
+    </Flex>
+  );
+}
\ No newline at end of file
diff --git a/src/viser/infra/__init__.py b/src/viser/infra/__init__.py
index fa67e909d..8c81627bf 100644
--- a/src/viser/infra/__init__.py
+++ b/src/viser/infra/__init__.py
@@ -18,4 +18,5 @@
 from ._messages import Message as Message
 from ._typescript_interface_gen import (
     generate_typescript_interfaces as generate_typescript_interfaces,
+    generate_typescript_components as generate_typescript_components,
 )
diff --git a/src/viser/infra/_typescript_interface_gen.py b/src/viser/infra/_typescript_interface_gen.py
index 84ba23c23..82b834036 100644
--- a/src/viser/infra/_typescript_interface_gen.py
+++ b/src/viser/infra/_typescript_interface_gen.py
@@ -1,5 +1,6 @@
+from functools import partial
 import dataclasses
-from typing import Any, ClassVar, Type, Union, cast, get_type_hints
+from typing import Any, ClassVar, Type, Union, cast, get_type_hints, Dict, Tuple
 
 import numpy as onp
 from typing_extensions import Literal, get_args, get_origin, is_typeddict
@@ -10,6 +11,7 @@
     LiteralAlt = Literal  # type: ignore
 
 from ._messages import Message
+from .._gui_components import Component, Property
 
 _raw_type_mapping = {
     bool: "boolean",
@@ -25,15 +27,28 @@
 }
 
 
-def _get_ts_type(typ: Type[Any]) -> str:
+# def _is_property(typ: Type[Any]) -> bool:
+#     if get_origin(typ) is not Union:
+#         return False
+#     if len(get_args(typ)) != 2:
+#         return False
+#     base_type = get_args(typ)[0]
+#     link_type = get_args(type)[1]
+#     if get_origin(link_type) is not Link:
+#     get_args(typ) == (Link,)
+
+
+def _get_ts_type(typ: Type[Any], known_types: Dict[Type, str]) -> str:
     origin_typ = get_origin(typ)
 
+    if typ in known_types:
+        return known_types[typ]
     if origin_typ is tuple:
         args = get_args(typ)
         if len(args) == 2 and args[1] == ...:
-            return _get_ts_type(args[0]) + "[]"
+            return _get_ts_type(args[0], known_types) + "[]"
         else:
-            return "[" + ", ".join(map(_get_ts_type, args)) + "]"
+            return "[" + ", ".join(map(partial(_get_ts_type, known_types=known_types), args)) + "]"
     elif origin_typ in (Literal, LiteralAlt):
         return " | ".join(
             map(
@@ -41,12 +56,15 @@ def _get_ts_type(typ: Type[Any]) -> str:
                 get_args(typ),
             )
         )
+    elif origin_typ is Property:
+        subtype = _get_ts_type(get_args(typ)[0], known_types)
+        return "Property<" + subtype + ">"
     elif origin_typ is Union:
         return (
             "("
             + " | ".join(
                 map(
-                    _get_ts_type,
+                    partial(_get_ts_type, known_types=known_types),
                     get_args(typ),
                 )
             )
@@ -57,7 +75,7 @@ def _get_ts_type(typ: Type[Any]) -> str:
 
         def fmt(key):
             val = hints[key]
-            ret = f"'{key}'" + ": " + _get_ts_type(val)
+            ret = f"'{key}'" + ": " + _get_ts_type(val, known_types)
             return ret
 
         ret = "{" + ", ".join(map(fmt, hints)) + "}"
@@ -66,40 +84,99 @@ def fmt(key):
         # Like get_origin(), but also supports numpy.typing.NDArray[dtype].
         typ = cast(Any, getattr(typ, "__origin__", typ))
 
+        if typ not in _raw_type_mapping:
+            breakpoint()
+
         assert typ in _raw_type_mapping, f"Unsupported type {typ}"
         return _raw_type_mapping[typ]
 
 
-def generate_typescript_interfaces(message_cls: Type[Message]) -> str:
+def generate_typescript_components() -> str:
+    component_types = get_args(Component)
+    known_types = {t: t.__name__ + "Props" for t in component_types}
+    known_types[Component] = "AllComponentProps"
+
+    lines = []
+    lines.append("import {")
+    lines.append("  AllComponentProps,")
+    for cls in component_types:
+        lines.append(f"  {cls.__name__ + 'Props'},")
+    lines.append("} from './WebsocketMessages';")
+    for cls in component_types:
+        cname = cls.__name__
+        lines.append(f"import {cname} from './components/{cname}';")
+    lines.append("")
+    lines.append("")
+    lines.append("export default function GeneratedComponent({type, props}: AllComponentProps) {")
+    lines.append("  switch (type) {")
+    for cls in component_types:
+        lines.append(f'    case "{cls.__name__}":')
+        lines.append(f"      return <{cls.__name__} {{...props}} />;")
+    
+    lines.append("    default:")
+    lines.append("      throw new Error(`Unknown component type ${type}`);")
+    lines.append("  }")
+    lines.append("}")
+
+    return (
+        "\n".join(
+            [
+                (
+                    "// AUTOMATICALLY GENERATED message interfaces, from Python"
+                    " dataclass definitions."
+                ),
+                "// This file should not be manually modified.",
+                "",
+            ]
+        )
+        + "\n".join(lines) + "\n"
+    )
+
+
+def generate_typescript_interfaces(message_cls: Type[Message]) -> Tuple[str, str]:
     """Generate TypeScript definitions for all subclasses of a base message class."""
     out_lines = []
     message_types = message_cls.get_subclasses()
+    component_types = get_args(Component)
+    known_types = {t: t.__name__ for t in component_types}
+    known_types[Component] = "AllComponentProps"
 
-    # Generate interfaces for each specific message.
-    for cls in message_types:
-        if cls.__doc__ is not None:
-            docstring = "\n * ".join(
-                map(lambda line: line.strip(), cls.__doc__.split("\n"))
-            )
-            out_lines.append(f"/** {docstring}")
-            out_lines.append(" *")
-            out_lines.append(" * (automatically generated)")
-            out_lines.append(" */")
-
-        out_lines.append(f"export interface {cls.__name__} " + "{")
-        out_lines.append(f'  type: "{cls.__name__}";')
-        field_names = set([f.name for f in dataclasses.fields(cls)])  # type: ignore
-        for name, typ in get_type_hints(cls).items():
-            if typ == ClassVar[str]:
-                typ = f'"{getattr(cls, name)}"'
-            elif name in field_names:
-                typ = _get_ts_type(typ)
-            else:
-                continue
-            out_lines.append(f"  {name}: {typ};")
-        out_lines.append("}")
+    # Add common property interface.
+    out_lines.append("export type Property<T> = { path: string; } | { value: T };")
     out_lines.append("")
 
+    # Generate interfaces for each specific message.
+    for types, postfix in [(component_types, "Props"), (message_types, "")]:
+        for cls in types:
+            if cls.__doc__ is not None:
+                docstring = "\n * ".join(
+                    map(lambda line: line.strip(), cls.__doc__.split("\n"))
+                )
+                out_lines.append(f"/** {docstring}")
+                out_lines.append(" *")
+                out_lines.append(" * (automatically generated)")
+                out_lines.append(" */")
+
+            out_lines.append(f"export interface {cls.__name__ + postfix} " + "{")
+            out_lines.append(f'  type: "{cls.__name__}";')
+            field_names = set([f.name for f in dataclasses.fields(cls)])  # type: ignore
+            for name, typ in get_type_hints(cls).items():
+                if typ == ClassVar[str]:
+                    typ = f'"{getattr(cls, name)}"'
+                elif name in field_names:
+                    typ = _get_ts_type(typ, known_types)
+                else:
+                    continue
+                out_lines.append(f"  {name}: {typ};")
+            out_lines.append("}")
+        out_lines.append("")
+
+    # Generate union type over all component props.
+    out_lines.append("export type AllComponentProps = ")
+    for cls in component_types:
+        out_lines.append(f"  | {cls.__name__ + 'Props'}")
+    out_lines[-1] = out_lines[-1] + ";"
+
     # Generate union type over all messages.
     out_lines.append("export type Message = ")
     for cls in message_types:
diff --git a/sync_message_defs.py b/sync_message_defs.py
index 6a22eba43..57fe3c598 100644
--- a/sync_message_defs.py
+++ b/sync_message_defs.py
@@ -20,3 +20,14 @@
 
     # Run prettier.
     subprocess.run(args=["npx", "prettier", "-w", str(target_path)], check=False)
+
+    # Write typescript components
+    target_path = pathlib.Path(__file__).parent / pathlib.Path(
+        "src/viser/client/src/GeneratedComponent.tsx"
+    )
+    assert target_path.exists()
+    target_path.write_text(viser.infra.generate_typescript_components())
+    print(f"Wrote to {target_path}")
+
+    # Run prettier.
+    subprocess.run(args=["npx", "prettier", "-w", str(target_path)], check=False)