---
title: "Controller Decorator Visualizer"
description: "An interactive example showing how RadiantController decorators wire authored DOM, host attributes, and reactive controller state together."
group: Examples
order: 2
---

import { ControllerDecoratorVisualizer } from '@/components/controller-decorator-visualizer';

export const config = {
	dependencies: {
		components: [ControllerDecoratorVisualizer],
	},
};

# Controller Decorator Visualizer

How `RadiantController` turns authored HTML into a reactive surface: attributes in, events in, refs out, state in between.

Wire a host with `data-controller`. The controller then:

- reads host attributes with `@attr(...)`
- copies reactive fields onto authored nodes with `@bindTo(...)`
- resolves authored refs with `@query(...)` when it needs a live handle
- reacts to button input with `@onEvent(...)`
- stores controller-local values with `@state`

<ControllerDecoratorVisualizer />

The selector is a `rui-radio-group`. Its browser registration gives the radios a shared name and keeps one option selected; the controller uses each change to update the authored status nodes.

## The Pattern

`RadiantController` sits on markup you already have — server templates, CMS output, hand-written HTML — and keeps attributes, events, refs, and reactive state synchronized.

The DOM stays the structure source of truth. The controller is the behavior layer.