🦊 FoxState

A lightweight, modern signal-powered state management library inspired by Zustand.

FoxState provides a simple store API, plugin system, and multi-framework support with excellent performance.

Works with:

• React
• Next.js
• Vue
• Svelte
• Vanilla JavaScript

✨ Features

• ⚡ Signal-based reactivity
• 🧠 Selector tracking
• 🧩 Plugin system
• 💾 State persistence
• 🛠 DevTools support
• 🧬 Immer integration
• 🔌 Multi-framework adapters

📦 Packages

FoxState is organized as a monorepo.

| Package | Description | | ---------------- | ------------------ | | fox-state | Core state engine | | foxstate-react | React bindings | | foxstate-vue | Vue composable | | foxstate-svelte | Svelte adapter | | foxstate-vanilla | Vanilla JS adapter |

🚀 Installation

Install the core package.

npm install fox-state

React:

npm install fox-state foxstate-react

Vue:

npm install fox-state foxstate-vue

Svelte:

npm install fox-state foxstate-svelte

⚡ Quick Example (React)

"use client"

import { createStore } from "fox-state"
import { useStore } from "foxstate-react"

const store = createStore({
  state: { count: 0 },

  actions: {
    inc: ({ setState, getState }) =>
      setState({ count: getState().count + 1 })
  }
})

export default function Counter() {

  const count = useStore(store, s => s.count)

  return (
    <button onClick={store.actions.inc}>
      {count}
    </button>
  )
}

🧠 Core API

createStore

Creates a new store with state and actions.

import { createStore } from "fox-state"

const store = createStore({
  state: { count: 0 },

  actions: {
    increment: ({ setState, getState }) =>
      setState({ count: getState().count + 1 })
  }
})

🧩 Plugins

FoxState supports plugins to extend store functionality.

Import plugins:

import { logger, persist, devtools, immer } from "fox-state/plugins"

Use them when creating the store.

const store = createStore({

  state: { count: 0 },

  actions: {
    inc: ({ setState, getState }) =>
      setState({ count: getState().count + 1 })
  },

  plugins: [
    logger(),
    devtools("Counter"),
    persist("counter")
  ]
})

🔎 Logger Plugin

Logs actions and state updates.

import { logger } from "fox-state/plugins"

plugins: [
  logger()
]

Console output:

🦊 Action: inc
🦊 Prev: { count: 0 }
🦊 Next: { count: 1 }

💾 Persist Plugin

Stores state in localStorage.

import { persist } from "fox-state/plugins"

plugins: [
  persist("counter-store")
]

State remains after refresh.

🛠 DevTools Plugin

Connects FoxState to the FoxState DevTools extension.

import { devtools } from "fox-state/plugins"

plugins: [
  devtools("CounterStore")
]

Features:

• Action timeline
• State inspection
• Time travel debugging

🧬 Immer Plugin

Allows immutable state updates.

import { immer } from "fox-state/plugins"

plugins: [
  immer()
]

Example:

store.setState(draft => {
  draft.count++
})

🔗 Framework Bindings

React

import { useStore } from "foxstate-react"

Vue

import { useStore } from "foxstate-vue"

Svelte

import { useStore } from "foxstate-svelte"

Vanilla

import { useStore } from "foxstate-vanilla"

🏗 Project Structure

foxstate
│
├ packages
│  ├ fox-state
│  ├ foxstate-react
│  ├ foxstate-vue
│  ├ foxstate-svelte
│  └ foxstate-vanilla
│
└ examples
   └ next-app

🛠 Development

Install dependencies:

npm install

Build packages:

npm run build

Run example:

npm run dev

📜 License

MIT

❤️ Contributing

Contributions are welcome.

Open an issue or submit a pull request.

⭐ Support

If you like FoxState, consider giving the repository a ⭐.