The Hyphen Browser SDK is used as a base library to get evaluations and works for browsers and the base for javascript libraries such as react, vuejs, svelte, etc . For the full featured nodejs sdk use @hyphen/sdk
Install the package using npm, yarn, or pnpm:
npm install @hyphen/browser-sdkFor browser usage via CDN:
<script src="https://cdn.jsdelivr.net/npm/@hyphen/browser-sdk@latest/dist/index.browser.js"></script>import { Toggle } from '@hyphen/browser-sdk';
// Initialize the Toggle client
const toggle = new Toggle({
publicApiKey: 'public_your-api-key-here',
applicationId: 'your-app-id',
environment: 'production', // or 'development'
defaultContext: {
targetingKey: 'user-123',
user: {
id: 'user-123',
email: 'user@example.com',
name: 'John Doe'
}
}
});The SDK provides type-safe helper methods for common data types:
const isFeatureEnabled = await toggle.getBoolean('feature-flag', false);
if (isFeatureEnabled) {
console.log('Feature is enabled!');
}const welcomeMessage = await toggle.getString('welcome-message', 'Hello World');
document.getElementById('welcome').textContent = welcomeMessage;const maxRetries = await toggle.getNumber('max-retries', 3);
const timeout = await toggle.getNumber('api-timeout', 5000);const config = await toggle.getObject('app-config', { theme: 'light' });
console.log('App configuration:', config);// Generic method with type parameter
const feature = await toggle.get<boolean>('feature-toggle', false);
const settings = await toggle.get<object>('user-settings', {});You can override the default context for specific evaluations:
const customContext = {
targetingKey: 'special-user',
user: { id: 'special-user', plan: 'premium' },
customAttributes: { region: 'us-west' }
};
const result = await toggle.getBoolean('premium-feature', false, {
context: customContext
});<!DOCTYPE html>
<html>
<head>
<title>Hyphen Toggle Example</title>
</head>
<body>
<div id="feature-content" style="display: none;">
<h2>Premium Feature</h2>
<p>This content is only shown when the feature is enabled!</p>
</div>
<script type="module">
import { Toggle } from '@hyphen/browser-sdk';
const toggle = new Toggle({
publicApiKey: 'public_your-api-key-here',
applicationId: 'your-app-id',
defaultContext: {
targetingKey: 'anonymous-user',
customAttributes: {
plan: 'free'
}
}
});
// Check if premium feature is enabled
const isPremiumEnabled = await toggle.getBoolean('premium-feature', false);
if (isPremiumEnabled) {
document.getElementById('feature-content').style.display = 'block';
}
// Dynamic configuration
const theme = await toggle.getString('app-theme', 'light');
document.body.className = `theme-${theme}`;
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Hyphen Toggle Example</title>
<script src="https://cdn.jsdelivr.net/npm/@hyphen/browser-sdk@latest/dist/index.browser.js"></script>
</head>
<body>
<div id="feature-content" style="display: none;">
<h2>Premium Feature</h2>
<p>This content is only shown when the feature is enabled!</p>
</div>
<script>
// HyphenBrowserSDK is available as a global variable
const { Toggle } = HyphenBrowserSDK;
const toggle = new Toggle({
publicApiKey: 'public_your-api-key-here',
applicationId: 'your-app-id',
defaultContext: {
targetingKey: 'anonymous-user',
customAttributes: {
plan: 'free'
}
}
});
// Use async function for top-level await support
(async () => {
// Check if premium feature is enabled
const isPremiumEnabled = await toggle.getBoolean('premium-feature', false);
if (isPremiumEnabled) {
document.getElementById('feature-content').style.display = 'block';
}
// Dynamic configuration
const theme = await toggle.getString('app-theme', 'light');
document.body.className = `theme-${theme}`;
})();
</script>
</body>
</html>publicApiKey(string): Your Hyphen public API keyapplicationId(string): Your application identifierenvironment(string, optional): Environment name (default: 'development')defaultContext(ToggleContext, optional): Default evaluation contexthorizonUrls(string[], optional): Custom Horizon endpoint URLsdefaultTargetKey(string, optional): Default targeting key
getBoolean(toggleKey, defaultValue, options?)- Get boolean togglegetString(toggleKey, defaultValue, options?)- Get string togglegetNumber(toggleKey, defaultValue, options?)- Get number togglegetObject<T>(toggleKey, defaultValue, options?)- Get object toggleget<T>(toggleKey, defaultValue, options?)- Generic toggle getter
We welcome contributions to the Hyphen Node.js SDK! If you have an idea for a new feature, bug fix, or improvement, please follow the Contribution guidelines and our Code of Conduct.
This project is licensed under the MIT License. See the LICENSE file for details. The copyright for this project is held by Hyphen, Inc. All rights reserved.
