anchor

::: anchor-react-sandbox {class=”sp-grid”}

```tsx /App.tsx [active] import ‘@tailwindcss/browser’; import { useRef } from ‘react’; import { useAnchor } from ‘@anchorlib/react’; import { observe } from ‘@anchorlib/react/view’;

const Counter = () => { const [counter] = useAnchor({ count: 0 });

// 😏 Only this tiny part of the UI that need to updated! const CounterView = observe(() => <h1>Counter: {counter.count}</h1>);

return ( <div className="flex flex-col w-screen h-screen justify-center items-center gap-6"> <div className="flex items-center gap-2"> <button className=”bg-orange-500 hover:bg-orange-400 text-white px-4 py-2 font-semibold rounded-sm” onClick={() => counter.count++}> Increment </button> <button className=”bg-orange-500 hover:bg-orange-400 text-white px-4 py-2 font-semibold rounded-sm” onClick={() => counter.count–}> Decrement </button> <button className=”bg-orange-500 hover:bg-orange-400 text-white px-4 py-2 font-semibold rounded-sm” onClick={() => (counter.count = 0)}> Reset </button> </div> </div> ); };

export default Counter; ```

:::

Enterprise-Grade State Management for Modern Web Applications

Anchor is a revolutionary state management framework designed for developers who demand both performance and developer experience. Built on the DSV (Data-State-View) model, Anchor eliminates the complexity of traditional state management while delivering unmatched performance.

Why Choose Anchor?

• Fine-Grained Reactivity: Only components that depend on changed state re-render
• True Immutability: Direct mutation syntax without deep cloning overhead
• Zero Configuration: Works out of the box with optional advanced configuration
• Framework Integration: Native support for React, Vue, Svelte, and vanilla JS
• Built-in Toolkit: Optimistic UI, history tracking, reactive storage, and more
• TypeScript First: Comprehensive type definitions for enhanced developer experience

Performance Benchmarks

In benchmark tests, Anchor outperforms traditional state management solutions by significant margins, especially as applications scale in complexity. The fine-grained reactivity model ensures consistent performance regardless of state tree size.

Getting Started

1. Install Anchor in your project
2. Follow the Getting Started Guide to create your first reactive state
3. Explore Reactivity and Immutability concepts
4. Learn about Data Integrity with schema validation
5. Check framework-specific guides for React, Vue, or Svelte

Architecture Overview

Anchor’s revolutionary DSV (Data-State-View) model replaces scattered data flows with a single, stable, immutable State that acts as the source of truth for your entire application:

1. Data: External data sources (APIs, databases, user input)
2. State: Central immutable state managed by Anchor
3. View: Components that observe and render state

This architecture eliminates prop drilling, context hell, and state synchronization issues while providing predictable, scalable state management.

This site is open source. Improve this page.