dataclass

class trame.widgets.dataclass.Gui(**kwargs)

Bases: AbstractElement

Renders the auto-generated GUI template for a StateDataModel instance.

The component looks up the class definition registered for the bound instance and renders the Vue template returned by generate_gui(). Bind the target instance via the instance attribute:

dataclass.Gui(instance=(f"'{model._id}'",))

class trame.widgets.dataclass.Provider(name, **kwargs)

Bases: AbstractElement

Wraps a StateDataModel instance and exposes it to a scoped Vue slot.

Within the slot, the bound model is available as the variable name and a boolean {name}_available indicates whether the instance has been received by the client.

Two common patterns:

1. Fixed instance — use the provide_as shorthand on the model itself:

   with model.provide_as("user"):
       vuetify.VTextField(v_model=("user.name",))
   

2. Reactive instance — bind to a trame state variable that holds the instance ID, so the provided model can change at runtime:

   with dataclass.Provider(name="active_user", instance=("active_user_id", None)):
       html.Pre("{{ JSON.stringify(active_user, null, 2) }}")