[API reference](https://evolu.dev/docs/api-reference) › [@evolu/svelte](https://evolu.dev/docs/api-reference/svelte) › evoluAppState

```ts
function evoluAppState<
  S extends Readonly<
    Record<string, Readonly<Record<string, AnyStandardSchemaV1>>>
  >,
  D extends Readonly<
    Record<string, Readonly<Record<string, AnyStandardSchemaV1>>>
  > = EmptyEvoluSchema,
>(app: EvoluApp<S, D>): EvoluAppState<S>;
```

Defined in: [index.svelte.ts:282](https://github.com/evoluhq/evolu/blob/aa223771feea747ffb1b0f5f3271574455633e37/packages/svelte/src/lib/index.svelte.ts#L282)

Follows an [EvoluApp](https://evolu.dev/docs/api-reference/common/local-first/Evolu/interfaces/EvoluApp) and returns an object whose properties update when
it changes: `state`, the AppOwner this tab has open as an
[AppOwnerState](https://evolu.dev/docs/api-reference/common/local-first/Evolu/type-aliases/AppOwnerState), and `appOwners`, the AppOwners the app can open on this
device. While `state` is `Open`, its `evolu` is the AppOwner's instance; it
changes when the tab opens another AppOwner, or the AppOwner again after a
removal and restore or its database's deletion, so key the children that use
it with it, which remounts them, and pass it to [queryState](https://evolu.dev/docs/api-reference/svelte/functions/queryState). While
`state` is `None`, show a choice such as to open one of `appOwners`, create
one, or restore one. The device database's instance is
[EvoluApp.device](https://evolu.dev/docs/api-reference/common/local-first/Evolu/interfaces/EvoluApp#device).

It creates an `$effect`, so call it where Svelte allows one, such as during
component initialization or inside `$effect.root`. It stops following the app
when that component or root is destroyed.

### Example

Runes such as `$state` work only in Svelte components and `.svelte.ts` or
`.svelte.js` modules. A component calls `evoluAppState` during its
initialization and renders `{#if appState.state.type === "Open"}`, the
AppOwner's UI in `{#key appState.state.evolu}`, `{:else if
appState.state.type === "None"}`, the choice, `{:else}`, what shows while the
AppOwner's instance opens, `{/if}`.

```ts
import {
  assertType,
  type AppOwnerState,
  type EvoluApp,
  type Name,
  type TestEvoluSchema,
} from "@evolu/common";
import { evoluAppState } from "@evolu/svelte";

const todoAppState = (app: EvoluApp<TestEvoluSchema>) => {
  const appState = evoluAppState(app);
  // The open AppOwner's database, or null while none is open or it opens.
  const openName = $derived(
    appState.state.type === "Open" ? appState.state.evolu.name : null,
  );

  return {
    state: () => appState.state,
    openName: () => openName,
  };
};

assertType<
  ReturnType<ReturnType<typeof todoAppState>["state"]>,
  AppOwnerState<TestEvoluSchema>
>();
assertType<
  ReturnType<ReturnType<typeof todoAppState>["openName"]>,
  Name | null
>();
```