Introduction

Radiant is a reactive host toolkit with three package layers that work together:

• @ecopages/radiant for RadiantElement, RadiantController, decorators, lifecycle, context, and host rendering behavior
• @ecopages/jsx for TSX authoring, DOM mounting, SSR serialization, and hydration helpers
• @ecopages/signals for renderer-agnostic signals, effects, watchers, and stores

Start Here

The primary workflow is:

1. Install @ecopages/radiant and @ecopages/jsx
2. Choose a host style: RadiantElement for custom elements, or RadiantController for behavior attached to authored DOM
3. Override render() when that host should own a JSX view. Skip render() and use @bindTo when it should enhance authored light DOM.
4. Reuse the same decorators, bindings, context, and reactive patterns across both host types

Shared Reactive Host

RadiantElement and RadiantController both implement the same reactive host contract.

That shared surface is what lets the same decorator layer define fields, bindings, context reactions, and tracked reads without depending on one specific host class.

In practice, the split is simple:

1. Use RadiantElement when you want the host to be a real custom element with its own public tag contract.
2. Use RadiantController when the DOM should stay authored outside the class and the controller should enhance or render inside that existing host.
3. Use the same reactive fields, bindings, events, and context patterns either way.

Radiant still keeps browser primitives visible and still favors light DOM by default. That keeps styling, DOM inspection, and authored child content straightforward, while avoiding a separate abstraction for controller-driven hosts.

Getting Started

If you're new to Radiant, we recommend starting with the following guides:

1. Installation - Set up the package combination you need.
2. Hydration - Learn the current SSR-to-client attach model for JSX and Radiant hosts.
3. Best Practices - Learn the recommended host patterns and when to split element and controller responsibilities.
4. RadiantElement - Start with the custom-element host base class.
5. JSX Overview - Understand the TSX authoring layer.
6. Signals Overview - Understand the standalone reactive core.

For agents

This site publishes skill.txt, SKILL.md, and llms.txt. Start with the skill pack, then use llms.txt as the generated docs index.