Skip to content



Terminal window
npm i @reatom/npm-svelte



First of all, you need to setup ctx for svelte context in your root component.

import { setupCtx } from '@reatom/npm-svelte'

We recommend to add logger for dev environment, from @reatom/logger directly, or from @reatom/framework.

import { createCtx, connectLogger } from '@reatom/framework'
import { setupCtx } from '@reatom/npm-svelte'
import { dev } from '$app/environment' // SvelteKit
const ctx = createCtx()
if (dev) connectLogger(ctx)

Than you can bind subscribe and set (for mutable atoms) to your atoms by withSvelte and use it as a store.

IMPORTANT, use withSvelte only in component script tag, as it reads the context.

import { atom } from '@reatom/core'
import { withSvelte } from '@reatom/npm-svelte'
const count = atom(0).pipe(withSvelte)
<button on:click={() => $count++}>
Clicked {$count} {$count === 1 ? 'time' : 'times'}

Of course, you could describe atoms as a separate module and bind actions with the same withSvelte(anAction).set.


import { withSvelte } from '@reatom/npm-svelte'
import { countAtom, timesAtom, increment } from './model'
const count = withSvelte(countAtom)
const times = withSvelte(timesAtom)
const handleIncrement = withSvelte(increment).set
<button on:click={handleIncrement}>
Clicked {$count} {$times}
import { atom, action } from '@reatom/core'
export const countAtom = atom(0, 'countAtom')
export const timesAtom = atom(
(ctx) => (ctx.spy(countAtom) === 1 ? 'time' : 'times'),
export const increment = action(
(ctx) => countAtom(ctx, (s) => ++s),

Data fetching and Svelte