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}
// model.ts
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