Replane Svelte SDK

Dynamic configuration for Svelte and SvelteKit applications.

Replane is a dynamic configuration manager that lets you tweak your software without running scripts or building your own admin panel. Store feature flags, rate limits, UI text, log level, rollout percentage, and more. Delegate editing to teammates and share config across services. No redeploys needed.

Why Dynamic Configuration?

- Feature flags – toggle features, run A/B tests, roll out to user segments
- Operational tuning – adjust limits, TTLs, and timeouts without redeploying
- Per-environment settings – different values for production, staging, dev
- Incident response – instantly revert to a known-good version
- Cross-service configuration – share settings with realtime sync
- Non-engineer access – safe editing with schema validation

Installation

``bash
npm install @replanejs/svelte
`

Quick Start

`svelte





`

`svelte



{#if $feature}


Feature is enabled!

{:else}

Feature is disabled

{/if}
`

Provider Props

| Prop | Type | Required | Description |
| ------------ | ------------------------- | -------- | ------------------------------------------------------------ |
| connection | ConnectOptions \| null | Yes | Connection options (see below), or null to skip connection |
| defaults | Record | No | Default values if server is unavailable |
| context | Record | No | Default context for override evaluations |
| snapshot | ReplaneSnapshot | No | Snapshot for SSR hydration |
| logger | ReplaneLogger | No | Custom logger (default: console) |
| loader | Snippet | No | Snippet to show while loading |
| async | boolean | No | Connect asynchronously (renders immediately with defaults) |

Connection Options

The connection prop accepts the following options:

| Option | Type | Required | Description |
| --------------------- | -------------- | -------- | ----------------------------------------- |
| baseUrl | string | Yes | Replane server URL |
| sdkKey | string | Yes | SDK key for authentication |
| connectTimeoutMs | number | No | SDK connection timeout (default: 5000) |
| requestTimeoutMs | number | No | Timeout for SSE requests (default: 2000) |
| retryDelayMs | number | No | Base delay between retries (default: 200) |
| inactivityTimeoutMs | number | No | SSE inactivity timeout (default: 30000) |
| fetchFn | typeof fetch | No | Custom fetch implementation |

See @replanejs/sdk documentation for more details.

API

$3

Create a reactive store for a specific config value. Similar to readable() or derived().

`svelte


{#if $featureEnabled}


{$greeting}


{/if}
`

$3

Get direct access to the Replane client from context.

`svelte


Get Config
`

$3

Create a reactive store from a client directly (without context). Type-safe with full autocomplete for config names.

`svelte


{#if $featureEnabled}


Feature is enabled!


{/if}
`

$3

Context component that makes the Replane client available to your component tree.

Can be used in several ways:

1. With a pre-created client:

`svelte





`

2. With connection (client managed internally):

`svelte


console.error(e)}>



{#snippet loader()}


Loading...

{/snippet}

{#snippet failed(error)}

Error: {error.message}

{/snippet}

`

3. With async mode:

Connect in the background while rendering immediately with defaults:

`svelte





`

4. With a snapshot (for SSR/hydration):

`svelte



{@render children()}

`

Typed Stores

For better type safety, create typed versions of the store functions:

`ts
// $lib/replane/index.ts
import { createTypedConfig, createTypedReplane } from "@replanejs/svelte";

interface AppConfigs {
theme: { darkMode: boolean; primaryColor: string };
features: { betaEnabled: boolean };
}

export const appConfig = createTypedConfig();
export const getAppReplane = createTypedReplane();
`

`svelte



`

SSR / SvelteKit

For server-side rendering, fetch configs on the server and restore on the client:

`ts
// src/routes/+layout.server.ts
import { getReplaneSnapshot } from "@replanejs/svelte";

export async function load() {
const snapshot = await getReplaneSnapshot({
connection: {
baseUrl: import.meta.env.REPLANE_BASE_URL,
sdkKey: import.meta.env.REPLANE_SDK_KEY,
},
});

return { replaneSnapshot: snapshot };
}
`

`svelte




{@render children()}

`

Realtime Updates

All stores automatically subscribe to realtime updates via SSE. When a config changes on the server, the store updates automatically.

`svelte


{#if $maintenanceMode}

{/if}
``

Community

Have questions or want to discuss Replane? Join the conversation in GitHub Discussions.

License

MIT