Skip to main content

JavaScript SDKs

Read a complete example​

The JavaScript sample demonstrates the browser SDK. Read its README first, then src/demo.ts for keys/defaults and src/sample-app.ts for SDK initialization and evaluation. Framework packages have their own APIs and compatibility limits; see the sample catalog for their status.

Toggly provides SDKs for JavaScript and popular frontend frameworks. All JavaScript SDKs share common concepts and patterns.

Quick reference

Grab the printable JavaScript / TypeScript cheat sheet (download PDF) — every API on two pages.

Available SDKs​

  • Vanilla JavaScript: Plain JavaScript applications
  • CSS / HTML: Show or hide HTML with a generated stylesheet (no JavaScript)
  • React: React applications
  • Angular: Angular applications
  • Vue.js: Vue.js applications
  • Svelte: Svelte applications
  • SvelteKit: Request-scoped Node hooks, loads/actions and signed SSR hydration

Common Concepts​

Initialization​

Initialize the selected SDK before checking flags. Browser JavaScript can also run with local defaults and no App Key:

// Example: Vanilla JavaScript
Toggly.init({
  appKey: 'your-app-key',
  environment: 'production'
});

Feature Evaluation​

Evaluate feature flags:

// Boolean evaluation
if (Toggly.isFeatureOn('my-feature')) {
  // Feature is enabled
}

User Context​

Provide user context for targeting and rollouts:

await Toggly.init({
  appKey: 'your-app-key',
  environment: 'Production',
  identity: 'user-123', // Stable user ID.
  groups: ['beta'], // Memberships used by rules.
  claims: { plan: 'pro' }, // String rule attributes.
});

Set known context at startup to avoid an initial request followed by a context refresh. Use setContext for later changes. See initial context for omitted and empty values, persistence, and browser-global usage.

Caching​

SDKs cache feature flags to reduce API calls:

  • Refresh cadence: Vanilla JavaScript polls every 3 minutes by default; this is not a shared cache TTL for every framework
  • Cache Storage: localStorage for browser-based SDKs
  • Offline Support: Use cached values when offline

Error Handling​

SDKs handle errors gracefully:

  • Network Errors: Fall back to cached values or defaults
  • Invalid Responses: Fall back to default values
  • Flag Defaults: Set default values for offline scenarios

Framework-Specific Features​

React​

  • React Provider component
  • Feature component with hooks support
  • TypeScript support

Angular​

  • Angular module integration
  • Feature directive (*featureFlag)
  • Feature component
  • Route guards for feature flags

Vue.js​

  • Vue plugin integration
  • Feature component
  • Global $toggly service injection

Svelte​

  • Svelte stores for reactive state
  • Feature component with reactive props
  • Programmatic API with async functions
  • TypeScript support

Vanilla JavaScript​

  • CDN or NPM installation
  • Direct API access
  • Optional CSS / HTML stylesheet for static show/hide

Next Steps​

Choose your framework and follow the specific SDK guide: