Skip to content

Svelte

Terminal window
npm install @rep-protocol/svelte @rep-protocol/sdk
<script lang="ts">
import { repStore, repSecureStore } from '@rep-protocol/svelte';
// PUBLIC tier — synchronous, updates on hot reload
const apiUrl = repStore('API_URL', 'http://localhost:3000');
const flags = repStore('FEATURE_FLAGS', '');
// SENSITIVE tier — starts as null, resolves after decryption
const analyticsKey = repSecureStore('ANALYTICS_KEY');
</script>
<p>API: {$apiUrl}</p>
<p>Analytics: {$analyticsKey ?? 'loading...'}</p>

Reads a PUBLIC tier variable as a Svelte Readable<string | undefined>.

const value: Readable<string | undefined> = repStore('API_URL');
const value: Readable<string | undefined> = repStore('API_URL', 'fallback');
  • Synchronous initial value from the REP payload
  • Automatically updates when the variable changes via hot reload
  • Lazy SSE: the connection is established only when there is at least one subscriber, and closed when all subscribers unsubscribe

Reads a SENSITIVE tier variable as a Readable<string | null>.

const value: Readable<string | null> = repSecureStore('ANALYTICS_KEY');
  • Starts as null
  • Resolves to the decrypted value once the session key fetch completes
  • Errors are swallowed (the SDK logs them); the store stays null

repStore subscribes to the SSE stream lazily — only when there’s at least one subscriber. The store value updates automatically. When the last subscriber unsubscribes, the SSE connection is closed.

const apiUrl = repStore('API_URL', 'http://localhost:3000');
  • Svelte >= 4 or Svelte 5
  • @rep-protocol/sdk as a peer dependency

For the full API reference, see Svelte Adapter Reference.