Anchor Docs

Appearance

Installing Anchor ​

Learn how to install and set up Anchor, the revolutionary state management library for modern web applications.

Prerequisites ​

Before installing Anchor, ensure you have:

  • A modern web browser for development
  • A package manager like 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
npm install @anchorlib/core
bash
yarn add @anchorlib/core
bash
pnpm add @anchorlib/core
bash
bun add @anchorlib/core

React Integration ​

For React applications, install the React-specific package:

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

Vue Integration ​

For Vue applications, install the Vue-specific package:

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

Svelte Integration ​

For Svelte applications, install the Svelte-specific package:

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

Basic Setup ​

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

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

export const state = anchor({
  count: 0,
  name: 'My App',
});

console.log(state.count); // 0
state.count++;
jsx
import { useObserved } from '@anchorlib/react';
import { state } from '../index.js';

const Counter = () => {
  const count = useObserved(() => state.count);

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

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

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="state.count++">Increment</button>
  </div>
</template>
svelte
<script>
  import { observedRef } from '@anchorlib/svelte';
  import { state } from '../index.js';

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

<div>
  <p>Count: {$count}</p>
  <button onclick={() => state.count++}>Increment</button>
</div>

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