Getting Started

Install

For vanilla projects:

npm

npx jsr add @kin-store/core

pnpm

pnpm add jsr:@kin-store/core

yarn

yarn add jsr:@kin-store/core

deno

deno add jsr:@kin-store/core

For React projects (@kin-store/core is included):

npm

npx jsr add @kin-store/react

pnpm

pnpm add jsr:@kin-store/react

yarn

yarn add jsr:@kin-store/react

deno

deno add jsr:@kin-store/react

To add official plugins:

npm

npx jsr add @kin-store/plugins

pnpm

pnpm add jsr:@kin-store/plugins

yarn

yarn add jsr:@kin-store/plugins

deno

deno add jsr:@kin-store/plugins

Quick start

Create a store, write plain functions, done:

import { createStore } from "@kin-store/core";

type TodoState = { todos: string[]; status: "idle" | "loading" };

const store = createStore({ todos: [], status: "idle" } as TodoState);

function addTodo(text: string): void {
  store.set((s) => ({ ...s, todos: [...s.todos, text] }));
}

addTodo("Buy groceries");
console.log(store.get());
// { todos: ['Buy groceries'], status: 'idle' }

When your app grows, move logic into the store with .use():

import { withPlugins } from "@kin-store/core";
import { history, persist } from "@kin-store/plugins";

const store = withPlugins({ todos: [], status: "idle" } as TodoState)
  .use("persist", persist({ key: "todos" }))
  .use("history", history())
  .use({
    methods: (store) => ({
      addTodo(text: string): void {
        store.set((s) => ({ ...s, todos: [...s.todos, text] }));
      },
    }),
  });

store.addTodo("Buy groceries");
store.history.undo();
await store.persist.hydrate();

Each .use() adds capability, not a nesting level. The store grows with you.

What's next

• createStore — the minimal foundation
• withPlugins — add methods, reducers, and middleware
• derive — compose stores reactively
• Plugins — persist, history, immer