AIR Stack Docs

Appearance

Installing Anchor ​

Learn how to install Anchor, the state management component of the AIR Stack (Anchor + IRPC + Reactive UI).

Note: This guide covers Anchor installation. For IRPC (API framework), see IRPC Getting Started.

Prerequisites ​

Before installing Anchor, ensure you have:

  • A modern web browser for development
  • A package manager like bun, npm, yarn, or pnpm

Installation Options ​

Anchor provides multiple packages depending on your framework:

Core Package (Vanilla JavaScript/TypeScript) ​

Install the core package for framework-agnostic state management:

bash
bun add @anchorlib/core
bash
npm install @anchorlib/core
bash
yarn add @anchorlib/core
bash
pnpm add @anchorlib/core

React Integration ​

For React applications, install the React-specific package:

bash
bun add @anchorlib/react
bash
npm install @anchorlib/react
bash
yarn add @anchorlib/react
bash
pnpm add @anchorlib/react

SolidJS Integration ​

For SolidJS applications, install the SolidJS-specific package:

bash
bun add @anchorlib/solid
bash
npm install @anchorlib/solid
bash
yarn add @anchorlib/solid
bash
pnpm add @anchorlib/solid

Svelte Integration ​

For Svelte applications, install the Svelte-specific package:

bash
bun add @anchorlib/svelte
bash
npm install @anchorlib/svelte
bash
yarn add @anchorlib/svelte
bash
pnpm add @anchorlib/svelte

Vue Integration ​

For Vue applications, install the Vue-specific package:

bash
bun add @anchorlib/vue
bash
npm install @anchorlib/vue
bash
yarn add @anchorlib/vue
bash
pnpm add @anchorlib/vue

Basic Setup ​

After installation, you can start using Anchor in your project:

js
import { mutable } from '@anchorlib/core';

// Create a shared, reactive state object.
export const state = mutable({
  count: 0,
  name: 'My App',
});
tsx
import { template } from '@anchorlib/react';
import { state } from '../state.js';

export const Counter = template(() => (
  <div>
    <p>Count: {state.count}</p>
    <button onClick={() => state.count++}>Increment</button>
  </div>
));
jsx
import { state } from '../state.js';

const Counter = () => {
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => state.count++}>Increment</button>
    </div>
  );
};
svelte
<script>
  import { state } from '../state.js';
</script>

<div>
  <p>Count: {state.count}</p>
  <button onclick={() => state.count++}>Increment</button>
</div>
vue
<script setup>
import { observedRef } from '@anchorlib/vue';
import { state } from '../state.js';

// Observe the count value.
const count = observedRef(() => state.count);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="state.count++">Increment</button>
  </div>
</template>

TypeScript Support ​

Anchor is written in TypeScript and provides first-class TypeScript support with comprehensive type definitions included in every package.

Next Steps ​

After installing Anchor, check out these guides to get started:

Need Help? ​

If you're having trouble with installation:

  1. Check the FAQ for common issues
  2. Open an issue on GitHub
  3. Join our community Discord for real-time support