@beyond-js/reactive is a powerful TypeScript library designed to provide a Data Intelligence Layer for your
application. By centralizing business logic, validation, and reactivity within your data structures, it enables
developers to build scalable, framework-agnostic applications that are incredibly easy for AI agents to understand and
maintain.
Choose your path to master @beyond-js/reactive:
- Philosophy & Vision: Why business logic belongs to the data, and how this impacts AI development.
- Getting Started: Install and build your first model in 2 minutes.
- ReactiveModel: The base class for all reactive objects.
- Interfaces: Unified contracts for polymorphic handling.
- Items: Managing individual entities with IDs and lifecycle.
- Collections: Groups of items with filtering and pagination.
- Nested Properties: Modeling complex relationships.
- ReactiveMap: Key-value reactive storage.
- ReactiveArray: Standard array methods with reactive events.
- ReactiveTree: Hierarchical data management.
- Integration Guide (React & Zustand): How to co-exist with UI state managers.
- Providers: Decoupling data access (APIs, Databases).
- Plugins: Extending functionality with cross-cutting concerns.
- Practical Examples: Real-world implementation scenarios.
Stop leaking validation and business rules into your React components. Define them once in your models and use them anywhere (Frontend, Backend, Mobile).
AI agents (Cursor, Copilot) perform best when code has explicit structure. This library's use of Zod and encapsulated logic makes it self-documenting for AI.
Compatible with React, Vue, Svelte, or Node.js. It doesn't replace Zustand or Redux—it handles the data layer while they handle the UI state.
- Zod Validation: Native schema integration.
- Change Tracking: Automatically detect unpublished changes.
- Event System: Fine-grained reactivity.
import { Item } from '@beyond-js/reactive/entities/item';
class Product extends Item<IProduct> {
constructor(data) {
super({
entity: 'products',
properties: ['name', 'price'],
...data,
});
}
}
const myProduct = new Product({ name: 'Laptop', price: 999 });
myProduct.on('change', () => console.log('Updated!'));
myProduct.name = 'Pro Laptop'; // Triggers event