Radiate Framework

4.4.1 verified Fri May 01 auth: no javascript

Radiate is a front-end framework by Stiona for building reactive web interfaces. Current stable version is 4.4.1. It emphasizes a component-based architecture with a reactive binding system, offering a lightweight alternative to larger frameworks like React or Vue. The framework includes its own routing, state management, and templating engine. Release cadence appears irregular; version 4.x has been stable for some time. Key differentiators include a minimal learning curve and integration with Stiona ecosystem tools. Suitable for building single-page applications with a focus on simplicity and performance.

Common errors

error Error: Cannot find module 'radiate-framework' ↓

cause Package not installed or incorrect import path.

fix

Run npm install radiate-framework and ensure import uses package name exactly: import radiate from 'radiate-framework'.

error TypeError: radiate.mount is not a function ↓

cause Using default export incorrectly or mixing CJS/ESM.

fix

Verify import: import radiate from 'radiate-framework'; and confirm using v4+ (ESM only).

error Cannot read properties of undefined (reading 'value') ↓

cause Accessing .value on a reactive variable that is not initialized or is not a reactive object.

fix

Ensure reactive state is created with reactive() and accessed via .value for primitives.

Warnings

breaking v4.0.0 migration: replaced CommonJS with ESM. Existing CommonJS code will not work. ↓

fix Update import statements to use ES module imports (e.g., import radiate from 'radiate-framework').

breaking v4.0.0: removed RxJS dependency; reactive state API changed from Observable to reactive() function. ↓

fix Replace new Observable() calls with reactive() and use .value property instead of subscription.

deprecated Radiate.createApp() is deprecated in v4.4.0; use radiate.mount() directly. ↓

fix Replace createApp(App).mount('#app') with radiate.mount(App, '#app').

gotcha Reactive state mutation must be done via assignment to .value (e.g., state.count.value++), not direct property mutation. ↓

fix Use this.state.count = this.state.count.value + 1 or refactor to use set() method.

Install

npm install radiate-framework

yarn add radiate-framework

pnpm add radiate-framework

Imports

radiate
wrong
```
const radiate = require('radiate-framework')
```
correct
```
import radiate from 'radiate-framework'
```
Default import is the primary way to use the framework. CommonJS require is not supported in v4+ (ESM only).

Component

wrong

import Component from 'radiate-framework/component'

correct

import { Component } from 'radiate-framework'

Named export from the main package. Do not try to import from a subpath.

reactive

wrong

const reactive = require('radiate-framework').reactive

correct

import { reactive } from 'radiate-framework'

Named export for reactive state. CommonJS pattern is incorrect in ESM-only context.

Router
```
import { Router } from 'radiate-framework'
```
Routing is built-in and exported as a named symbol.

Quickstart

Creates a reactive counter component using Radiate's Component class, reactive state, and html template literal, then mounts it to the DOM.

import radiate, { Component, reactive, html } from 'radiate-framework';

class App extends Component {
  state = reactive({ count: 0 });

  increment() {
    this.state.count++;
  }

  render() {
    return html`
      <div>
        <h1>Radiate App</h1>
        <p>Count: ${this.state.count}</p>
        <button onclick=${() => this.increment()}>Increment</button>
      </div>
    `;
  }
}

radiate.mount(App, '#app');