Skip to main content

Resync JavaScript

A powerful JavaScript library for dynamic content management, remote configuration, and in-app campaign. Resync allows you to manage embed dynamic banners, ctas, forms, text, run campaigns into your mobile app. Deliver dynamic content without app updates. Works seamlessly across JavaScript, React Native, and Expo applications.

Features​

  • 🚀 Remote Configuration - Manage app configs remotely without code deployments
  • 🧪 In-app Campaigns - Run campaigns with audiences, automatic variant assignment and tracking
  • 🎨 Dynamic Content Management - Fetch and render content views defined in your Resync dashboard
  • 📊 Event Logging - Track custom events and user interactions
  • 💾 Smart Caching - Automatic environment-based caching (6h production, 0ms development)
  • 🔄 Real-time Updates - Subscribe to configuration changes with callback support
  • 📱 Cross-Platform - Works with vanilla JavaScript, React Native, and Expo
  • 🔧 TypeScript Support - Full TypeScript definitions included
  • 🎯 User Targeting - Set user attributes for personalized experiences and audience creation.

Installation​

npm install resync-javascript
# or
yarn add resync-javascript

Quick Start​

1. Initialize Resync​

import Resync from 'resync-javascript';

// Initialize Resync with your API credentials
await Resync.init({
  key: 'your-api-key',
  appId: 7,
  callback: async (config) => {
    console.log('Resync initialized with config:', config);
  },
  storage: localStorage, // or AsyncStorage for React Native
  environment: 'production',
});

2. Get Remote Configuration​

// Get a specific config value
const featureEnabled = Resync.getConfig('FEATURE_FLAG');
const apiEndpoint = Resync.getConfig('API_ENDPOINT');

console.log('Feature enabled:', featureEnabled);

3. Campaign​

// Get variant for an Campaign experiment
const variant = await Resync.getVariant('homepage_experiment');

if (variant === 'variant_a') {
  // Show variant A
} else {
  // Show variant B
}

4. Event Logging​

// Log custom events
Resync.logEvent({
  eventId: 'evt_button_clicked',
  metadata: {
    buttonName: 'signup',
    screen: 'homepage',
  },
});

5. Get Content Blocks​

// Fetch all content views
const contentViews = Resync.getContent();

// Find a specific content view by name
const welcomeCard = contentViews.find(
  (view) => view.name === 'HomeWelcomeCard'
);

console.log('Welcome card content:', welcomeCard);

API Reference​

Resync.init(options)​

Initialize the Resync SDK. Must be called before using any other methods.

Parameters​

ParameterTypeRequiredDescription
keystring✅Your Resync API key
appIdnumber✅Your application ID
callback() => void❌Callback function invoked when config is loaded
storageStorage✅Storage object for caching (localStorage, AsyncStorage, etc.)
environmentsandboxproduction✅

Returns​

Promise<void> - Returns the Resync instance

Example​

await Resync.init({
  key: 'rsk_live_abc123',
  appId: 7,
  callback: () => {
    console.log('Config loaded:');
  },
  storage: localStorage,
  environment: 'sandbox'
});

Resync.getConfig(key)​

Get a configuration value by key.

Parameters​

ParameterTypeRequiredDescription
keystring✅Configuration key to retrieve

Returns​

any - The configuration value

Example​

const apiUrl = Resync.getConfig('API_BASE_URL');
const maxRetries = Resync.getConfig('MAX_RETRIES');
const features = Resync.getConfig('ENABLED_FEATURES');

console.log('API URL:', apiUrl);
console.log('Max retries:', maxRetries);

Resync.getVariant(campaignName)​

Get the assigned variant for a Campaign.

Parameters​

ParameterTypeRequiredDescription
campaignNamestring✅Name of the campaign

Returns​

Promise<number | null> - Returns the variant content view ID or null

Example​

const variant = await Resync.getVariant('checkout_flow_test');

if (variant === 123) {
  // Show variant A (content view ID 123)
  renderCheckoutVariantA();
} else if (variant === 124) {
  // Show variant B (content view ID 124)
  renderCheckoutVariantB();
}

Resync.getContent()​

Get all content views from the current configuration.

Returns​

ContentView[] - Array of content views

Example​

const contentViews = Resync.getContent();

// Find specific content view
const bannerContent = contentViews.find(
  (view) => view.name === 'PromoAnnouncement'
);

// Iterate through all published content
contentViews
  .filter((view) => view.status === 'published')
  .forEach((view) => {
    console.log(`Content view: ${view.name}`);
  });

Resync.loginUser(userId, metadata)​

Set the user ID for tracking and personalized variant assignment.

Parameters​

ParameterTypeRequiredDescription
userIdstring | number✅Unique user identifier
metadataobject❌User metadata (email, name, phone, language)

Returns​

Promise<boolean> - Returns true if successful

Example​

// Simple user ID
await Resync.loginUser('user_12345');

// With metadata
await Resync.loginUser('user_12345', {
  email: 'user@example.com',
  name: 'John Doe',
  phone: '+1234567890',
  language: 'en',
});

Resync.setUserAttributes(attributes)​

Set user attributes for targeting and personalization.

Parameters​

ParameterTypeRequiredDescription
attributesobject✅User attributes object
attributes.emailstring❌User email
attributes.namestring❌User name
attributes.phonestring❌User phone
attributes.languagestring❌User language
attributes.attributesobject❌Additional custom attributes

Returns​

Promise<boolean> - Returns true if successful

Example​

await Resync.setUserAttributes({
  email: 'user@example.com',
  name: 'Jane Smith',
  phone: '+1234567890',
  language: 'en',
  attributes: {
    subscriptionTier: 'premium',
    country: 'US',
    signupDate: '2025-01-15',
  },
});

Resync.setClient(client)​

Set a client identifier for tracking purposes.

Parameters​

ParameterTypeRequiredDescription
clientstring✅Client identifier (e.g., 'web', 'mobile', 'ios', 'android')

Example​

Resync.setClient('web');
// or
Resync.setClient('mobile-ios');

Resync.logEvent(event)​

Log a custom event for analytics and tracking.

Parameters​

ParameterTypeRequiredDescription
eventobject✅Event object
event.eventIdstring✅Event identifier
event.logIdstring❌External log ID for correlation
event.metadataobject❌Additional event metadata

Example​

// Simple event
Resync.logEvent({
  eventId: 'evt_user_signup',
});

// Event with metadata
Resync.logEvent({
  eventId: 'evt_purchase_completed',
  logId: 'order_789',
  metadata: {
    amount: 99.99,
    currency: 'USD',
    productId: 'prod_123',
    quantity: 2,
  },
});

Resync.submitForm(formData)​

Submit form data to the Resync backend.

Parameters​

ParameterTypeRequiredDescription
formDataobject✅Form submission object
formData.contentViewIdnumber✅Content view ID of the form
formData.dataobject✅Form field data

Returns​

Promise<boolean | Error> - Returns true if successful, Error otherwise

Example​

try {
  const success = await Resync.submitForm({
    contentViewId: 456,
    data: {
      name: 'John Doe',
      email: 'john@example.com',
      message: 'Hello!',
    },
  });

  if (success) {
    console.log('Form submitted successfully');
  }
} catch (error) {
  console.error('Form submission failed:', error);
}

Resync.subscribe(callback)​

Subscribe to configuration updates. The callback will be invoked whenever the configuration changes.

Parameters​

ParameterTypeRequiredDescription
callback(config: AppConfig) => void✅Callback function

Example​

function handleConfigUpdate(config) {
  console.log('Config updated:', config);
  // Update UI or app state
}

Resync.subscribe(handleConfigUpdate);

Resync.unsubscribe(callback)​

Unsubscribe from configuration updates.

Parameters​

ParameterTypeRequiredDescription
callback(config: AppConfig) => void✅Previously subscribed callback function

Example​

Resync.unsubscribe(handleConfigUpdate);

Advanced Usage​

Real-time Configuration Updates​

Subscribe to configuration changes to update your app dynamically:

await Resync.init({
  key: 'your-api-key',
  appId: 7,
  storage: localStorage,
  callback: () => {
    console.log('Initial config loaded:');
  },
  environment: 'sandbox'
});

// Subscribe to future updates
Resync.subscribe(() => {
  console.log('Config updated!');
  // Update your app's state or UI
  updateAppSettings();
});

User Segmentation with attributes​

Combine user attributes for targeted campaigns:

// Set user attributes
await Resync.loginUser('user_123', {
  email: 'user@example.com',
  name: 'Alice',
});

await Resync.setUserAttributes({
  attributes: {
    userTier: 'premium',
    region: 'north-america',
  },
});

// Get variant (assignment may be based on attributes)
const variant = await Resync.getVariant('premium_feature_test');

if (variant) {
  // Show experiment variant
} else {
  // Show control
}

Dynamic Feature Flags​

Use remote config for feature flagging:

// Check if a feature is enabled
const newUIEnabled = Resync.getConfig('ENABLE_NEW_UI');
const darkModeAvailable = Resync.getConfig('DARK_MODE_AVAILABLE');

if (newUIEnabled) {
  renderNewUI();
} else {
  renderLegacyUI();
}

// Get configuration objects
const apiSettings = Resync.getConfig('API_SETTINGS');
console.log('API timeout:', apiSettings?.timeout);
console.log('Max retries:', apiSettings?.maxRetries);

Event Tracking Pipeline​

Build a comprehensive event tracking system:

// Track user journey
Resync.logEvent({
  eventId: 'evt_app_opened',
  metadata: { timestamp: Date.now() },
});

// Track interactions
document.getElementById('cta-button').addEventListener('click', () => {
  Resync.logEvent({
    eventId: 'evt_cta_clicked',
    metadata: {
      buttonId: 'cta-button',
      page: 'homepage',
    },
  });
});

// Track conversions
async function completePurchase(orderId, amount) {
  await processPayment();

  Resync.logEvent({
    eventId: 'evt_purchase_completed',
    logId: orderId,
    metadata: {
      amount,
      currency: 'USD',
      timestamp: Date.now(),
    },
  });
}

Storage Adapters​

Use different storage adapters based on your platform:

Browser (Web)​

await Resync.init({
  key: 'your-api-key',
  appId: 7,
  storage: localStorage, // or sessionStorage
  environment: 'sandbox'
});

React Native​

import AsyncStorage from '@react-native-async-storage/async-storage';

await Resync.init({
  key: 'your-api-key',
  appId: 7,
  storage: AsyncStorage,
  environment: 'sandbox'
});

Custom Storage Adapter​

// Implement your own storage adapter
const customStorage = {
  async getItem(key) {
    // Your implementation
  },
  async setItem(key, value) {
    // Your implementation
  },
  async removeItem(key) {
    // Your implementation
  },
  async clear() {
    // Your implementation
  },
};

await Resync.init({
  key: 'your-api-key',
  appId: 7,
  storage: customStorage,
  environment: 'sandbox'
});

TypeScript Support​

The library includes comprehensive TypeScript definitions:

import Resync, {
  InitOptions,
  AppConfig,
  ContentView,
  Experiment,
  ExperimentVariant,
  AppEvent,
  Storage,
} from 'resync';

// Type-safe initialization
const options: InitOptions = {
  key: 'your-api-key',
  appId: 7,
  callback: () => {
    console.log('Resync loaded');
  },
  storage: localStorage,
};

await Resync.init(options);

// Type-safe event logging
const event: AppEvent = {
  eventId: 'evt_user_action',
  metadata: {
    action: 'click',
    target: 'button',
  },
};

Resync.logEvent(event);

Platform Support​

  • ✅ JavaScript (ES6+) - Modern JavaScript environments
  • ✅ React Native - iOS and Android apps
  • ✅ Expo - Managed and bare workflows
  • ✅ Node.js - Server-side JavaScript (with compatible storage)
  • ✅ Web Browsers - Chrome, Firefox, Safari, Edge

Best Practices​

1. Initialize Early​

Initialize Resync as early as possible in your application lifecycle:

// App entry point
import Resync from 'resync';

async function initializeApp() {
  await Resync.init({
    key: process.env.RESYNC_API_KEY,
    appId: parseInt(process.env.RESYNC_APP_ID),
    storage: localStorage,
    environment: 'sandbox'
  });

  // Continue app initialization
  startApp();
}

initializeApp();

Note: Cache TTL is automatically configured based on your environment:

  • Development: No caching (always fetches fresh data for fast iteration)
  • Production: 6 hours cache (optimal performance)

2. Handle Errors Gracefully​

Always handle potential errors:

try {
  await Resync.init({
    key: 'your-api-key',
    appId: 7,
    storage: localStorage,
    environment: 'sandbox'
  });
} catch (error) {
  console.error('Failed to initialize Resync:', error);
  // Fallback to default configuration
}

3. Use Environment Variables​

Store API credentials securely:

await Resync.init({
  key: process.env.RESYNC_API_KEY,
  appId: parseInt(process.env.RESYNC_APP_ID),
  storage: localStorage,
  environment: 'sandbox'
});

4. Automatic Cache Management​

The SDK automatically manages caching based on your environment:

await Resync.init({
  key: 'your-api-key',
  appId: 7,
  storage: localStorage,
  environment: 'sandbox'
});

// Cache TTL is set automatically:
// - Development: 0ms (no caching, always fresh)
// - Production: 6 hours (21600000ms)

5. Clean Up Subscriptions​

Unsubscribe from updates when components unmount:

function MyComponent() {
  useEffect(() => {
    const handleUpdate = (config) => {
      console.log('Config updated:', config);
    };

    Resync.subscribe(handleUpdate);

    return () => {
      Resync.unsubscribe(handleUpdate);
    };
  }, []);
}

Troubleshooting​

API Key Issues​

Problem: "API key is required" error

Solution: Ensure you're passing the API key during initialization:

await Resync.init({
  key: 'rsk_live_your_api_key', // Make sure this is set
  appId: 7,
  storage: localStorage,
  environment: 'sandbox'
});

Storage Issues​

Problem: "Storage is required" error

Solution: Provide a valid storage object:

// Web
await Resync.init({
  key: 'your-api-key',
  appId: 7,
  storage: localStorage, // Add storage
  environment: 'sandbox'
});

// React Native
import AsyncStorage from '@react-native-async-storage/async-storage';

await Resync.init({
  key: 'your-api-key',
  appId: 7,
  storage: AsyncStorage, // Add storage
  environment: 'sandbox'
});

Configuration Not Updating​

Problem: Configuration values aren't updating in production

Solution: The cache TTL is automatically set based on environment:

  • Production: 6 hours cache
  • Development: No cache (always fresh)

License​

MIT

Built with ❤️ for developers who ship fast