Getting Started

Install

For vanilla projects:

npm

npx jsr add @kin-store/core

pnpm

pnpm dlx jsr add @kin-store/core

yarn

yarn dlx jsr add @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 dlx jsr add @kin-store/react

yarn

yarn dlx jsr add @kin-store/react

deno

deno add jsr:@kin-store/react

To add official plugins:

npm

npx jsr add @kin-store/plugins

pnpm

pnpm dlx jsr add @kin-store/plugins

yarn

yarn dlx jsr add @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.setState((s) => ({ ...s, todos: [...s.todos, text] }));
}

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

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

import { withPlugins } from '@kin-store/core';
import { persist, history } 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.setState((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