Client Runtime

The client runtime is the Effect runtime used by component effects in the browser. If you do nothing, a default runtime is created lazily. Register one when browser code needs services.

When to use this

Use ClientRuntime.make when component effects depend on clocks, storage, analytics, feature flags, or other browser-side services.

Minimal working example

import { ClientRuntime } from "svelte-effect-runtime";
import { Layer } from "effect";

export const init = () => {
  ClientRuntime.make(Layer.empty);
};

Put this in src/hooks.client.ts so it runs when the browser app starts.

Realistic variant

Provide a browser service layer:

import { ClientRuntime } from "svelte-effect-runtime";
import { BrowserStorageLive } from "$lib/browser-storage";

export const init = () => {
  ClientRuntime.make(BrowserStorageLive);
};

Then use the service from a component Effect:

<script lang="ts" effect>
  import { BrowserStorage } from "$lib/browser-storage";
  import { Effect } from "effect";

  const theme = yield* BrowserStorage.get("theme").pipe(
    Effect.orElseSucceed(() => "system"),
  );
</script>

Common mistakes

• Creating a new runtime inside each component instead of once in a hook.
• Providing server-only services to the browser runtime.
• Registering services after components have already started reading them.
• Hiding side effects in service constructors; prefer Effect resources for acquisition.

Related pages

• Services and layers
• Server runtime
• Client API reference