> For the complete documentation index, see [llms.txt](https://jircdev.gitbook.io/reactive-model/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jircdev.gitbook.io/reactive-model/readme.md).

# Introduction

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\&logo=typescript\&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\&logo=javascript\&logoColor=%23F7DF1E) ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge\&logo=node.js\&logoColor=white) ![Browser](https://img.shields.io/badge/Browser-4285F4.svg?style=for-the-badge\&logo=GoogleChrome\&logoColor=white)

**The Data Intelligence Layer for Modern Applications.** 🚀

`@beyond-js/reactive` is a powerful TypeScript library that centralizes business logic, validation, and reactivity within your data structures. It provides a dedicated layer that handles the "truth" of your application, leaving UI frameworks to focus purely on presentation.

***

## ✨ Key Benefits

* **🎯 Data-First Design**: Business logic belongs to your data, not your UI components.
* **🤖 AI-Ready**: Highly structured models that AI agents (Cursor, Copilot) can reason about with zero effort.
* **🔌 Framework Agnostic**: Works perfectly with React, Vue, Svelte, or Node.js.
* **🤝 Complements UI State Managers**: Co-exists seamlessly with **Zustand**, Redux, or Pinia.
* **✅ Zod Integration**: Native validation for robust data integrity.

***

## 📚 Documentation

* [**English Documentation**](/reactive-model/english/en.md)
* [**Documentación en Español**](/reactive-model/espanol/es.md)

### Quick Navigation (EN)

* [Philosophy & Vision](https://github.com/jircdev/reactive-model/blob/main/docs/en/philosophy.md) | [Getting Started](https://github.com/jircdev/reactive-model/blob/main/docs/en/getting-started.md)
* [Integration with React & Zustand](https://github.com/jircdev/reactive-model/blob/main/docs/en/architecture/integration-guide.md)
* [ReactiveModel](https://github.com/jircdev/reactive-model/blob/main/docs/en/fundamentals/reactive-model.md) | [Items](https://github.com/jircdev/reactive-model/blob/main/docs/en/entities/items.md) | [Collections](https://github.com/jircdev/reactive-model/blob/main/docs/en/entities/collections.md)
* [ReactiveMap](https://github.com/jircdev/reactive-model/blob/main/docs/en/structures/reactive-map.md) | [ReactiveArray](https://github.com/jircdev/reactive-model/blob/main/docs/en/structures/reactive-array.md) | [ReactiveTree](https://github.com/jircdev/reactive-model/blob/main/docs/en/structures/reactive-tree.md)

***

## 🚀 Quick Start

```bash
npm install @beyond-js/reactive zod
```

```typescript
import { ReactiveModel } from '@beyond-js/reactive/model';

class User extends ReactiveModel<IUser> {
  declare name: string;
  constructor(data) {
    super({ properties: ['name'], ...data });
  }
}

const user = new User({ name: 'John' });
user.on('change', () => updateUI());
user.name = 'Jane'; // Triggers reactivity
```

***

## 📄 License

MIT © @beyond-js