---
title: "Overview"
description: "Learn how RadiantElement, RadiantController, JSX, and Signals fit together in the Radiant ecosystem."
group: Getting Started
order: 1
---

import { RuiAlert, RuiAlertDescription, RuiAlertTitle } from '@ecopages/radiant-ui/alert';

# 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

<RuiAlert variant="info" layout="banner" class="unstyled">
  <RuiAlertTitle>NOTE</RuiAlertTitle>
  <RuiAlertDescription>
    <p>
      <code>@ecopages/signals</code> installs automatically with <code>@ecopages/radiant</code>. Add it
      explicitly only for standalone reactive use outside Radiant.
    </p>
  </RuiAlertDescription>
</RuiAlert>

## 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](/docs/getting-started/installation) - Set up the package combination you need.
2. [Hydration](/docs/ssr/hydration) - Learn the current SSR-to-client attach model for JSX and Radiant hosts.
3. [Best Practices](/docs/getting-started/best-practices) - Learn the recommended host patterns and when to split element and controller responsibilities.
4. [RadiantElement](/docs/components/radiant-element) - Start with the custom-element host base class.
5. [JSX Overview](/docs/packages/jsx-overview) - Understand the TSX authoring layer.
6. [Signals Overview](/docs/packages/signals-overview) - Understand the standalone reactive core.

## For agents

This site publishes [`skill.txt`](/skill.txt), [`SKILL.md`](/skill/SKILL.md), and [`llms.txt`](/llms.txt). Start with the skill pack, then use `llms.txt` as the generated docs index.